饼图循环跳动

最新推荐文章于 2024-07-16 16:43:05 发布

张云，

最新推荐文章于 2024-07-16 16:43:05 发布

阅读量114

点赞数

分类专栏： echarts javascript 文章标签： echarts javascript vue.js

本文链接：https://blog.csdn.net/buzhidjiaosha/article/details/129256542

版权

javascript 同时被 2 个专栏收录

18 篇文章 0 订阅

订阅专栏

echarts

8 篇文章 0 订阅

订阅专栏

加定时器

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();
      });
    },