echarts组件封装-动画效果

1. 动画效果-dataZoom配置

• 如果不是垂直的滑动条 请删除 orient 属性

2.动画效果 - tooltip 配置

3.props 属性

• domId 是图表唯一标识 如果一个页面里面存在多个组件请不要传入重复的
• optionData 这个不用说了吧,echarts 配置项,放几个图表的链接 PPchart 、Isqqw、Madeapie、Datainsight
• animotion 开启动画效果 默认:false

引入/挂载组件 传入参数

 <template>
  <div :id="domId" style="width: inherit;height: inherit; cursor: pointer"></div>
</template>

<script>
  import echarts from "echarts";

  export default {
    name: "chartContainer",
    props: {
      domId: {
        type: String,
        default: ''
      },
      // 配置项的传入
      optionData: {
        type: Object,
        default: () => {
          return {
            name: ''
          }
        },
      },
      // 启用动画
      animotion: {
        type: Boolean,
        default: false
      }
    },
    watch: {
      optionData(value, oldValue) {
        // console.info(value)
        this.currentOption = value;
        if (this.animotion) {
          this.clearTimeAnimation()
          this.set_Animation()
        } else {
          this.setOption();
        }
      }
    },
    data() {
      return {
        chartExample: null,
        time_Highlight: null,
        time_dataZoom: null,
        currentOption: this.optionData,
      }
    },
    methods: {
      // 初始化
      initEcharts() {
        this.chartExample = echarts.init(document.getElementById(this.domId));
        // 点击事件
        this.chartExample.on('click', (params) => {
          // params.event.stop()

          this.$emit('canvas-click', params, this.chartExample)
        })
        this.chartExample.on("legendselectchanged", (e) => {
          event.stopPropagation();
          console.log(e)
        })
        if (this.animotion) {
          this.clearTimeAnimation()
          this.set_Animation()
        } else {
          this.setOption();
        }
      },
      setOption() {
        this.currentOption && this.chartExample.setOption(this.currentOption);
      },
      // 获取echarts 实例
      getChartExample() {
        this.$emit('get-chart-example', this.chartExample)
      },
      //  清除定时器
      clearTimeAnimation() {
        if (this.time_dataZoom) {
          clearInterval(this.time_dataZoom)
        }
        if (this.time_Highlight) {
          clearInterval(this.time_Highlight)
        }
      },
      set_Animation() {
        if (Object.keys(this.currentOption).length <= 0) {
          return;
        }
        // 获取当前this
        var that = this;
        var option = this.currentOption;
        //是否存在数据区域缩字段
        let dataZoom = option.dataZoom ? true : false;
        let tooltip = option.tooltip ? true : false;

        // 鼠标悬浮事件
        that.chartExample.on('mouseover', (params) => {
          // console.log('悬浮')
          // 清除定时器
          this.clearTimeAnimation();

          that.chartExample.dispatchAction({
            type: 'downplay',
            seriesIndex: seriesIndex
          });
          that.chartExample.dispatchAction({
            type: 'highlight',
            seriesIndex: seriesIndex,
            dataIndex: params.dataIndex
          });
          tooltip && that.chartExample.dispatchAction({
            type: 'showTip',
            seriesIndex: 0,
            dataIndex: params.dataIndex,
          });
          that.time_Highlight = null;
          that.time_dataZoom = null;
        })

        // 鼠标移出事件
        that.chartExample.on('mouseout', () => {
          // 取消高亮效果
          that.chartExample.dispatchAction({
            type: 'downplay',
            seriesIndex: seriesIndex
          });
          this.clearTimeAnimation();
          setHighlight()
          dataZoom && setDataZoom()
        })
        // 当前 X 轴下标
        var myChartIndex = 0;
        // 拿到数组长度
        var dataLen = option.series[0].data.length;
        // 需要显示的系列的下标
        var seriesIndex = option.series.map((item, index) => (index))
        // 是否完成一轮动画
        var isReDataZoom = false;
        // 是否 Y 轴滚动缩放  Y轴缩放 需要增加 orient='vertical' 属性 Y轴0到1是向上的  需要1到0是向下滚动
        var orientZoom = dataZoom && option.dataZoom[0].orient === 'vertical' ? true : false;
        if (orientZoom) {
          //Y 最顶端开始
          myChartIndex = dataLen - 1;
        }
        var dataZoomStartIndex = dataZoom ? option.dataZoom[0].startValue : 0;
        var dataZoomEndIndex = dataZoom ? option.dataZoom[0].endValue : 5;
        // console.log(dataZoomStartIndex, dataZoomEndIndex);

        // 设置高亮和提示框
        function setHighlight() {
          option && that.chartExample.setOption(option);
          that.time_Highlight = setInterval(() => {
            // 取消高亮
            that.chartExample.dispatchAction({
              type: 'downplay',
              seriesIndex: seriesIndex,
              dataIndex: myChartIndex
            });
            // 取消提示框
            tooltip && that.chartExample.dispatchAction({
              type: 'hideTip',
              seriesIndex: 0,
              dataIndex: myChartIndex
            });
            // 是否Y轴
            if (orientZoom) {
              myChartIndex = (myChartIndex - 1) % dataLen;
              if (myChartIndex < 0) {
                myChartIndex = dataLen;
                // 同步
                isReDataZoom = true;
              }
            } else {
              myChartIndex = (myChartIndex + 1) % dataLen;
              if (myChartIndex === 0) {
                // 同步
                isReDataZoom = true;
              }
            }

            // 高亮
            that.chartExample.dispatchAction({
              type: 'highlight',
              seriesIndex: seriesIndex,
              dataIndex: myChartIndex
            });
            // 显示提示框
            tooltip && that.chartExample.dispatchAction({
              type: 'showTip',
              seriesIndex: 0,
              dataIndex: myChartIndex
            });
          }, 1950)
        }

        // 设置数据缩放滑动
        function setDataZoom() {
          if (!dataZoom) return
          that.time_dataZoom = setInterval(() => {
            // 每次向后滚动一个，最后一个从头开始。 与高亮同步
            if (isReDataZoom) {
              isReDataZoom = false;
              option.dataZoom[0].endValue = dataZoomEndIndex;
              option.dataZoom[0].startValue = dataZoomStartIndex;
            } else {
              if (orientZoom) {
                option.dataZoom[0].endValue = option.dataZoom[0].endValue - 1;
                option.dataZoom[0].startValue = option.dataZoom[0].startValue - 1;
              } else {
                option.dataZoom[0].endValue = option.dataZoom[0].endValue + 1;
                option.dataZoom[0].startValue = option.dataZoom[0].startValue + 1;
              }

            }
            option && that.chartExample.setOption(option);

          }, 2350);
        }

        if (dataZoom) {
          this.chartExample && setHighlight();
          this.chartExample && setDataZoom();
        } else {
          this.chartExample && setHighlight()
        }
      }
    },
    mounted() {
      this.initEcharts()
    },
    beforeDestroy() {
      // 清除定时器
      this.clearTimeAnimation()
      this.chartExample && this.chartExample.dispose()
      this.chartExample = null;
    }
  }
</script>