vue echarts 组件

<template>
  <div style="margin-bottom: 0.5rem">
    <div
      v-if="chartData && chartData.length > 0"
      style="height: 1.98rem"
      :id="chartId"
      v-on-echart-resize
    ></div>
    <div
      style="height: 1.98rem"
      v-if="!chartData || !(chartData.length > 0)"
      class="temp-data"
    >
      <img src="../assets/img/kong1.png" alt="" />
      <div>暂无此维度数据</div>
    </div>
  </div>
</template>

<script>
const sortNum = new Date().getTime();
export default {
  props: {
    name: "",
    chartData: {
      type: Array,
    },
    xData: {
      type: Array,
    },
  },
  data() {
    return {
      myChart: null,
      colorList: ["#3DFFCA", "#0EB5FF", "#FBBF00", "#FF6926", "#707070"],
    };
  },
  computed: {
    chartId: function () {
      return this.name + new Date().getTime();
    },
  },
  /**
   * 深度监听 图表生成之后 传定时刷新数据进来 由于数据不能动态传值，所以子组件使用深度监听来监控数据变化
   */
  watch: {
    chartData: {
      deep: true,
      handler(newVal, oldVal) {
        if (this.myChart) {
          this.myChart.dispose(); //数据变换 先销毁
          this.drawLine();
        } else {
          this.drawLine();
        }
      },
    },
  },
  mounted() {
    this.drawLine();
  },
  beforeDestroy() {
    if (this.myChart) {
      this.myChart.dispose();
      this.myChart = null;
    }
  },

  methods: {
    drawLine() {
      let _this = this;
      let dataZoomLength = 100;
      if (!this.xData.length || this.xData.length > 8) {
        dataZoomLength = 10;
      }
      //构建数据
      let serOpt = [];
      for (let i = 0; i < this.chartData.length; i++) {
        let target = this.chartData[i];
        let item = {
          name: target.name,
          type: target.type,
          data: target.data,
          itemStyle: {
            normal: {
              color: this.colorList[i],
              barBorderRadius: [2, 2, 2, 2],
              label: {
                show: false, //开启显示
                position: "top", //在上方显示
                textStyle: {
                  //数值样式
                  color: "#FBBF00",
                  fontSize: 8,
                },
              },
            },
          },
          showBackground: true,
          barWidth: 13,
          backgroundStyle: {
            color: "rgba(0,0,0,0.3)",
          },
        };

        serOpt.push(item);
      }
      //构建图表
      let option = {
        tooltip: {
          // 鼠标是否可以进入悬浮框
          // 触发方式 mousemove, click, none, mousemove|click
          triggerOn: `mousemove|click`,
          trigger: "axis",
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
          },

          position: function (point, params, dom, rect, size) {
            // 鼠标坐标和提示框位置的参考坐标系是：以外层div的左上角那一点为原点，x轴向右，y轴向下
            // 提示框位置
            var x = 0; // x坐标位置
            var y = 0; // y坐标位置

            // 当前鼠标位置
            var pointX = point[0];
            var pointY = point[1];

            // 外层div大小
            // var viewWidth = size.viewSize[0];
            // var viewHeight = size.viewSize[1];

            // 提示框大小
            var boxWidth = size.contentSize[0] / 3;
            var boxHeight = size.contentSize[1] / 3;

            // boxWidth > pointX 说明鼠标左边放不下提示框
            if (boxWidth > pointX) {
              x = 5;
            } else {
              // 左边放的下
              x = pointX - boxWidth;
            }

            // boxHeight > pointY 说明鼠标上边放不下提示框
            if (boxHeight > pointY) {
              y = 5;
            } else {
              // 上边放得下
              y = pointY - boxHeight;
            }

            return [x, y];
          },
        },
        legend: {
          // data: ["目标值", "实际值"],
          top: "-1%",
          left: "5%",
          itemWidth: 6,
          itemHeight: 6,
          textStyle: {
            color: "#78D4CE", //更改坐标轴文字颜色
            fontSize: 10, //更改坐标轴文字大小
          },
        },
        grid: {
          left: "3%",
          top: "20%",
          right: "5%",
          bottom: "0%",
          containLabel: true,
        },
        xAxis: {
          type: "category",
          data: this.xData,
          axisLine: {
            lineStyle: {
              color: "#0E635E", //更改坐标轴颜色 #0E635E #052626
            },
          },
          axisLabel: {
            interval: 0,
            rotate: 30, //倾斜
            textStyle: {
              color: "#78D4CE", //更改坐标轴文字颜色
              fontSize: 10, //更改坐标轴文字大小
            },
          },
        },
        dataZoom: [
          {
            type: "inside", //图表下方的伸缩条
            show: true, //是否显示
            realtime: true, //拖动时，是否实时更新系列的视图
            start: 0, //伸缩条开始位置（1-100），可以随时更改
            end: dataZoomLength, //伸缩条结束位置（1-100），可以随时更改
          },
        ],
        yAxis: [
          {
            // name: "",
            type: "value",
            // min: 0,
            // max: 0.14,
            nameGap: 35,
            splitNumber: 4,
            splitLine: {
              show: true,
              lineStyle: {
                type: "dotted",
                color: "#0E635E",
              },
            },
            axisLine: {
              lineStyle: {
                color: "rgba(6, 50, 49, 0.5)", //更改坐标轴颜色#052626
              },
            },
            axisLabel: {
              textStyle: {
                color: "#78D4CE", //更改坐标轴文字颜色
                fontSize: 10, //更改坐标轴文字大小
              },
            },
          },
        ],
        series: serOpt,
      };
      // 基于准备好的dom，初始化echarts实例
      if (this.chartId && document.getElementById(this.chartId)) {
        //动态存在 找不到问题。暂时使用判断
        this.myChart = this.$echarts.init(
          document.getElementById(this.chartId)
        );
        // 绘制图表
        this.myChart.setOption(option);
      }

      window.addEventListener("resize", function () {
        if (_this.myChart && _this.myChart.resize()) {
          _this.myChart.resize();
        }
      });
    },
  },
};
</script>

<style>
</style>