标签：cross 直接 getline city 需要 category time ems echarts
当时写完echart,然后当模拟数据动态显示的时候,把里面的data直接替换成获取回来的数据不显示,后来发现是当页面初始加载的时候就已经取数据了且只取一次,所以就用了一个watch监视,监视变化需要在重新渲染,但是发现一直在发送请求,所以后来就在获取数据之后再创建echart示例就好了呀,代码如下
drawLine() {
getLine(this.lineQuery).then(response => {
// 基于准备好的dom，初始化echarts实例,发送请求回来再创建实例
this.lineDatas = response.data
this.myChart = echarts.init(document.getElementById(‘myChart‘))
const option = {
tooltip: {
trigger: ‘axis‘,
axisPointer: {
type: ‘cross‘,
label: {
backgroundColor: ‘#6c6c6c‘
},
lineStyle: {
color: ‘#004E52‘,
opacity: 0.5,
width: 2
}
}
},
legend: {
data: this.lineDatas.emotionLevel,
icon: ‘circle‘
},
toolbox: {
feature: {
saveAsImage: {}
}
},
grid: {
left: ‘3%‘,
right: ‘4%‘,
bottom: ‘3%‘,
containLabel: true
},
xAxis: [
{
type: ‘category‘,
boundaryGap: false,
data: this.lineDatas.statTime
}
],
yAxis: [
{
type: ‘value‘
}
],
series: [
{
name: this.lineDatas.emotionCharts[0].emotionLevel,
type: ‘line‘,
itemStyle: {
normal: {
color: ‘#F56C6C‘,
lineStyle: {
color: ‘#F56C6C‘
}
}
},
data: this.lineDatas.emotionCharts[0].statNum
},
{
name: this.lineDatas.emotionCharts[1].emotionLevel,
type: ‘line‘,
itemStyle: {
normal: {
color: ‘#E6A23C‘,
lineStyle: {
color: ‘#E6A23C‘
}
}
},
data: this.lineDatas.emotionCharts[1].statNum
},
{
name: this.lineDatas.emotionCharts[2].emotionLevel,
type: ‘line‘,
itemStyle: {
normal: {
color: ‘#409EFF‘,
lineStyle: {
color: ‘#409EFF‘
}
}
},
// stack: ‘总量‘,
data: this.lineDatas.emotionCharts[2].statNum
}
]
}
// 绘制折线
this.myChart.setOption(option)
}).catch(() => {})
},
标签：cross 直接 getline city 需要 category time ems echarts
原文地址：https://www.cnblogs.com/zhaocainiao/p/10861300.html
