Vue中引入echarts

一、安装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.准备好函数

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

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

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

        }
    },
};
</script>

2.准备一个容器来放echarts

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

<div ref="chart"></div>

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);
}