echarts官網：http://echarts.apache.org/zh/index.html
安裝
npm install echarts -S
引入
安裝完成后猾愿，由于需要全局引入均蜜，所以需要在main.js中配置
Vue.config.productionTip = false
Vue.prototype.$echarts = echarts
此處注意剿涮，安裝完成后沥潭，在package.json中看一下echarts的版本
版本
如果是5.0.0键痛，那么上方的引入會報錯，
此時需要改成
import * as echarts from 'echarts';
即可
使用
首先需要在代碼塊中聲明一個div
<div id="myChart" style="height: 400px"></div>
隨后在mounted方法中繪制圖表
mounted() {
this.drawLine();
},
methods: {
drawLine() {
// 基于準備好的dom例衍，初始化echarts實例
let myChart = this.$echarts.init(document.getElementById('myChart'))
// 繪制圖表
myChart.setOption({
title: {
text: '每日告警數'
},
tooltip: {
trigger: 'axis'
},
legend: {
data: ['溫度', '濕度', '電流', '電壓', '箱門', '水浸', '斷電', '無線信號']
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
toolbox: {
feature: {
saveAsImage: {}
}
},
xAxis: {
type: 'category',
boundaryGap: false,
data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
},
yAxis: {
type: 'value'
},
series: [
{
name: '溫度',
type: 'line',
stack: '總量',
data: [120, 132, 101, 134, 90, 230, 210]
},
{
name: '濕度',
type: 'line',
stack: '總量',
data: [220, 182, 191, 234, 290, 330, 310]
}
]
});
},
}
這時候＝嫡！又出現(xiàn)了一個問題
問題
仔細看挎扰，發(fā)現(xiàn)Y軸的數量不對勁翠订，
解決辦法：
將上面代碼中的series中，
stack: '總量',
這句話全部去掉遵倦，就好了
至此尽超，echarts的基本使用方法大體已經結束
