echarts-环形图-水球图

echarts

饼状/环形图

首先实现环状图中间显示的数字,总量及文字,不同颜色显示

option:{
title: {
            zlevel: 0,//默认展示
            text: [
                '{value|' + "8.8kg" + '}',
                '{name|农药总量}',
            ].join('\n'),
         
            top: '35%',
            left: '29%',
            textAlign: 'center',
            textStyle: {
                rich: {
                    value: {
                        color: '#fff',
                        fontSize: 16,
                        fontWeight: 'bold',
                    },
                    name: {
                        color: '#00B8FF',
                        lineHeight: 30,
                        fontSize:14,
                        fontWeight:600
                        
                    },
                },
            },
        },
}

现在实现legend效果图

option:{
	legend:{
       orient: 'vertical',//纵向显示 "horizontal"==》横向显示
       right: '10px',
       top: 'center',
       icon: 'circle',
       itemWidth:6,
       textStyle: {
         rich: {//在rich里面，可以自定义富文本样式。利用富文本样式，可以在标签中做出非常丰富的效果。
             a: {
                 color: '#fff',
                 width: 30
             },
             c:{
            fontSize:13,
                align:'center',
                color:"#fff",
                padding: [0, 5, 0, 20]
        },
             b0: {
                 color: 'rgba(14,184,246)',
                 fontSize: 13,
             },
             b1: {
                 color: 'rgba(240,255,1)',
                 fontSize: 13,
             },
             b2: {
                 color: 'rgba(252,91,62)',
                 fontSize: 13,
             },
             b3: {
                 color: 'rgba(30,245,154)',
                 fontSize: 13,
             }
         }
     },
     formatter: function(name) {
         let title = ''
         var total = 0;
         var target;
         var index;
         var total;
         for (var i = 0, l = data.length; i < l; i++) {
             total += data[i].value;
             if (data[i].name == name) {
                 target = data[i].value;
                 title = data[i].label
                 index = i < 6 ? i : 5
             }
         }
         return `{a| ${name}}{c|${target}kg}{b${index}| ${((target/total)*100).toFixed(2)}%}个`	    
	},
}

水球图

myChart.clear() //清空绘画内容
loadjs(
    'https://echarts.baidu.com/resource/echarts-liquidfill-latest/dist/echarts-liquidfill.min.js'
    ,'asd',()=>{ //异步动态加载js
   var value = 0.20;
option = {
    backgroundColor:'rgba(0,0,0,0)', //背景
     title: {
         text: (value * 100).toFixed(0) + '{a|%}',//图形中间显示的文本
         textStyle: {
             fontSize: 14,
              color:"#fff",
             fontFamily: 'Microsoft Yahei',
             fontWeight: 'normal',
             rich: {
                 a: {
                     fontSize: 14,
                     color:"#fff"
                 }
             }
         },
         x: 'center',
         y: '35%'
     },
       center: ['30%', '50%'],
    series: [{
        type: 'liquidFill',
        name: 'Multi-Data',
      radius: '80%',
      data: [{'name':'实施中','value':"0.46"}],  //data
        outline: {
            show: false,
            },  
             color: {
             type: 'linear',
             x: 0,
             y: 0,
             x2: 0,
             y2: 1,
             colorStops: [{
                 offset: 1,
                 color: 'rgba(186,223,108)'//水波纹的颜色
             }],
             globalCoord: false
         },
        backgroundStyle: {
            color:"rgba(0, 0, 0, 0.4)",//水球图背景
            borderColor: 'rgba(235,181,29,0.05)',
            borderWidth: 15,
            shadowColor: 'rgba(235,181,29, 0.6)',
            shadowBlur: 30
        },
    
        label:{
            normal: {
                 formatter: '',//隐藏水球图原有样式
             }
        }
    }]
};
})