饼图循环跳动

最新推荐文章于 2024-01-12 14:54:55 发布

原创最新推荐文章于 2024-01-12 14:54:55 发布 · 202 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#echarts #javascript #vue.js

javascript 同时被 2 个专栏收录

18 篇文章

订阅专栏

echarts

8 篇文章

订阅专栏

该文章展示了如何利用Echarts库创建一个饼图，并设置定时器动态改变图表中数据的高亮状态。代码详细说明了如何初始化图表，定义颜色，以及通过dispatchAction方法切换并高亮显示图表的不同部分。

加定时器

var  echarts1Data:[
        {
        'name': '大专',
        'value': 1.45
      }, {
        'name': '本科',
        'value': 2.93
      }, {
        'name': '硕士',
        'value': 3.15
      }
      ]
  echarts1(){
      var myChart = echarts.init(document.getElementById('echarts1'));
      var colorList = ['#ffdc50','#3fffea','#617ee4']
      var option = {
        tooltip: {
          trigger: 'item',
          textStyle: {
            fontSize: 36
          },
        },
        series: [{
          type: 'pie',
          center: ['50%', '50%'],
          radius: ['35%', '75%'],
          clockwise: true,
          avoidLabelOverlap: true,
          hoverOffset: 15,
          itemStyle: {
            normal: {
              color: function(params) {
                return colorList[params.dataIndex]
              }
            }
          },
          label: {
            show: true,
            formatter: '{b|{b}}\n{c|{c}%}',
            rich: {
              b: {
                color:"#fff",
                fontSize:45
              },
              c: {
                fontSize:55,
                fontFamily:"DIN"
              }
            }
          },
          labelLine: {
            normal: {
              length: 50,
              length2: 100,
              lineStyle: {
                width: 1
              }
            }
          },
          data:echarts1Data
        }]
      };
	  //重点是这里↓↓↓↓↓↓↓↓↓↓↓↓
      myChart.setOption(option)
      myChart.currentIndex = -1;
      //myChart.setOption(option);
      //console.log(option.series[0].data[0]);
      setInterval(function () {
        var dataLen = option.series[0].data.length;
        // 取消之前高亮的图形
        myChart.dispatchAction({
          type: 'downplay',
          seriesIndex: 0,
          dataIndex: myChart.currentIndex
        });
        myChart.currentIndex = (myChart.currentIndex + 1) % dataLen;
        // 高亮当前图形
        myChart.dispatchAction({
          type: 'highlight',
          seriesIndex: 0,
          dataIndex: myChart.currentIndex
        });
      }, 3000);
      window.addEventListener("resize", function () {
        myChart.resize();
      });
    },