代码
echarts柱状图顶角改成圆,并且从圆心对X标轴作垂线。
var myColor = ['#eb2100', '#eb3600', '#d0570e', '#d0a00e', '#34da62', '#00e9db', '#00c0e9', '#0096f3', '#33CCFF', '#33FFCC'];
option = {
backgroundColor: '#0e2147',
grid: {
left: '11%',
top: '12%',
right: '0%',
bottom: '8%',
containLabel: true
},
xAxis: [{
show: false,
}],
yAxis: [{
axisTick: 'none',
axisLine: 'none',
offset: '27',
axisLabel: {
show:false,
textStyle: {
color: '#ffffff',
fontSize: '16',
}
},
data: ['南昌转运中心', '广州转运中心', '杭州转运中心', '宁夏转运中心', '兰州转运中心', '南宁转运中心', '长沙转运中心', '武汉转运中心', '合肥转运中心', '贵州转运中心']
}, {
axisTick: 'none',
axisLine: 'none',
axisLabel: {
show:false,
textStyle: {
color: '#ffffff',
fontSize: '16',
}
},
data: ['10', '9', '8', '7', '6', '5', '4', '3', '2', '1']
}, {
// name: '分拨延误TOP 10',
nameGap: '50',
nameTextStyle: {
color: '#ffffff',
fontSize: '16',
},
axisLine: {
lineStyle: {
color: 'rgba(0,0,0,0)'
}
},
data: [],
}],
series: [{
name: '条',
type: 'bar',
yAxisIndex: 0,
data: [4, 13, 25, 29, 38, 44, 50, 52, 60, 72],
// label: {
// normal: {
// show: true,
// position: 'right',
// textStyle: {
// color: '#ffffff',
// fontSize: '16',
// }
// }
// },
barWidth: 12,
itemStyle: {
normal: {
color: function(params) {
var num = myColor.length;
return myColor[params.dataIndex % num]
},
}
},
z: 2
}, {
name: '白框',
type: 'bar',
yAxisIndex: 1,
barGap: '-100%',
data: [99, 99.5, 99.5, 99.5, 99.5, 99.5, 99.5, 99.5, 99.5, 99.5],
barWidth: 20,
itemStyle: {
normal: {
color: '#0e2147',
barBorderRadius: 5,
}
},
z: 1
},
{
name: '外圆',
type: 'scatter',
hoverAnimation: false,
data: [4, 13, 25, 29, 38, 44, 50, 52, 60, 72],
yAxisIndex: 2,
symbolSize: 35,
itemStyle: {
normal: {
color: function(params) {
var num = myColor.length;
return myColor[params.dataIndex % num]
},
opacity: 1,
}
},
z: 2
},{
name: '平行于y轴的趋势线',
type: 'line',
markLine: {
itemStyle: { //盒须图样式。
},
name: 'cc',
yAxisIndex: 0,
symbol:'none',//去掉箭头
data: [[
// { coord: ['x轴坐标', 0] },
// { coord: ['x轴坐标',y轴值] }
{ coord: ['72', 0] },
{ coord: ['72',9] }
],[ { coord: ['60', 0] },
{ coord: ['60',8] }
],[ { coord: ['52', 0] },
{ coord: ['52',7] }
],[ { coord: ['50', 0] },
{ coord: ['50',6] }
],[ { coord: ['44', 0] },
{ coord: ['44',5] }
],[ { coord: ['38', 0] },
{ coord: ['38',4] }
],[ { coord: ['29', 0] },
{ coord: ['29',3] }
],[ { coord: ['25', 0] },
{ coord: ['25',2] }
],[ { coord: ['13', 0] },
{ coord: ['13',1] }
]]
}
}
]
};
直接在Echarts官方沙盒里改的,如果要用改一下就行。
怎么做垂线是参考这位大佬的:https://blog.csdn.net/weixin_42720512/article/details/103970206