flask echarts多个环形进度条

<div id="mainjianpai" style="width:100%;height:400%;"></div>
            <script type="text/javascript">
        // 基于准备好的dom,初始化echarts实例
        var myChart = echarts.init(document.getElementById('mainjianpai'));
	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: ['50%', '50%'],
                       radius : [10,30], 
                       data:[
                           {value:800, 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: ['50%', '50%'],
                       radius : [40,60], 
                       data:[
                           {value:3000, name:'氨氮任务量'},
                           {value:200, name:'氨氮完成量'},
                       ],
                       itemStyle: {//系列级个性化
                           normal: {
                               color: function(params) {
                                   var colorList = [
                                     '#336600','#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: ['50%', '50%'],
                       radius : [70,90], 
                       data:[
                           {value:5000, name:'二氧化硫任务量'},
                           {value:200, name:'二氧化硫完成量'},
                       ],
                       itemStyle: {//系列级个性化
                           normal: {
                               color: function(params) {
                                   var colorList = [
                                     '#333366','#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:'4',
                       type:'pie',
                       center: ['50%', '50%'],
                       radius : [100,120], 
                       data:[
                           {value:314, name:'氮氧化物任务量'},
                           {value:200, name:'氮氧化物完成量'},
                       ],
                       itemStyle: {//系列级个性化
                           normal: {
                               color: function(params) {
                                   var colorList = [
                                     '#339900','#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);
   </script>  
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值