找文章 / 找答案
精选问答 更多内容

[可视化] 自定义绘图

yhdata_PA2MMJ9W青铜三 显示全部楼层 发表于 2024-10-7 10:25:30 |阅读模式 打印 上一主题 下一主题
1
未解决

【可视化】 自定义绘图

252 1
多个度量的堆积柱状图,怎么替换里面的字段值,我有3个字段,column1是维度,column2和column3是度量,下面这段是原始js代码
var series = [
  {
    data: [120, 200, 150, 80, 70, 110, 130],
    type: 'bar',
    stack: 'a',
    name: 'a'
  },
  {
    data: [10, 46, 64, '-', 0, '-', 0],
    type: 'bar',
    stack: 'a',
    name: 'b'
  },
  {
    data: [30, '-', 0, 20, 10, '-', 0],
    type: 'bar',
    stack: 'a',
    name: 'c'
  },
  {
    data: [30, '-', 0, 20, 10, '-', 0],
    type: 'bar',
    stack: 'b',
    name: 'd'
  },
  {
    data: [10, 20, 150, 0, '-', 50, 10],
    type: 'bar',
    stack: 'b',
    name: 'e'
  }
];
const stackInfo = {};
for (let i = 0; i < series[0].data.length; ++i) {
  for (let j = 0; j < series.length; ++j) {
    const stackName = series[j].stack;
    if (!stackName) {
      continue;
    }
    if (!stackInfo[stackName]) {
      stackInfo[stackName] = {
        stackStart: [],
        stackEnd: []
      };
    }
    const info = stackInfo[stackName];
    const data = series[j].data[i];
    if (data && data !== '-') {
      if (info.stackStart[i] == null) {
        info.stackStart[i] = j;
      }
      info.stackEnd[i] = j;
    }
  }
}
for (let i = 0; i < series.length; ++i) {
  const data = series[i].data;
  const info = stackInfo[series[i].stack];
  for (let j = 0; j < series[i].data.length; ++j) {
    // const isStart = info.stackStart[j] === i;
    const isEnd = info.stackEnd[j] === i;
    const topBorder = isEnd ? 20 : 0;
    const bottomBorder = 0;
    data[j] = {
      value: data[j],
      itemStyle: {
        borderRadius: [topBorder, topBorder, bottomBorder, bottomBorder]
      }
    };
  }
}
option = {
  xAxis: {
    type: 'category',
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  yAxis: {
    type: 'value'
  },
  series: series
};

多维度.png
回复

使用道具 举报

精彩评论1

Fiona 显示全部楼层 发表于 2024-10-7 15:25:56
绑定字段到js绘图组件上,然后用options.column替换。
var series = [
  {
    data: options.column2,
    type: 'bar',
    stack: 'a',
    name: 'a'
  },
  {
    data: options.column3,
    type: 'bar',
    stack: 'a',
    name: 'b'
  },
  {
    data: options.column4,
    type: 'bar',
    stack: 'a',
    name: 'c'
  },
  {
    data: options.column5,
    type: 'bar',
    stack: 'b',
    name: 'd'
  },
  {
    data: options.column6,
    type: 'bar',
    stack: 'b',
    name: 'e'
  }
];
const stackInfo = {};
for (let i = 0; i < series[0].data.length; ++i) {
  for (let j = 0; j < series.length; ++j) {
    const stackName = series[j].stack;
    if (!stackName) {
      continue;
    }
    if (!stackInfo[stackName]) {
      stackInfo[stackName] = {
        stackStart: [],
        stackEnd: []
      };
    }
    const info = stackInfo[stackName];
    const data = series[j].data[i];
    if (data && data !== '-') {
      if (info.stackStart[i] == null) {
        info.stackStart[i] = j;
      }
      info.stackEnd[i] = j;
    }
  }
}
for (let i = 0; i < series.length; ++i) {
  const data = series[i].data;
  const info = stackInfo[series[i].stack];
  for (let j = 0; j < series[i].data.length; ++j) {
    // const isStart = info.stackStart[j] === i;
    const isEnd = info.stackEnd[j] === i;
    const topBorder = isEnd ? 20 : 0;
    const bottomBorder = 0;
    data[j] = {
      value: data[j],
      itemStyle: {
        borderRadius: [topBorder, topBorder, bottomBorder, bottomBorder]
      }
    };
  }
}
option = {
  xAxis: {
    type: 'category',
    data: options.column1
  },
  yAxis: {
    type: 'value'
  },
  series: series
};
Snipaste_2024-10-07_15-25-35.png
回复

使用道具 举报

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

  • 官方微信

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

    扫码关注
  • 新浪微博

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

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

会员等你来哦

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