在项目中引入 Apache ECharts

你可以使用如下命令通过 npm 安装 ECharts

npm install echarts

实例：

<template>
<!--图形化容器-->
    <div
      id="report_optino"
      ref="myBox"
      style="width: 800px; height: 500px; margin-top: 40px"
    ></div>
  
</template>

<script>
//引入下载好的echarts插件
import * as echarts from "echarts";
import { getRepost } from "../../api/index.js";
export default {
  data() {
    return {};
  },
  methods: {
    async getRepost() {
      let { data, meta } = await getRepost();
    //基于准备好的dom，初始化echarts实例
      let myChart = echarts.init(this.$refs.myBox);
//给data添加一个tooltip属性
      data.tooltip = {
        trigger: "axis",
        axisPointer: {
          type: "cross",
          label: {
            backgroundColor: "#6a7985",
          },
        },
      };
//将请求好的数据放入到实例图标选项，会指出图表
      myChart.setOption(data);
    },
  },
  created() {
    this.getRepost();
  },
};
</script>

结果 ：

 其中最后整合好的数据如下

以上就是个人学习echarts的小demo，如果有什么问题，欢迎回访！