admin 管理员组文章数量: 1184232
2024年3月29日发(作者：太阳的后裔this love)
}]
}
var labelOption = {
show: true,
position: "insideBottom",
distance: 15,
align: "left",
verticalAlign: "middle",
rotate: 90,
formatter: '{c} {name|{a}}',
fontSize: 16,
rich: {
name: {
}
}
};
xaxis=[];
datas=[];
series=[];
(histogramData).forEach((key) => {
(key)
histogramData[key].forEach((d,i)=>{
if(datas[ment]){
datas[ment].push(Num)
}else{
datas[ment] = [Num]
}
})
})
(datas).forEach((key)=>{
({
name:key,
type:'bar',
barGap: 0,
emphasis: {
focus: 'series'
},
label: labelOption,
data:datas[key]
})
})
(datas).forEach((key) => {
(key)
})
option = {
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
legend: {
data: departmentArr
},
xAxis: [
{
type: 'category',
axisTick: {show: false},
data: xaxis
}
],
yAxis: [
{
type: 'value'
}
],
series:series
};
3、后端将数据为0的去掉，返回 []
3.1、实现效果
3.2、完整代码
var departmentArr = [];
var histogramData ={
"2021/05/05":[{
"orderTime":null,
"departmentCategory":0,
"department":"华南",
"couponNum":2
}, ],
"2021/05/06":[],
"2021/05/07":[{
"orderTime":null,
"departmentCategory":0,
"department":"华南",
"couponNum":12
},
{
"orderTime":null,
"departmentCategory":1,
"department":"华北",
"couponNum":7
}]
}
var labelOption = {
show: true,
position: "insideBottom",
distance: 15,
align: "left",
verticalAlign: "middle",
rotate: 90,
formatter: '{c} {name|{a}}',
fontSize: 16,
rich: {
name: {
}
}
};
xaxis=[];
datas={};
series=[];
noData=[]
(histogramData).forEach((key) => {
histogramData[key].forEach((d,i)=>{
datas[ment]=[]
})
})
(datas).forEach((datakey)=>{
(histogramData).forEach((key) => {
let value = null;
histogramData[key].forEach((d,i)=>{
if(ment == datakey){
value = Num
}
})
datas[datakey].push(value)
})
})
(datas).forEach((key) => {
版权声明：本文标题：Echarts柱状图-多个,解决柱状图显示位置问题(错位显示) 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.roclinux.cn/b/1711646028a603432.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论