Echarts在线免费图表

 
            const resData = [
   { value: 100, name: '小明' },
   { value: 80, name: '小方' },
   { value: 60, name: '小红'},
   { value: 40, name: '小李' },
   { value: 20, name: '小张' }
]
option = {
   tooltip: {
      trigger: 'item',
      formatter: '{a} <br/>{b} : {c}件'
   },
   legend: {
      orient: 'vertical',
      top: 'middle',
      right: 5,
      type: 'scroll',
      pageIconSize: [10, 10],
      pageIconColor: '#6494f3',
      pageIconInactiveColor: '#ccc',
      formatter: function (name) {
         // pieData是饼图的数组数据
         let data = resData;
         let tarValue = 0;
         for (let i = 0, l = data.length; i < l; i++) {
            // total += parseInt(data[i].value);
            if (data[i].name == name) {
               tarValue = data[i].value;
            }
         }
         let arr = [
            '{a|' + name + ':}',
            '{b|' + tarValue + '}',
            '{a|个}'
         ]
         return arr.join('')
      },
      textStyle: {	// 添加
         padding: [8, 0, 0, 0],
         rich: {
            a: {
               fontSize: 14,
               width: 90
            },
            b: {
               fontSize: 16,
               width: 60,
               color: '#5C92FF',
            },
            c: {
               fontSize: 14,
               with: 20
            }
         }
      }
   },
   series: [
      {
         name: '物资总进度',
         type: 'funnel',
         left: '2%',
         top: 28,
         bottom: 20,
         width: '50%',
         sort: 'descending',
         gap: 2,
         label: {
            show: false,
         },
         color: ["#6494F3", "#F57818", "#62C85B", "#FF6164", "#DC59E8"],
         labelLine: {
            show: false,
         },
         itemStyle: {
            borderColor: '#fff',
            borderWidth: 8
         },
         emphasis: {
            label: {
               show: false,
            }
         },
         data: resData
      }
   ]
};