大体思路是这样的 两个柱状图组合成一个柱状图 然后柱状图的上面和下面使用象形柱状图
symbol: 'diamond', 菱形 将菱形的高设的比宽的值小一些
使用symbolPosition 分别拼接在柱状图的上部和下部
然后使用barBorderRadius 圆角将柱状图突出的部分隐藏在这个菱形下面
使用 z 来控制显示层级
之前疏忽了 用的symbol: 'rect', 然后用的旋转将方形旋转过来 但是这样的调整不了方块的角度 各种调整也只能是正方形 不够美观
后来想起还有 diamond 这么个东西
image.png
代码实例：
// 渲染平台资源数量统计图表
renderStatisticsPlatform(){
this.statisticsplatform = this.$echarts.init(document.getElementById("statisticsplatform"));
const statisticsplatformData = this.statisticsplatformData;
this.statisticsplatform.setOption({
tooltip: {
trigger: "item"
},
grid: {
top: "15%",
left: "8%",
right: "12%",
bottom: "15%",
containLabel: true
},
xAxis: {
data: statisticsplatformData[0],
splitLine: {
show: false
},
axisTick: {
show: false
},
axisLine: {
symbol: ['none'],
symbolSize: [10, 17],
lineStyle: {
color: '#FFF',
width: 0 // 改变坐标线的颜色
},
},
offset:8,
axisLabel: {
//调整x轴的lable
textStyle: {
fontSize: 11 ,// 让字体变大
fontFamily:'MicrosoftYaHei-Bold, MicrosoftYaHei',
fontWeight:'bold',
color:'#FFFFFF'
},
}
},
yAxis: {
// type: "value",
// name:'时长（小时）',
splitLine: { //刻度线
show: false,
},
splitArea:{ //柱状图后面的背景色
show:false,
// areaStyle: {
// color: ["rgba(221,247,250,0.7)","rgba(245,249,232,0.7)"]
// }
},
axisTick: {
show: false
},
axisLabel: {
//调整y轴的lable
textStyle: {
fontSize: 12 // 让字体变大
},
show: false
},
axisLine: {
symbol: ['none'],
symbolSize: [15, 17],
lineStyle: {
color: 'rgba(0 0 0 0)',
width: 0 // 改变坐标线的颜色
}
}
},
axisPointer: {
show: false,
link: {xAxisIndex: 'all'},
type: 'shadow' ,
label: {
backgroundColor: '#777'
}
},
series: [
{
name: "资源数量统计",
type: "bar",
showSymbol: false,
hoverAnimation: false,
data: statisticsplatformData[1],
barWidth: 10, //柱图宽度
// barCategoryGap:'60%',
itemStyle: { //左面
normal: {
color:function(params) {
let colorList = ["#7EEEFB"];
return colorList[0];
},
barBorderRadius:[4,0,0,100],
}
}
},{
name:'资源数量统计',
tooltip:{
show:true
},
type: 'bar',
barWidth:10,
// barCategoryGap:'60%',
itemStyle:{ //右面
normal:{
color:function(params) {
let colorList = ["#48D9F5"];
return colorList[0];
},
borderWidth:0.1,
barBorderRadius:[0,5,100,0]
}
},
data: statisticsplatformData[1],
barGap:0
},{
name:'b',
tooltip:{
show:false
},
type: 'pictorialBar',
itemStyle: { //顶部
normal: {
color:function(params) {
let colorList = ["#48D9F5"];
return colorList[0];
},
borderColor:'#000',
borderWidth:0.1,
label: {
show: true, //开启显示
position: 'top', //在上方显示
textStyle: { //数值样式
color :'#FFFFFF',
fontSize: 14,
fontFamily:'微软雅黑',
},
offset:[0,-2]
}
}
},
symbol: 'diamond',
symbolSize: ['20.5','13'],
symbolOffset:[0,'-38%'],
symbolPosition: 'end',
data: statisticsplatformData[1],
z:3
},{
name:'d',
tooltip:{
show:false
},
type: 'pictorialBar',
itemStyle: { //底部
normal: {
color:function(params) {
let colorList = ["#48D9F5"];
return colorList[0];
},
borderColor:'#000',
borderWidth:0.1,
label: {
show: false, //开启显示
position: 'top', //在上方显示
textStyle: { //数值样式
color :'#FFFFFF',
fontSize: 14,
fontFamily:'微软雅黑',
},
offset:[0,-2]
}
}
},
symbol: 'diamond',
symbolSize: ['20.5','17'],
symbolOffset:[0,'2.5'],
symbolPosition: 'start',
data: statisticsplatformData[1],
z:0
}
]
})
},