社区首页 >专栏 >在vue3 中使用echarts

在vue3 中使用echarts

全栈程序员站长

发布于 2022-11-17 03:25:58

2.8K00

代码可运行

文章被收录于专栏：全栈程序员必看全栈程序员必看

运行总次数：0

代码可运行

大家好，又见面了，我是你们的朋友全栈君。

在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: {
  }
}

之后在需要的页面中inject

这种方法可以统一管理引入的echarts

data_page.vue:

import { inject, onMounted } from "vue";

export default {
  name: "data_page",
  setup() {
    let echarts = inject("ec");//引入
    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() {},
};

另外是使用app上的属性（这个方法目前已经不行了，因为vue已经不允许这种挂载方式）

1,安装echarts

npm install echarts --save

有cnpm 的可以cnpm安装

2,在main.js中导入

import { createApp } from 'vue'
import App from './App.vue'
import * as echarts from 'echarts'

const app = createApp(App).mount('#app')
app.echarts=echarts

3,在需要使用的页面,定义div

<div id="myChart"
     :style="{ width: '300px', height: '300px' }"></div>

4,在monted中init

mounted() {
    //this.$root => app
    let myChart = this.$root.echarts.init(
      document.getElementById("myChart")
    );
    // 绘制图表
    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],
        },
      ],
    });
  },

但是可以使用这个globalProperties属性

app.config.globalProperties. $echarts = echarts;然后this.$ echarts.init

但是我不推荐，因为vue3不建议使用除了《script setup》之外的写法，不建议出现this

《script setup》写法见这篇文章：

vue3.2 正式语法 script setup ＜script setup＞_启明星的指引—博客-CSDN博客

这里最重要的是import * as echarts from ‘echarts’, 不能 import echarts from ‘echarts’,这样会报错,因为5,0版本的echarts的接口已经变成了下面这样

export { EChartsFullOption as EChartsOption, connect, disConnect, dispose, getInstanceByDom, getInstanceById, getMap, init, registerLocale, registerMap, registerTheme };