找文章 / 找答案

自定义生成图示求助

yhdata_QifoXPD3青铜三 显示全部楼层 发表于 2024-6-14 17:45:22 |阅读模式 打印 上一主题 下一主题
1
未解决

自定义生成图示求助

116 1
本帖最后由 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"
    }
]

回复

使用道具 举报

精彩评论1

Adam铂金一 显示全部楼层 发表于 2024-6-15 11:22:56
请问一下是在哪个版本里去使用的这个自定义呢
回复

使用道具 举报

高级模式
您需要登录后才可以回帖 登录 | 免费注册

  • 官方微信

    欢迎关注永洪服务号!收费为0,价值无限

    扫码关注
  • 新浪微博

    让每位用户轻松挖掘数据价值!

    访问新浪微博
  • 智能客服
50W

会员等你来哦

Copyright   ©2012-2024  北京永洪商智科技有限公司  (京ICP备12050607) 京公网安备110110802011451号 |联系社区管理员|《永洪社区协议》
返回顶部