[英]Echarts stacked barchart how to deal with data
使用echarts
,考虑以下情况,我如何才能得到水平堆叠条形图,我有一些小组,而小组有不同类别的雇员:自由职业者,永久雇员,学生...
我想按组显示:划分的员工类别堆栈,但在这种情况下尚不清楚,我如何处理代码
import echarts from 'echarts';
let groupChart = echarts.init(document.getElementById('chartGroups'));
axios.get('/chart')
.then(function (response) {
// handle success
let stack = {}
let re = response.data
let categories = Object.keys(re.stacks).map(function(key, index) {
return key
})
let arr = re.labels.map(item => ({
name: item,
type: 'bar',
stack: item,
label: {
normal: {
show: true,
position: 'insideRight'
}
},
data: []
}))
console.log(arr)
let app = {}
app.title = 'Employees';
let option = {
tooltip : {
trigger: 'axis',
axisPointer : {
type : 'shadow'
}
},
legend: {
data: re.labels
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: {
type: 'value'
},
yAxis: {
type: 'category',
data: categories
},
series: arr
}
groupChart.setOption(option, true);
})
.catch(function (error) {
// handle error
console.log(error);
})
.then(function () {
// always executed
})
这是我的codepen
我不确定,但是你想要这个吗? 这是jsFiddle
通过以下方式获取每个系列的数据:
let data = [];
categories.forEach((category) => {
let index = re.stacks[category].findIndex(item => {
return item[label];
})
if (index !== -1) {
data.push(re.stacks[category][index][label]);
} else {
data.push(null)
}
})
如果要在每个类别上堆叠, series.stack
应该保持不变,则可以使用以下任何字符串:
{
name: label,
type: 'bar',
stack: 'anyString',
label: {
normal: {
show: true,
position: 'insideRight'
}
},
data: data
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.