关于vue.js: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>