可视化 | 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
                     }
                 }
             }
         }]
     });
 }