在vue3 中使用echarts

在SetUp中使用echarts

在setup中可以直接引入文件

import { onMounted } from "vue";
import * as echarts from 'echarts'
export default {
  name: "data_page",
  setup() {
    onMounted(() => {//需要获取到element,所以是onMounted的Hook
      let myChart = echarts.init(document.getElementById("customerChart"));
      // 绘制图表
      myChart.setOption({
        title: { text: "总用户量" },
        tooltip: {},
        xAxis: {
          data: ["12-3", "12-4", "12-5", "12-6", "12-7", "12-8"],
        },
        yAxis: {},
        series: [
          {
            name: "用户量",
            type: "line",
            data: [5, 20, 36, 10, 10, 20],
          },
        ],
      });
      window.onresize = function () {//自适应大小
        myChart.resize();
      };
    });
  },
  components: {},
  mounted() {},
};

因为setup中没有this,而且这时候还没有渲染,所以在setup中 ,也可以使用provide/inject来把echart引入进来

在根组件里引入echart,一般是App.vue

App.vue:

import * as echarts from 'echarts'
import { provide } from 'vue'

export default {
  name: 'App',
  setup(){
    provide('ec',echarts)//provide
  },
  components: {
  }