效果图:
代码:
let xData = [
'开关电源',
'铅酸电池',
'UPS设备',
'普通空调',
'机房环境',
'智能电表'
];
let yData = ['-111', '-100', '-95', '-80', '-60', '-45'];
option = {
backgroundColor: '#080938',
grid: {
top: '10%',
left: '-5%',
bottom: '5%',
right: '5%',
containLabel: true
},
animation: false,
xAxis: [
{
type: 'category',
data: yData,
axisTick: {
show:false,
alignWithLabel: true
},
axisLine: {
show: false
},
axisLabel: {
textStyle: {
color: '#ddd'
},
margin: 30
},
interval: 1
},
{
type: 'category',
data: xData,
axisTick: {
show:false,
alignWithLabel: true
},
axisLine: {
show: false
},
axisLabel: {
textStyle: {
color: '#ddd'
},
margin: -20,
},
interval: 1
}
],
yAxis: [
{
show: false,
type: 'value'
}
],
series: [
{
name:'三角',
type: 'bar',
stack: 'ab',//层叠
markPoint: {
symbol:'path://M819.2 0l819.2 1024H0z', //图片
symbolSize:40,
data:[
{
xAxis:0,
yAxis:Number(5)
},
{
xAxis:1,
yAxis:Number(5)
},
{
xAxis:2,
yAxis:Number(5)
},
{
xAxis:3,
yAxis:Number(5)
},
{
xAxis:4,
yAxis:Number(5)
},
{
xAxis:5,
yAxis:Number(5)
}
]
},
z:12,
itemStyle: {
normal: {
color: new echarts.graphic.LinearGradient(1, 0, 0, 0, [
{
offset: 0,
color: '#0F7EEF'
},
{
offset: 0.4,
color: '#0A93EF'
},
{
offset: 1,
color: '#0F7EEF'
}
])
}
},
data: [1,1,1,1,1,1]
},
{
name:'柱子',
type: 'bar',//层叠
barWidth: '40',
stack:'ab',
barGap: '10%', // Make series be overlap
barCateGoryGap: '10%',
label:{
normal:{
show:false,
position:'top',
fontSize:15,
fontWeight:'bold',
color:'#5BFCF4'
}
},
itemStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
{
offset: 0,
color: '#183A6B'
},
{
offset: 0.2,
color: '#080938'
},
{
offset: 0.8,
color: '#080938'
},
{
offset: 0.9,
color: '#183A6B'
}
])
}
},
data: yData
},
{
name: '底部圆盘',
type: 'pictorialBar',
symbolSize:[40,5],
symbolPosition:'end',
barWidth: 40,
z: 12,
color:'rgba(17,38,86,0.8)',
data: yData
}
]
};