ercharts 柱状图

最新推荐文章于 2022-10-27 20:38:44 发布

手持两把锟金拷

最新推荐文章于 2022-10-27 20:38:44 发布

阅读量997

点赞数 1

分类专栏：前端

本文链接：https://blog.csdn.net/hlx156/article/details/82691241

版权

前端专栏收录该内容

7 篇文章 0 订阅

订阅专栏

1.多颜色柱状图

多个不同颜色的seriesData，1,2,3排列，后面的会覆盖前面的，主要属性是series中的barGap: '-100%',barCategoryGap: '60%'。

多颜色单柱和多颜色多柱的区别，就是barGap和barCategoryGap，当没有这两个属性时，就是多柱子并列

xAxis中的interval:0, rotate:40,可以让x轴坐标变斜，因为有时候x轴变量长度太长，会导致无法完全显示

function getC6option(axisData, seriesData1,seriesData2,seriesData3, yMax, unit) {
var dataShadow = [];
var axisData = axisData;
var yMax = yMax;
for (var i = 0; i < axisData.length; i++) {
dataShadow.push(yMax);
}

var option = {
title: {
show: false,
text: '',
subtext: ''
},
tooltip: {
formatter: '{b}<br/>{c}' + unit
},
legend: {
                    data:['完成量','目标量','超额量'],
                    left:'center',
               //bottom:'10%',
               itemWidth:10,//图例的宽度
               itemHeight:10,//图例的高度
               textStyle:{//图例文字的样式
               color:'#ccc',
               fontSize:16
               },
               },
xAxis: {
data: axisData,
axisLabel: {
   interval:0,
                            rotate:40,
textStyle: {
color: '#b8c5df',
fontSize:10
},

},
axisTick: {
show: false
},
axisLine: {
show: false
},
max:5,
z: 10
},
yAxis: {
axisLine: {
show: false
},
axisTick: {
show: false
},
axisLabel: {
textStyle: {
color: '#b8c5df'
}
},
splitLine: {
show: false,
}
},
dataZoom: [{
type: 'inside'
}],
grid: {
top: 20,
bottom: 80,
left: '25%',
},
series: [{ // For shadow
   name:'目标量',
type: 'bar',
itemStyle: {
normal: {
color: '#ff9422',
barBorderRadius: 12
}
},
barGap: '-100%',//重叠
barCategoryGap: '60%',
data: seriesData2,
},{ // For shadow
   name:'完成量',
type: 'bar',
itemStyle: {
normal: {
color: ‘ '#00FF7F',
barBorderRadius: 12
}
},
barGap: '-100%',
barCategoryGap: '60%',
data: seriesData1,
}, {
   name:'超额量',
type: 'bar',
itemStyle: {
normal: {
color: '#408be8',
barBorderRadius: 12
},
emphasis: {

}
},
data: seriesData3
},]
};

return option;
}
var c6 = echarts.init(document.querySelector('#C6'));
c6.setOption(getC6option(['绿地充电桩','车电网办公室','行与杰商务中心','广信创意园','广东软件园'],
[269000, 185320, 160000,80000, 60000],
[100000, 50000, 120000,100000, 95000],
[169000, 135000, 40000,0, 0,0],
300000,''));

2.单颜色单柱多数据柱状图

如图2，一条柱子能显示3种数据，其实就是把柱子重叠，并隐藏不需要显示的柱子（颜色透明），然后重写tooltip格式

}
},
data: seriesData
},
//隐藏的bar
{
name: '站',
type: 'bar',
itemStyle: {
normal: {
color: 'rgba(0, 0, 0, 0)',
barBorderRadius: 12
},
emphasis: {

}
},
barWidth: 0,
data: [20,21,22,23,100,200,120,40,130,160,80,50]
},
//隐藏的bar
{
name: '桩',
type: 'bar',
itemStyle: {
normal: {
color: 'rgba(0, 0, 0, 0)',
barBorderRadius: 12
},
emphasis: {

}
},
barWidth: 0,
data: [200,210,220,230,1000,2000,1200,400,1300,1600,800,500]
},]
};

return option;
}
var c6 = echarts.init(document.querySelector('#C6'));
c6.setOption(getC666option([1,2,3,4,5,6,7,8,9,10,11,12], [1000,400,1500,700,1000,200,800,400,1300,1600,800,500],
2000,
'#6fc7ff', 'kw'));

手持两把锟金拷

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
ercharts 柱状图

1.多颜色柱状图多个不同颜色的seriesData，1,2,3排列，后面的会覆盖前面的，主要属性是series中的barGap: '-100%',barCategoryGap: '60%'。多颜色单柱和多颜色多柱的区别，就是barGap和barCategoryGap，当没有这两个属性时，就是多柱子并列 xAxis中的interval:0, ...
复制链接

扫一扫