vue Echarts帧动画

vue Echarts帧动画

1.效果如下：

 

2.源码如下：

<template>
  <div class="chart"></div>
</template>
<script>
import Bus from "@/utils/bus.js";
import { debounce } from "@/utils";

export default {
  name: "echarts2",
  data() {
    let initdata = 30 + Math.random().toFixed(4) * 4;
    let barbaldata = [];
    let ylinedata = [];
    let xdata = [];
    for (var i = 0; i < 50; i++) {
      barbaldata.push(0);
      ylinedata.push(initdata);
      xdata.push(i);
    }
    barbaldata.splice(
      barbaldata.length - 1,
      1,
      ylinedata[ylinedata.length - 1]
    );
    return {
      autoResize: {
        type: Boolean,
        default: true
      },
      chart: null,
      sidebarElm: null,
      chartData: { barbaldata, ylinedata, xdata }
    };
  },

  watch: {
    chartData: {
      deep: true,
      //immediate:true,
      handler(val) {
        this.drawEcharts();
      }
    }
  },
  mounted() {
    Bus.$on("ToEcharts", e => {
      this.chartData.xdata.shift();
      this.chartData.ylinedata.shift();
      this.chartData.xdata.push(e);
      this.chartData.ylinedata.push(e);
      this.chartData.barbaldata.splice(
        this.chartData.barbaldata.length - 1,
        1,
        e
      );
    });

    this.resetSizefun();
  },
  beforeDestroy() {
    if (!this.chart) {
      return;
    }
    if (this.autoResize) {
      window.removeEventListener("resize", this.__resizeHandler);
    }

    this.sidebarElm &&
      this.sidebarElm.removeEventListener(
        "transitionend",
        this.sidebarResizeHandler
      );

    this.chart.dispose();
    this.chart = null;
  },
  methods: {
    drawEcharts() {
      this.$nextTick(() => {
        this.initChart();
      });
    },
    initChart() {
      this.chart = this.$echarts.init(this.$el, "macarons");
      this.chart.clear();
      this.setOptions(this.chartData);
    },

    setOptions(chartData) {
      this.chart.setOption({
        backgroundColor: "#242424",
        grid: {
          top: "60",
          bottom: "20",
          right: "60",
          left: "60"
        },
        animation: false,
        tooltip: {
          trigger: "axis",
          show: false,
          axisPointer: {
            type: "cross"
          }
        },

        xAxis: {
          type: "category",
          boundaryGap: false,
          splitLine: { show: false },
          axisLine: {
            show: false
          },
          axisLabel: {
            show: false
          },
          axisTick: {
            show: false
          },
          data: chartData.xdata
        },
        yAxis: {
          type: "value",

          axisLabel: {
            show: false,
            formatter: "{value} "
          },
          axisPointer: {
            snap: true
          },
          splitLine: { show: false },
          axisLine: {
            show: false
          },
          axisTick: {
            show: false
          },
          connectNulls: true
        },
        series: [
          {
            data: chartData.ylinedata,
            type: "line",
            animation: false,
            smooth: true,
            symbol: "none",
            lineStyle: {
              width: 2,
              color: {
                type: "linear",
                colorStops: [
                  {
                    offset: 0,
                    color: "#D575C2", // 0% 处的颜色,
                    transition: 2
                  },
                  {
                    offset: 0.66,
                    color: "#D575C2", // 66% 处的颜色
                    transition: 2
                  },
                  {
                    offset: 1,
                    color: "#fff", // 100% 处的颜色
                    transition: 2
                  }
                ],
                opacity: 0.4,
                globalCoord: false // 缺省为 false
              }
            },
            width: 4
          },

          {
            type: "bar",
            data: chartData.barbaldata,
            itemStyle: {
              normal: {
                color:"#D575C2",
                 opacity: 0.8,
              }
            },
            barWidth: 2,
            animation: false,
            markPoint: {
              animation: false,
              symbol: "circle",
              data: [{ type: "max" }],
              symbolSize: 10,
              itemStyle: {
                normal: {
                  color: "#fff",
                  borderColor: "#D575C2",
                  borderWidth: "2",
                  label: {
                    show: false
                  }
                }
              }
            }
          }
        ]
      });
    },
    sidebarResizeHandler(e) {
      if (e.propertyName === "width") {
        this.__resizeHandler();
      }
    },
    //窗口改变执行方法
    resetSizefun() {
      if (this.autoResize) {
        this.__resizeHandler = debounce(() => {
          if (this.chart) {
            this.chart.resize();
          }
        }, 100);
        window.addEventListener("resize", this.__resizeHandler);
      }

      // 监听侧边栏的变化
      this.sidebarElm = document.getElementsByClassName("sidebar-container")[0];
      this.sidebarElm &&
        this.sidebarElm.addEventListener(
          "transitionend",
          this.sidebarResizeHandler
        );
    }
  }
};
</script>
<style lang="scss" scoped>
.chart {
  width: 100%;
  height: 428px;
}
</style>