永洪社区

标题: 自定义生成图示求助 [打印本页]

作者: yhdata_QifoXPD3 时间: 2024-6-14 17:45
标题: 自定义生成图示求助
本帖最后由 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"
}
]

作者: Adam 时间: 2024-6-15 11:22
请问一下是在哪个版本里去使用的这个自定义呢

欢迎光临永洪社区 (https://club.yonghongtech.com/)