Echarts在线免费图表

 
            const pieUnit = '万'
const pieData = [
   { statType: '01', name: '大学', value: 31, color: '#69DDF1' },
   { statType: '02', name: '商业', value: 20, color: '#79CE9B' },
   { statType: '03', name: '农业', value: 10, color: '#E89B42' },
   { statType: '04', name: '居民', value: 88, color: '#EE7165' },
   { statType: '05', name: '趸售', value: 23, color: '#713AEA' },
   { statType: '06', name: '水电', value: 100, color: '#6732E3' },
   { statType: '07', name: '能源', value: 87, color: '#0B63C2' }]

// 饼图数据处理
const pieDataHandle = function (data) {
   data.sort((a, b) => b.value - a.value);
   data.map(item => {
      return { value: item.value, name: item.name };
   });
   return data;
}

// 饼图配置
option = {
   backgroundColor: "#000",
   // 颜色配置
   color: pieData.map(el => el.color),
   legend: {
      show: true,
      // 图例形状
      icon: 'circle',
      orient: 'vertical', // 设置图例的方向
      top: 'center', // 居中
      right: '10%',
      itemWidth: 18,
      itemHeight: 18,
      itemGap: 10,
      data: pieData.map(el => el.name),
      textStyle: {
         padding: [0, 0, 0, 10],
         fontSize: 16,
         color: '#40C5F1'
      }
   },
   series: [
      {
         type: 'pie',
         roseType: 'radius',
         radius: ['15%', '50%'],
         center: ['45%', '50%'],
         // 处理数据，进行排序
         data: pieDataHandle(pieData),
         hoverAnimation: false,
         itemStyle: {
            normal: { borderWidth: 1 }
         },
         labelLine: {
            length: 0
         },
         label: {
            show: true,
            padding: [0, 20, 0, 0],
            // 展示所有标签
            formatter: params => {
               if (params.name) {
                  return '{name|' + params.name + '}';
               }
            },
            rich: {
               name: { fontSize: 16, color: '#a6e4ff' }
            }
         },
         emphasis: {
            focus: 'self', //其他虚化
            label: {
               show: true,
               padding: [0, 10, 0, 0],
               // 展示所有标签
               formatter: params => {
                  return [
                     `{aName|${params.name}}\n` +
                     `{household|${params.value}${
                     pieUnit
                     }}` +
                     `{discount|人数}\n\n` +
                     `{household|${
                     params.data.discdDmdElecAmt,
                     2
                     }${pieUnit}}` +
                     `{discount|消费}`
                  ];
               },
               rich: {
                  aName: {
                     // 名称的字体样式
                     fontSize: 16,
                     color: '#a6e4ff',
                     padding: [0, 0, 0, 0]
                  },
                  household: {
                     // 户数的字体样式
                     fontSize: 18,
                     color: '#fff',
                     padding: [0, 0, 0, 0]
                  },
                  discount: {
                     fontSize: 16,
                     color: '#a6e4ff',
                     padding: [0, 0, 0, 0]
                  }
               }
            },
            itemStyle: {
               shadowBlur: 30,
               shadowOffsetX: 0,
               shadowColor: 'rgba(0, 0, 0, 0.5)',
               borderColor: '#000',
               borderWidth: 1
            }
         }
      }
   ]
};