实现echarts饼图自动切换动画

最新推荐文章于 2024-01-18 12:41:30 发布

原创

最新推荐文章于 2024-01-18 12:41:30 发布 · 4.5k 阅读

21 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端 #echarts #大数据 #实时大数据

项目场景：

实现echarts饼图自动切换动画

问题描述：

鼠标进入饼图高亮显示后进入其他饼块不会取消上一个饼块高亮。

效果

http://yang-jiahui-220.gitee.io/hb_bigdata/index.html

解决方案：

   index= param.dataIndex

解决文章所述问题记录上一次选中值重新进入时取消高亮

      var flag = true; // 为了做判断：当鼠标移动上去的时候，自动高亮就被取消
      var _this = this;
      var index= 0;

      //此处是echarts实例化 可自行跳过 （实例化开始）
      var chart = this.$echarts.init(document.getElementById("echart1"));
      var option = {
   
   
        tooltip: {
   
   
          trigger: "item",
          formatter: "{b} : {c} ({d}%)"
        },
        legend: {
   
   
          // orient: 'vertical',
          // top: 'middle',
          type: "scroll",
          orient: "vertical",
          right: 10,
          top: 0,
          bottom: 20,
          left: "left",
          textStyle: {
   
   
            color: "#fff",
            fontSize: 12
          }
        }