第一步:终端安装echart,安装成功后main.js引入echarts
import * as echarts from 'echarts';
// 挂载
Vue.prototype.$echarts = echarts
展示页面
// 展示块,注意存放图表的div一定要有宽高,否则页面报错。
<div id='main1'></div>
data(){
return {
option1: {} //用于存放图表的各种信息。
}
}
mounted() {
this.drawEchart()
}
methods: {
drawEchart(){
let myChart1 = $echarts.getInstanceByDom(document.getElementById('main1'))
// 如果不存在,就进行初始化
if (myChart1 == null) {
myChart1 = $echarts.init(document.getElementById('main1'))
}
// 渲染数据
myChart1.setOption(this.option1)
}
}