本帖最后由 yhdata_QifoXPD3 于 2024-6-14 17:47 编辑
目标:
以column1 即日期为横轴,不同的column2为一条折线,column3作为纵坐标数字内容,当前代码根据options格式化数据后使用,无法展示内容--展示内容为空
JS如下:// 定义横轴数据
var dates = [];
for (var i = 1; i < options.length; i++) {
dates.push(options[i].column1);
}
// 定义系列数据
var seriesData = {};
for (var i = 1; i < options.length; i++) {
var column2 = options[i].column2;
if (!seriesData[column2]) {
seriesData[column2] = [];
}
seriesData[column2].push(options[i].column3);
}
// 定义颜色列表
var colorList = ['#c23531', '#2f4554', '#61a0a8';
// 定义echarts配置项
option = {
color: colorList,
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross'
}
},
legend: {
data: Object.keys(seriesData)
},
xAxis: {
type: 'category',
data: dates
},
yAxis: {
type: 'value'
},
series: Object.keys(seriesData).map(function (key, index) {
return {
name: key,
type: 'line',
data: seriesData[key,
lineStyle: {
color: colorList[index
}
};
})
};
data如下
[
{
"column1": "start_date",
"column2": "资源组+cversion",
"column3": "total_count",
"column4": "result"
},
{
"column1": "2024-05-27 / 2024-06-02",
"column2": "数据2",
"column3": 46,
"column4": "数据1,数据2,数据3"
},
{
"column1": "2024-05-27 / 2024-06-02",
"column2": "数据1",
"column3": 44,
"column4": "数据1,数据2,数据3"
},
{
"column1": "2024-06-03 / 2024-06-09",
"column2": "数据2",
"column3": 64,
"column4": "数据1,数据2,数据3"
},
{
"column1": "2024-06-03 / 2024-06-09",
"column2": "数据1",
"column3": 39,
"column4": "数据1,数据2,数据3"
},
{
"column1": "2024-06-10 / 2024-06-16",
"column2": "数据3",
"column3": 16,
"column4": "数据1,数据2,数据3"
},
{
"column1": "2024-06-10 / 2024-06-16",
"column2": "数据2",
"column3": 43,
"column4": "数据1,数据2,数据3"
},
{
"column1": "2024-06-10 / 2024-06-16",
"column2": "数据1",
"column3": 29,
"column4": "数据1,数据2,数据3"
}
]
|