可视化 | echarts饼图改编

• echarts模板来源
  

改编点

基本样式

• 去掉legend、label：show: false
• 背景透明：backgroundColor: "transparent"
• 去除功能标签
• 添加载入动态

  animationEasing: 'elasticOut',
  animationDelay: function (idx) {
       return Math.random() * 2000;
   }
  

• 统一设置颜色

  color: {
     type: "linear",
      x: 0,
      y: 0,
      x2: 0,
      y2: 1,
      colorStops: [
          {
          offset: 0, color: '#e6534c'
          },
          {
          offset: 1, color: '#fff'
          },
      ],
      global: false
  }
  

添加中心文字循播放

• 首先给定graphic区域放文字

  var graphic = [{
      type: 'text',
      left: 'center',
      top: 'center',
      style: {
          text: getPieText(pieData, currentIndex),
          textAlign: 'center',
          fill: '#000',
          fontSize: 18,
          fontWeight: 'bold',
      }
  }];
  

• 获取文字，全称太长取前两个字（关注黑龙江！！）

  function getPieText(data, index) {
     var name = data[index].name.substring(0, 2);
      if(data[index].name == '黑龙江省')
      {
          name = data[index].name.substring(0, 3);
      }
      return name + ((data[index].value / getTotalValue(data) * 100).toFixed(2)) + '%';
  }
  
  function getTotalValue(data) {
      return data.reduce((total, current) => {
          return total + current.value;
      }, 0);
  }
  

• 每次更新

  function updateGraphic() {
  	currentIndex = (currentIndex + 1) % pieData.length;
      myChart.setOption({
          graphic: [{
          type: 'text',
          left: 'center',
          top: 'center',
          style: {
              text: getPieText(pieData, currentIndex),
              textAlign: 'center',
              fill: '#000',
              fontSize: 18,
              fontWeight: 'bold',
          }
          }]
      });
  }
  

• 设置更新频率：setInterval(updateGraphic, 1500);

添加中间文字对应图形变色

function updateGraphic() {
  currentIndex = (currentIndex + 1) % pieData.length;
     myChart.setOption({
         graphic: [{
         type: 'text',
         left: 'center',
         top: 'center',
         style: {
             text: getPieText(pieData, currentIndex),
             textAlign: 'center',
             fill: '#000',
             fontSize: 18,
             fontWeight: 'bold',
         }
         }],
         series: [{
             selected: currentIndex,
             itemStyle: {
                 color: function(params) {
                     return (params.dataIndex === currentIndex) ? '#AC2619' : {
                         type: "linear",
                         x: 0,
                         y: 0,
                         x2: 0,
                         y2: 1,
                         colorStops: [
                             { offset: 0, color: '#e6534c' },
                             { offset: 1, color: '#fff' }
                         ],
                         global: false
                     }
                 }
             }
         }]
     });
 }

final