在vue中使用Echarts

安装

安装其实是比较简单的，直接在项目中打开命令行工具，执行npm install echarts --save 也可简写为npm i echarts -S，即将Echarts安装到项目生产环境中。

安装完成之后我们需要打开main.js文件，在上边找一个位置进行引入Echarts，并将其挂载到vue的原型中，具体代码如下

import echarts from 'echarts'
Vue.prototype.$echarts = echarts

使用

在简单安装并挂载原型之后，我们即可在所需要的页面直接使用的。

首先我们要建立一个容器，一个可以放置Echarts的空div

<div ref="myChart" style="width:100%;height:520px" id="myChart"></div>
在这里我使用了ref来获取DOM节点，主要是为了避免Echarts的容器还没有生成就进行初始化。

创建完容器之后即可使用数据对Echarts进行渲染了，为了方便各位小伙伴，我在此贴一个公共代码，需要在项目中使用Echarts的小伙伴可以直接复制啦~

mounted(){
	this.setMyEchart()  //页面挂载完成后执行
},
methods: {
    setMyEchart() {
        const myChart = this.$refs.myChart;  //通过ref获取到DOM节点
        if (myChart) {
            const thisChart = this.$echarts.init(myChart);  //利用原型调取Echarts的初始化方法
            const option = {};  //{}内写需要图表的各种配置，可以在官方案例中修改完毕后复制过来
            thisChart.setOption(option);  //将编写好的配置项挂载到Echarts上
            window.addEventListener("resize", function() {
                thisChart.resize();  //页面大小变化后Echarts也更改大小
            });
        }
    }
}