Vue中引入echarts

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

一、安装 echarts

npm i echarts

二、引入 echarts

1.全局 引入

在main.js 文件中：

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

2.局部引入

let echarts = require(‘echarts’);

或者

import * as echarts from "echarts";

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

三、vue中使用 echarts

1.准备好函数

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

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

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

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

2.准备一个 容器来放echart s

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

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

3.初始化 容器

使用 init 函数

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

4.调节 配置项

option 配置项从这里搞：echarts官方文档示例

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

5.配置项放入 容器，绘制 图表

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