码迷,mamicode.com
首页 > 其他好文 > 详细

解决echarts饼图显示百分比,和显示内容字体及大小

时间:2017-12-12 17:29:09      阅读:2081      评论:0      收藏:0      [点我收藏+]

标签:分享   img   gen   trigger   pos   form   width   echart   element   

    // 基于准备好的dom,初始化echarts实例
        var pieEchart = echarts.init(document.getElementById(‘pieEchart‘));

         // 指定图表的配置项和数据
         var pieoption = {  
            title : {  
                text: ‘公里总里程‘,   
                x:‘left‘,
                textStyle:{
                    color:‘#FFFFFF‘,
                    fontSize:25
                }
            },  
            tooltip : {  
                trigger: ‘item‘,  
                formatter: "{a} <br/>{b} : {c} KM"  
            },  
            legend: {  
                orient : ‘vertical‘,  
                x : ‘left‘,  
                top:40,
                itemWidth:70,
                itemHeight:30,
                formatter: ‘{name}‘,
                textStyle:{
                    color: ‘#FFFFFF‘
                },
                data:[{name:‘高速50KM‘,icon:‘rect‘},{name:‘一级150KM‘,icon:‘rect‘},{name:‘二级150KM‘,icon:‘rect‘},{name:‘三级100KM‘,icon:‘rect‘},{name:‘四级50KM‘,icon:‘rect‘}]  }
            ,   
            calculable : true,  
            series : [  
                {  
                    name:‘公里总里程‘,  
                    type:‘pie‘,  
                    radius : ‘70%‘,//饼图的半径大小  
                    center: [‘60%‘, ‘60%‘],//饼图的位置 
                    label:{            //饼图图形上的文本标签
                            normal:{
                                show:true,
                                position:‘inner‘, //标签的位置
                                textStyle : {
                                    fontWeight : 300 ,
                                    fontSize : 16    //文字的字体大小
                                },
                                formatter:‘{d}%‘

                                
                            }
                        },
                    data:[  
                        {value:50,name:‘高速50KM‘,itemStyle:{normal:{color:‘#FE0000‘}}},  
                        {value:150,name:‘一级150KM‘,itemStyle:{normal:{color:‘#F29700‘}}},  
                        {value:150,name:‘二级150KM‘,itemStyle:{normal:{color:‘#02B0ED‘}}}, 
                        {value:100,name:‘三级100KM‘,itemStyle:{normal:{color:‘#55E87D‘}}},
                        {value:50,name:‘四级50KM‘,itemStyle:{normal:{color:‘#FFE200‘}}},
                    ]
                }  
            ]  
        };

            // 使用刚指定的配置项和数据显示图表。
            pieEchart.setOption(pieoption);
<div id="pieEchart" style="width: 480px;height:300px;">

技术分享图片

 

解决echarts饼图显示百分比,和显示内容字体及大小

标签:分享   img   gen   trigger   pos   form   width   echart   element   

原文地址:http://www.cnblogs.com/congyu/p/8028290.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!