使用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
}
关于javascript - Echarts堆积条形图如何处理数据,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52184128/