Echarts 集成 VUE3 + TS

首先去官网下载JS：

在 https://www.jsdelivr.com/package/npm/echarts 选择 dist/echarts.js，点击并保存为 echarts.js 文件。

 

我找好了啊 5.4.0 ： https://cdn.jsdelivr.net/npm/echarts@5.4.0/dist/echarts.min.js

 VUE 的 index.html 引入 ：

 

 

 然后使用：

 

 引入一下。

封装使用：

    // 初始化过去30天Echaset的快照信息
    const init30DayEcharts = (list: any) => {
      // 发布生产后出现问题：切到别的页面，再切回首页，报表显示不出来
      // 解决方法：把原来的id=main的区域清空，重新初始化
      const mainDom = document.getElementById("main-col");
      if (mainDom) {
        mainDom.innerHTML =
          '<div id="main" style="width: 100%;height:300px;"></div>';
      }
      // 基于准备好的dom，初始化echarts实例
      const myChart = echarts.init(document.getElementById("main"));

      const xAxis = [];
      const seriesView = [];
      const seriesVote = [];
      for (let i = 0; i < list.length; i++) {
        const record = list[i];
        xAxis.push(record.date);
        seriesView.push(record.viewIncrease);
        seriesVote.push(record.voteIncrease);
      }

      // 指定图表的配置项和数据
      const option = {
        title: {
          text: "30天趋势图",
        },
        tooltip: {
          trigger: "axis",
        },
        legend: {
          data: ["总阅读量", "总点赞量"],
        },
        grid: {
          left: "1%",
          right: "3%",
          bottom: "3%",
          containLabel: true,
        },
        toolbox: {
          feature: {
            saveAsImage: {},
          },
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: xAxis,
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            name: "总阅读量",
            type: "line",
            // stack: '总量', 不堆叠
            data: seriesView,
            smooth: true,
          },
          {
            name: "总点赞量",
            type: "line",
            // stack: '总量', 不堆叠
            data: seriesVote,
            smooth: true,
          },
        ],
      };

      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
    };