echarts组件自适应实现

父组件

<template>
  <div style="display: flex; justify-content: center">
    <LineChart
      :style="{
        top: '10px',
        left: '120px',
        margin: '0px 90px 0px -150px',
      }"
      ref="chart"
      :dates="chartData.dates"
      :ai-case-count="chartData.aiCaseCount"
      :adopted-count="chartData.adoptedCount"
      :containerWidth="a"
      :containerHeight="b"
    />
  </div>
</template>
  
  <script>
import LineChart from "../echart/common/chart.vue";

export default {
  components: { LineChart },
  data() {
    return {
      a: "100%",
      b: "100%",
      chartData: {
        dates: ["2023-01"],
        aiCaseCount: [120],
        adoptedCount: [80],
      },
    };
  },
  created() {
    this.handleResize();
    this.aa();
  },
  mounted() {
    window.addEventListener("resize", this.handleResize);
  },

  beforeDestroy() {
    window.removeEventListener("resize", this.handleResize);
  },
  methods: {
    handleResize() {
      this.a = document.body.clientWidth / 1.3 + "px";
      this.b = document.body.clientHeight / 1.3 + "px";
    },
    aa() {
      setTimeout(() => {
        this.chartData = {
          dates: [
            "2023-01",
            "2023-02",
            "2023-03",
            "2023-04",
            "2023-02",
            "2023-03",
            "2023-04",
            "2023-02",
            "2023-03",
            "2023-04",
          ],
          aiCaseCount: [120, 150, 210, 180, 150, 210, 180, 150, 210, 180],
          adoptedCount: [80, 10, 150, 110, 110, 120, 30, 50, 150, 130],
        };
      }, 10);
    },
  },
};
</script>

子组件

<!-- LineChart.vue -->
<template>
  <div class="chart-container">
    <div
      ref="chart"
      :style="{ width: containerWidth, height: containerHeight }"
    ></div>
  </div>
</template>
  
  <script>
import echarts from "echarts";
import { debounce } from "lodash";

export default {
  props: {
    dates: { type: Array, required: true },
    aiCaseCount: { type: Array, required: true },
    adoptedCount: { type: Array, required: true },
    containerWidth: { type: String, default: "1200px" },
    containerHeight: { type: String, default: "500px" },
  },

  data() {
    return {
      chartInstance: null,
    };
  },

  watch: {
    $props: {
      handler: debounce(function () {
        this.updateChart();
      }, 300),
      deep: true,
      immediate: true,
    },
  },

  mounted() {
    this.initChart();
    window.addEventListener("resize", this.handleResize);
  },

  beforeDestroy() {
    window.removeEventListener("resize", this.handleResize);
    this.chartInstance?.dispose();
  },

  methods: {
    initChart() {
      this.chartInstance = echarts.init(this.$refs.chart);
      this.updateChart();
    },

    updateChart() {
      const option = {
        backgroundColor: "#fff",
        title: {
          top: 20,
          text: "AI用例采纳情况",
          //   subtext: "数据更新于" + new Date().toLocaleDateString(),
          left: "center",
          textStyle: {
            margin: "100px",
            color: "#2c3e50",
            fontSize: 18,
            fontWeight: "bold",
          },
        },
        tooltip: {
          trigger: "axis",
          axisPointer: { type: "cross" },
        },
        legend: {
          data: ["AI用例生成数量", "采纳数量"],
          bottom: 20,
          textStyle: { color: "#666" },
        },
        grid: {
          top: 100,
          left: "3%",
          right: "4%",
          bottom: "15%",
          containLabel: true,
        },
        xAxis: {
          type: "category",
          data: this.dates,
          axisLabel: { color: "#666" },
        },
        yAxis: {
          type: "value",
          name: "单位:条",
          nameTextStyle: { color: "#666" },
        },
        series: [
          {
            areaStyle: { color: "#f5efa3" },
            name: "AI用例生成数量",
            type: "line",
            radius: [0, "50%"],
            smooth: true,
            data: this.aiCaseCount,
            itemStyle: { color: "#f5efa3" },
          },
          {
            areaStyle: { color: "#2ee4b7" },
            name: "采纳数量",
            type: "line",
            radius: [0, "50%"],
            smooth: true,
            data: this.adoptedCount,
            itemStyle: { color: "#2ee4b7" },
          },
        ],
      };
      this.chartInstance.setOption(option);
    },

    handleResize: debounce(function () {
      this.chartInstance?.resize();
    }, 300),
  },
};
</script>
  
  <style scoped>
.chart-container {
  position: relative;
  width: v-bind("containerWidth");
  height: v-bind("containerHeight");
}
</style>