永洪社区

标题: 自定义绘图 [打印本页]

作者: yhdata_PA2MMJ9W 时间: 2024-10-7 10:25
标题: 自定义绘图
多个度量的堆积柱状图，怎么替换里面的字段值，我有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
};

作者: Fiona 时间: 2024-10-7 15:25
绑定字段到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
};

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