1、安装指定版本echarts
npm install echarts@5.3.1 --save
2、main.js中全局引入
import * as echarts from "echarts"
window.echarts = echarts;
3、vue页面中引用
<div id="main" class="main_container"></div>
4、引入数据接口
import { bloodPressureList } from '../../api/healthMonitor/index'
5、data中存入echarts假数据
data() {
return {
//echarts数据
option:{
title: {
text: '数据监测'
},
tooltip: {
trigger: 'axis'
},
legend: {
data: ['高数', '低数', '平数']
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: false
},
toolbox: {
feature: {
saveAsImage: {}
}
},
xAxis: {
type: 'category',
data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
},
yAxis: {
type: 'value'
},
series: [
{
data: [100, 120, 100, 120, 90, 80, 110],
type: 'line',
smooth: true,
name: '高数',
},
{
data: [75, 76, 59, 59, 60, 66, 69],
type: 'line',
smooth: true,
name: '低数',
},
{
data: [60, 60, 60,60, 60, 60,60],
type: 'line',
smooth: true,
name: '平数',
}
]
}
}
},
6、在method中调用数据接口方法
initCharts() {
//获取数据
bloodPressureList().then(res => {
//将json对象的所有数据组成一个数组
var highPressureArr = [];
res.data.sbpData.map(val => {
highPressureArr.push(val);
});
var lowPressureArr = [];
res.data.dbpData.map(val => {
lowPressureArr.push(val);
});
//将json对象中的所有数据组成一个数组
var monitoringTimeArr=[]
res.data.date.map(val => {
monitoringTimeArr.push(val);
});
setTimeout(()=>{
myChart.setOption({
xAxis: {
data: monitoringTimeArr
},
series: [
{
data: highPressureArr
},
{
data: lowPressureArr
}
]
})
}, 300 )
})
// 基于准备好的dom,初始化echarts实例
var myChart = this.$echarts.init(document.getElementById('main'));
// 绘制基本图表
myChart.setOption(this.option);
},
7、在mounted方法中调用渲染数据方法
mounted() {
this.initCharts()
},
8、处理echarts宽高
#main{
margin-top: 15px;
width: 80%;
height: 60vh;
}