安装
安装其实是比较简单的,直接在项目中打开命令行工具,执行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也更改大小
});
}
}
}