vue中echarts自适应

<template>
  <div :style="{ height: this.echartHeight }">
    <div
      v-if="echartsBarData.length"
      id="myCharts"
      :style="{ width: ‘100%‘, height: ‘100%‘ }"
      ref="myChartsBar"
    ></div>
    <empty v-else />
  </div>
</template>

<script>
import empty from "../empty";
import { initEchartBar, tooltip } from "./initEchartBar";
export default {
  components: {
    empty,
  },
  props: {
    // 判断是哪个页面
    fileName: {
      type: String,
      default: "",
    },
    // echarts  title
    echartTitleCon: {
      type: String,
      default: "",
    },
    // yName，y轴的名字
    yName: {
      type: String,
      default: "",
    },
    // 获取的图标数据
    echartsBarData: {
      type: Array,
      default: [],
    },
    // 是否显示dataZoom
    isshowDataZoom: Boolean,
    // echarts的高
    echartHeight: null,
  },

  data() {
    return {
       chart: null,
    };
  },
  mounted() {
    this.drawLine();
      // 绑定监听事件
    window.addEventListener(‘resize‘, this.resizeHandler)
  },
  beforeDestroy() { // 清理工作 避免内存泄漏
    // 销毁监听事件
    window.removeEventListener(‘resize‘, this.resizeHandler)
	// 销毁 Echarts 实例
    this.chart.dispose()
  },
  methods: {
    // Echarts 的 resize 方法
    resizeHandler() {
      this.chart.resize()
    },
    computedPosition(length, xArraylength) {
      console.log(length)
      console.log(xArraylength)
      if (xArraylength >= 7) {
        return length <= 7
          ? (this.end = 100)
          : (this.end = 100 - Math.floor((100 / length) * 100));
      } else {
        return 100;
      }
    },
    drawLine() {
      initEchartBar(this.echartsBarData, this.fileName).then((chartsData) => {
        // 基于准备好的dom，初始化echarts实例
        if (JSON.stringify(this.$refs) !== "{}") {
          this.chart = this.$echarts.init(this.$refs.myChartsBar);
          // 绘制图表
          let options = {
            title: {
              text: this.echartTitleCon, //图表顶部的标题
              show: this.echartTitleCon ? true : false,
              left: "center",
            },
            grid: {
              left: 30,
              right: 30,
              bottom: this.isshowDataZoom ? 60 : 10,
              top: 60,
              containLabel: true,
            },
            // 如果是白色提示框
            tooltip: {
              //鼠标悬浮框的提示文字
              trigger: "axis",
              extraCssText:
                "box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.12);opacity: 0.96;",
              axisPointer: {
                // 坐标轴指示器，坐标轴触发有效
                type: "line", // 默认为直线，可选为：‘line‘ | ‘shadow‘
                lineStyle: {
                  color: "#FF85C0",
                },
              },
              backgroundColor: "rgba(50, 50, 50, 0.7)",
              textStyle: {
                color: "#595959",
                fontSize: 12,
              },
              formatter: (params) => {
                return tooltip(params, this.echartsBarData);
              },
            },
            // tooltip: {
            //   //鼠标悬浮框的提示文字
            //   trigger: "axis",
            // },
            color: chartsData.color,
            legend: {
              data: chartsData.legendData,
              top: 30,
            },
            xAxis: [
              {
                type: "category",
                data: chartsData.xAxisData,
                axisTick: {
                  alignWithLabel: true,
                },
                axisLine: {
                  lineStyle: {
                    color: "#E5E5E5",
                  },
                },
                axisLabel: {
                  show: true,
                  interval: 0,
                  textStyle: {
                    color: "#595959",
                    fontWeight: 400,
                  },
                  margin: 12,
                  rotate: this.isshowDataZoom ? -90 : 0,
                },
                nameTextStyle: {
                  color: "#595959",
                  fontSize: 12,
                  align: "center",
                },
              },
            ],
            yAxis: {
              name: this.yName,
              type: "value",
              axisLine: {
                show: false,
              },
              axisTick: {
                show: false,
              },

              splitLine: {
                show: true,
                lineStyle: {
                  color: ["#E5E5E5"],
                  width: 1,
                  type: "dashed",
                },
              },
              axisLabel: {
                show: true,
                textStyle: {
                  color: "#595959",
                  fontWeight: 400,
                },
              },
              nameTextStyle: {
                color: "#8C8C8C",
                fontFamily: "Microsoft YaHei",
                fontWeight: 400,
                fontSize: 10,
              },
            },
            dataZoom: this.isshowDataZoom
              ? [
                  {
                    type: "inside",
                    start: 90,
                   end: this.computedPosition(1, this.echartsBarData && this.echartsBarData[0].dateCosList.length ), //xArraylength是x轴返回的数据的个数
                  },
                  {
                    start: 90,
                   end: this.computedPosition(1, this.echartsBarData && this.echartsBarData[0].dateCosList.length ), //xArraylength是x轴返回的数据的个数
                    handleIcon:
                      "M10.7,11.9v-1.3H9.3v1.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4v1.3h1.3v-1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z",
                    handleSize: "50%",
                    handleStyle: {
                      color: "#fff",
                      shadowBlur: 3,
                      shadowColor: "rgba(0, 0, 0, 0.6)",
                      shadowOffsetX: 2,
                      shadowOffsetY: 2,
                    },
                    bottom: 20,
                  },
                  // {
                  //   show: true,
                  //   type: "inside",
                  //   yAxisIndex: 0,
                  //   filterMode: "empty",
                  //   width: 10,
                  //   height: "100%",
                  //   showDataShadow: false,
                  //   left: "100%",
                  //   start: 0,
                  //   end: this.computedPosition(1, this.echartsBarData && this.echartsBarData[0].dateCosList.length ), //xArraylength是x轴返回的数据的个数
                  // },
                ]
              : null,
            series: chartsData.series,
          };
          this.chart.setOption(options);
        }
      });
    },
  },
  watch: {
    yName: function (newValue, oldValue) {
      this.yName = newValue;
      this.drawLine();
    },
    echartsBarData: function (newValue, oldValue) {
      this.echartsBarData = newValue;
      this.drawLine();
    },
  },
};
</script>