1.安装依赖(引入核心库）
npm install echarts
2.设定容器并指定大小
设置宽高，否则无法显示
3.设置配置项
—初始图表：
data(){
return{
options:{
//具体配置项参见https://echarts.apache.org/zh/option.html#title
},
}
}
mounted() {
this.initChart();
},
methods: {
// 实例化echart
initChart() {
let chart =this.$echart.init(document.getElementById("chart"));
chart.setOption(this.options);
}
}
注意：this.$echart.这里用到的是全局引入
//在main.js中全局引入echart
import echart from 'echarts'
Vue.prototype.$echart=echart
遇到的问题：
当数据发生改变时，图表无变化
解决方法：
使用vue中的watch监听options的变化，然后重新初始化
watch: {
options: {
handler(newVal, oldVal) {
let chart = this.$echart.init(document.getElementById("chart"));
chart.setOption(newVal, true);//设置为true是因为不重复渲染
},
deep: true //深度监听，因为options是个复杂数组对象
}
}
