Vue中引入echarts_代码007(未授权)

本文介绍: 注意：如果echarts的版本在5.0以上，只能局部引入，全局引入会出错（好像是这样）配置好ref 属性，用于后面初始化容器获取DOM。准备一个函数，并在挂载时调用。

npm i echarts

在main.js 文件中：

//全局引入echarts
import * as echarts from 'echarts';
//需要挂载到Vue原型上
Vue.prototype.$echarts = echarts;

let echarts = require(‘echarts’);

或者

import * as echarts from "echarts";

注意：如果echarts的版本在5.0以上，只能局部引入，全局引入会出错（好像是这样）

准备一个函数，并在挂载时调用

&lt;script&gt;
import * as echarts from "echarts";
export default {
    name: 'MyData',
    data() {
        return {

        };
    },
    mounted() {
        this.echartsInit();
    },
    methods: {
        echartsInit() {

        }
    },
};
&lt;/script&gt;

配置好ref 属性，用于后面初始化容器获取DOM

<div ref="chart"&gt;</div&gt;

使用 init 函数

methods: {
     echartsInit() {
     		//初始化容器
			const myChart = echarts.init(this.$refs.pro_chart); 
      }
  },

echartsInit() {
        const myChart = echarts.init(this.$refs.pro_chart); //初始化容器
        const option = {这里面就是图表的各种配置项，从官方文档搞下来};
  }

echartsInit() {
	     const myChart = echarts.init(this.$refs.chart); //初始化容器
	     const option = {这里面就是图表的各种配置项，从官方文档搞下来};
	     myChart.setOption(option);
}