1、 安装依赖 cnpm install echarts -S
全局引入
在main.js中
// 引入echarts
import echarts from 'echarts'
Vue.prototype.$echarts = echarts
局部引入
在用到的vue文件中
<script>
// 引入基本模板
let echarts = require('echarts/lib/echarts')
// 引入柱状图组件
require("echarts/lib/chart/line")
// 引入提示框和title组件
require('echarts/lib/component/tooltip')
require('echarts/lib/component/title')
export default {
data () {
return {
}
},//end data()
mounted(){
this.getDbData();
// this.drawLine();
},
methods: {
resizeCharts (echartsDom,chartBox) {
echartsDom.style.width = window.innerWidth+'px';
echartsDom.style.height = (window.innerHeight-100)+'px';
},
getDbData(){
const $this =this;
this.$http.get('/warn/api/dashbord')
.then(res => {
$this.drawLine(res.data);
})
.catch(err => {
})
},
drawLine(dbData){
let chartBox = document.getElementsByClassName('charts')[0]
let echartsDom = document.getElementById('echarts')
this.resizeCharts(echartsDom,chartBox);
// 基于准备好的dom，初始化echarts实例
let myChart = echarts.init(echartsDom); //若是全局引入，这里使用this.$echarts.init(echartsDom)
// 绘制图表
myChart.setOption({
title: {
left: 'left',
text: '监控预警统计'
},
tooltip: {},
xAxis: {
data: dbData.data.Doing.date
},
yAxis: {},
series: [{
name: '预警提示',
type: 'line',
data: dbData.data.Doing.value
},{
name: '预警待办',
type: 'line',
data: dbData.data.Reading.value
}]
});
}
}//end methods
};
</script>
