npm create useecharts

npm install echarts --save

src/components/BarGraph.vue：
<template>
  <div class="echarts-box">
    <div id="myEcharts" :style="{ width: this.width, height: this.height }"></div>
  </div>
</template>
<script>
import * as echarts from "echarts";
import {onMounted, onUnmounted} from "vue";
export default {
  name: "App",
  props: ["width", "height"],
  setup() {
    let myEcharts = echarts;
    onMounted(() => {
      initChart();
    });
    onUnmounted(() => {
      myEcharts.dispose;
    });
    function initChart() {
      let chart = myEcharts.init(document.getElementById("myEcharts"), "purple-passion");
      chart.setOption({
        title: {
          text: "2021年各月份銷售量（單位：件）",
          left: "center",
        },
        xAxis: {
          type: "category",
          data: [
            "一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"
          ]
        },
        tooltip: {
          trigger: "axis"
        },
        yAxis: {
          type: "value"
        },
        series: [
          {
            data: [
              606, 542, 985, 687, 501, 787, 339, 706, 383, 684, 669, 737
            ],
            type: "line",
            smooth: true,
            itemStyle: {
              normal: {
                label: {
                  show: true,
                  position: "top",
                  formatter: "{c}"
                }
              }
            }
          }
        ]
      });
      window.onresize = function () {
        chart.resize();
      };
    }
    return {
      initChart
    };
  }
};
</script>

src/App.vue：
<template>
  <bar-graph :width="'900px'" :height="'600px'"></bar-graph>
</template>
<script>
import BarGraph from "@/components/BarGraph";
export default {
  name: "App",
  components: {
    BarGraph
  },
}
</script>
<style>
#app {
}
</style>

import * as echarts from "echarts";

<template>
  <div class="echarts-box">
    <div id="myEcharts" :style="{ width: this.width, height: this.height }"></div>
  </div>
</template>
<script>
// 導(dǎo)入 ECharts
import * as echarts from "echarts";
import {onMounted, onUnmounted} from "vue";
export default {
  name: "App",
  props: ["width", "height"],
  setup() {
    let myEcharts = echarts;
    // 掛載時初始化圖表
    onMounted(() => {
      initChart();
    });
    // 卸載時銷毀圖表
    onUnmounted(() => {
      // 銷毀圖表
      myEcharts.dispose;
    });
    function initChart() {
      // 基于準備好的dom，初始化echarts實例
      let chart = myEcharts.init(document.getElementById("myEcharts"), "purple-passion");
      chart.setOption({
        // 設(shè)置圖表的標題
        title: {
          // 設(shè)置標題文本
          text: "2021年各月份銷售量（單位：件）",
          // title 組件離容器左側(cè)的距離
          left: "center",
        },
        // 設(shè)置圖表的 X 軸
        xAxis: {
          // 數(shù)據(jù)類型為離散的類目數(shù)據(jù)
          type: "category",
          // 設(shè)置 X 軸數(shù)據(jù)
          data: [
            "一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"
          ]
        },
        // 設(shè)置提示框組件
        tooltip: {
          // 設(shè)置提示框的觸發(fā)條件
          trigger: "axis"
        },
        // 設(shè)置圖表的 Y 軸
        yAxis: {
          // 數(shù)據(jù)類型為連續(xù)的數(shù)值數(shù)據(jù)
          type: "value"
        },
        // 設(shè)置圖表的圖例
        series: [
          {
            // 圖例中要展示的數(shù)據(jù)
            data: [
              606, 542, 985, 687, 501, 787, 339, 706, 383, 684, 669, 737
            ],
            // 設(shè)置圖表的類型為折線圖
            type: "line",
            // 平滑曲線
            smooth: true,
            // 在頂部顯示數(shù)據(jù)
            itemStyle: {
              normal: {
                label: {
                  show: true,
                  position: "top",
                  formatter: "{c}"
                }
              }
            }
          }
        ]
      });
      // 大小自適應(yīng)窗口大小變化
      window.onresize = function () {
        // 重置容器高寬
        chart.resize();
      };
    }
    return {
      initChart
    };
  }
};
</script>

<script>
// 導(dǎo)入 ECharts
import * as echarts from "echarts";
export default {
  name: "App",
  props: ["width", "height"],
  data() {
    return {
      // 數(shù)據(jù)源一，從服務(wù)器獲得
      postTitle: [...],
      // 數(shù)據(jù)源二，從服務(wù)器獲得
      postLikes: [...],
      myEcharts: {},
      option: {
        // 設(shè)置圖表的 X 軸
        xAxis: {
          // 數(shù)據(jù)類型為離散的類目數(shù)據(jù)
          type: "category",
          // 設(shè)置 X 軸數(shù)據(jù)
          data: this.postTitle,
        },
        // 設(shè)置圖表的 Y 軸
        yAxis: {
          // 數(shù)據(jù)類型為連續(xù)的數(shù)值數(shù)據(jù)
          type: "value",
        },
        // 設(shè)置圖表的圖例
        series: [
          {
            // 圖例中要展示的數(shù)據(jù)
            data: this.postLikes,
            // 設(shè)置圖表的類型為柱狀圖
            type: "bar",
          }
        ]
      },
    }
  },
  ...
  watch: {
    // 如果 postTitle 發(fā)生變化，則重新渲染圖表
    postTitle: {
      handler: function (newVal, oldVal) {
        if (newVal !== oldVal) {
          this.option.xAxis.data = this.postTitle;
          // 橫坐標變化，縱坐標也相應(yīng)變化
          this.option.series[0].data = this.postLikes;
          // 重新渲染圖表
          this.myEcharts.setOption(this.option);
        }
      },
      deep: true
    },
    postLikes: {
      handler: function (newVal, oldVal) {
        if (newVal !== oldVal) {
          this.option.series[0].data = this.postLikes;
          this.myEcharts.setOption(this.option);
        }
      },
      deep: true
    }
  }
};
</script>