效果图:
<template>
<div class="mod-demo-echarts">
<div v-if="date.length>0" id="chartLineBox" class="chart-box" style="width: 90%;height: 70vh;"></div>
</div>
</template>
<script>
import echarts from "echarts";
export default {
props:{
driverNo:{
type:String
},
time:{
type:String
}
},
data() {
return {
//请求后端
date: [],
zl: [],
qx: [],
tl:[]
};
},
mounted() {
this.getLine()
//这是为了解决请求异步问题
setTimeout(() => {
this.initChartPie();
}, 1000);
},
activated() {
// 由于给echart添加了resize事件, 在组件激活时需要重新resize绘画一次, 否则出现空白bug
// if (this.chartPie) {
// this.chartPie.resize();
// }
},
methods: {
getLine() {
this.$http({
url: this.$http.adornUrl(``),
method: "get",
params: this.$http.adornParams({
time:this.time,
driverNo:this.driverNo
}),
}).then(({ data }) => {
console.log(data.list);
for(let i=0;i<data.list.length;i++){
this.date.push(data.list[i].swTimeDate)
this.zl.push(data.list[i].zlValue)
this.qx.push(data.list[i].qxValue)
this.tl.push(data.list[i].tlValue)
}
});
},
initChartPie() {
this.chartLine = echarts.init(document.getElementById('chartLineBox'));
// 指定图表的配置项和数据
var option = {
tooltip: { //设置tip提示
trigger: 'axis'
},
legend: { //设置区分(哪条线属于什么)
data:['智力值','情绪值','体力值']
},
color: ['#8AE09F', '#FA6F53', '#4c82ff'], //设置区分(每条线是什么颜色,和 legend 一一对应)
xAxis: { //设置x轴
type: 'category',
boundaryGap: false, //坐标轴两边不留白
data: this.date,
name: '', //X轴 name
nameTextStyle: { //坐标轴名称的文字样式
color: '#FA6F53',
fontSize: 16,
padding: [0, 0, 0, 20]
},
axisLine: { //坐标轴轴线相关设置。
lineStyle: {
color: '#FA6F53',
}
}
},
yAxis: {
name: '',
nameTextStyle: {
color: '#FA6F53',
fontSize: 16,
padding: [0, 0, 10, 0]
},
axisLine: {
lineStyle: {
color: '#FA6F53',
}
},
type: 'value'
},
series: [
{
name: '智力值',
data: this.zl,
type: 'line', // 类型为折线图
lineStyle: { // 线条样式 => 必须使用normal属性
normal: {
color: '#8AE09F',
}
},
},
{
name: '情绪值',
data: this.qx,
type: 'line',
lineStyle: {
normal: {
color: '#FA6F53',
}
},
},
{
name: '体力值',
data: this.tl,
type: 'line',
lineStyle: {
normal: {
color: '#4c82ff',
}
},
}
]
};
this.chartLine.setOption(option);
},
},
};
</script>
<style lang="scss">
.mod-demo-echarts {
> .el-alert {
margin-bottom: 10px;
}
> .el-row {
margin-top: -10px;
margin-bottom: -10px;
.el-col {
padding-top: 10px;
padding-bottom: 10px;
}
}
.chart-box {
min-height: 200px;
min-width: 200px;
}
}
</style>