当前位置:   article > 正文

echarts在一个div图例中显示多个饼图。实例_echarts 多个饼图

echarts 多个饼图

var myChart = echarts.init(document.getElementById("1"));

myChart.setOption({

               backgroundColor: '#f7f7f7',//背景颜色
               tooltip : {
                   show: true,
                   formatter: "{a} <br/>{b} : {c} ({d}%)"
               },
               legend: {
                   x : 'center',
                   data:['班车','包车']
               },
               toolbox: {
                   show : false,
                   feature : {
                       mark : {show: true},
                       dataView : {show: true, readOnly: false},
                       restore : {show: true},
                       saveAsImage : {show: true}
                   }
               },
               calculable:false,
               series : [
                   {
                       name:'3',
                       type:'pie',
                       center: ['20%', '50%'],
                       radius : [40,50], 
                       data:[
                           {value:214, name:'班车'},
                           {value:300, name:'包车'},
                       ],
                       itemStyle: {//系列级个性化
                           normal: {
                               color: function(params) {
                                   var colorList = [
                                     '#339CD1','#FE8463','#9BCA63','#FAD860'
                                   ];
                                   return colorList[params.dataIndex]
                               },
                               labelLine:{//饼图不显示线条
                                   length:2,
                                   show:false
                               },
                               label:{//饼图不显示文字
                                   show:true,
                                   position : 'inner',//饼图图上显示百分比
                                   formatter : function (params) {                        
                                     return (params.percent - 0).toFixed(0) + '%'
                                   },
                                   textStyle:{
                                       fontSize:14
                                   }
                               },
                           }                           
                       }
                   },
                   {
                       name:'1',
                       type:'pie',
                       center: ['45%', '50%'],
                       radius : [40,50], 
                       data:[
                           {value:314, name:'班车'},
                           {value:200, name:'包车'},
                       ],
                       itemStyle: {//系列级个性化
                           normal: {
                               color: function(params) {
                                   var colorList = [
                                     '#339CD1','#FE8463','#9BCA63','#FAD860'
                                   ];
                                   return colorList[params.dataIndex]
                               },
                               labelLine:{//饼图不显示线条
                                   length:2,
                                   show:false
                               },
                               label:{//饼图不显示文字
                                   show:true,
                                   position : 'inner',//饼图图上显示百分比
                                   formatter : function (params) {                        
                                     return (params.percent - 0).toFixed(0) + '%'
                                   },
                                   textStyle:{
                                       fontSize:14
                                   }
                               }
                           }                           
                       }
                   }, {
                       name:'2',
                       type:'pie',
                       center: ['70%', '50%'],
                       radius : [40,50], 
                       data:[
                           {value:314, name:'班车'},
                           {value:200, name:'包车'},
                       ],
                       itemStyle: {//系列级个性化
                           normal: {
                               color: function(params) {
                                   var colorList = [
                                     '#339CD1','#FE8463','#9BCA63','#FAD860'
                                   ];
                                   return colorList[params.dataIndex]
                               },
                               labelLine:{//饼图不显示线条
                                   length:2,
                                   show:false
                               },
                               label:{//饼图不显示文字
                                   show:true,
                                   position : 'inner',//饼图图上显示百分比
                                   formatter : function (params) {                        
                                     return (params.percent - 0).toFixed(0) + '%'
                                   },
                                   textStyle:{
                                       fontSize:14
                                   }
                               }
                           }                           
                       }
                   }
               ]
           });    
myChart.setOption(option);
声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/爱喝兽奶帝天荒/article/detail/769648
推荐阅读
相关标签
  

闽ICP备14008679号