echarts表单,实现y轴获取数据库数据
const lineOption = {
title: {text: '患者核酸折线图'},
tooltip: {trigger: 'axis'},
legend: {data: ['患者1核酸']},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: {
type: 'category',
boundaryGap: false,
data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
},
yAxis: {type: 'value'},
series: [
{
name: '患者1核酸',
type: 'line',
data:[]
},
]
};
ajax请求数据库
let lineChart = echarts.init(document.getElementById('line'));
$.ajax({
url:"/api/huanzhehe",
dataType: 'json',
success: function(result){
console.log(result.data);
for (var i=0;i<result.length;i++){
lineOption.data[i]=result.data.nucleic[i];
}
lineChart.setOption(lineOption);
}
})
你可以先不请求接口,先使用静态数据,看看显示不显示。如果依然不显示,这时候就是数据的问题。
如果显示的话,就是异步数据刷新的问题。
根据您提供的代码,有以下几点需要注意的地方:
在ajax请求成功后,应该将获取到的数据存储到series数组中,并不是直接存储到xAxis.data中。可以使用push()方法将数据存储到series数组中。
在存储数据时,应该按照如下格式存储:
{
name: '患者1核酸',
type: 'line',
data:[数据1, 数据2, 数据3, 数据4, 数据5, 数据6, 数据7]
},
其中,数据1到数据7分别对应每一天的数据。请注意,要保证数据的顺序与x轴的刻度一一对应。
修改后的代码如下:
const lineOption = {
title: {text: '患者核酸折线图'},
tooltip: {trigger: 'axis'},
legend: {data: ['患者1核酸']},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: {
type: 'category',
boundaryGap: false,
data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
},
yAxis: {type: 'value'},
series: [
{
name: '患者1核酸',
type: 'line',
data: []
},
]
};
let lineChart = echarts.init(document.getElementById('line'));
$.ajax({
url: "/api/huanzhehe",
dataType: 'json',
success: function (result) {
console.log(result.data);
let nucleicData = result.data.nucleic;
for (let i = 0; i < nucleicData.length; i++) {
lineOption.series[0].data.push(nucleicData[i]);
}
lineChart.setOption(lineOption);
}
});
请注意,以上代码中的nucleicData是从返回结果中提取出来的核酸数据。您需要根据自己的实际情况修改这一部分的代码。
赋值有问题,数据赋给lineOption.series[0].data