Using echarts
how can I have a horizontal stack bar chart taking in consideration the following scenario, I have groups and group has employees of different categories: freelance, permanent, student...
I want to show per group: divided stacks of employee categories but is not clear in this case how do I handle the code
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
})
and here is my codepen
I'm not sure but is this you want? here is jsFiddle
get data of each series by :
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)
}
})
and if you want stack on each category, the series.stack
should remain the same, you can use any string like below:
{
name: label,
type: 'bar',
stack: 'anyString',
label: {
normal: {
show: true,
position: 'insideRight'
}
},
data: data
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.