echart 柱状图加短线
let data=[51, 58, 63, 57, 63, 40, 124,108, 63, 63]
let max=Math.max.apply(null,data)*0.03
let linedata=Array(data.length).fill(max)
this.options = {
grid: {
left: 20,
right: 20,
bottom: "10",
top: "18%",
containLabel: true,
},
tooltip: {},
xAxis: [
/*横坐标*/
{
axisTick: {show: false},
type: 'category',
axisLine: {
show: true,
lineStyle: {
color: "white",
},
},
data: ["内超", "锡超", "乌超", "呼和浩特", "包头", "乌兰察布", "锡林郭勒",'乌海','阿拉善','薛家湾'],
axisPointer: {
type: 'shadow'
}
},
/*隐藏一个不显示的横坐标,用作横线的位置*/
{
type: 'category',
axisLine: {
show: false
},
axisTick: {
show: false
},
axisLabel: {
show: false
},
splitArea: {
show: false
},
splitLine: {
show: false
},
data: ["内超", "锡超", "乌超", "呼和浩特", "包头", "乌兰察布", "锡林郭勒",'乌海','阿拉善','薛家湾'],
},
],
yAxis: [
{
axisTick: {
show: false
},
splitLine: {
lineStyle:{
type:'dashed'//虚线
},
show: true //隐藏
},
type: "value",
name: '次',
// interval: 25,
splitNumber: 4, // 坐标轴的分割段数
axisLine: {
show: false,
lineStyle: {
color: "white",
},
},
}
],
series: [
{
type: 'bar',
barWidth:'30%',
itemStyle: {
normal: {
label: {
show: true, //开启显示
position: 'top',
// formatter: '{c}%',
textStyle: { //数值样式
color: "#FFFFFF",
// fontSize: 16,
// fontWeight: 600
}
},
color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
offset: 0,
color: '#1595fb'
}, {
offset: 1,
color: '#21346c'
}]),
// barBorderRadius:15
}
},
data: data,
},
{
/* 这个bar是撑起横线的高度,并设置透明*/
// name: "盈亏平衡点",
stack: 'breakevenEleGroup', /* 盈亏点数据组,需要设置才能将两个bar堆积在一起*/
type: 'bar',
xAxisIndex: 1,
itemStyle: {
normal: {
color: 'rgba(0,0,0,0)'/* 设置bar为隐藏,撑起下面横线*/
}
},
data: data,
},
{
/* 这个bar是横线的显示*/
// name: "盈亏平衡点",
stack: 'breakevenEleGroup', /* 盈亏点数据组,需要设置才能将两个bar堆积在一起*/
type: 'bar',
barWidth:'30%',
xAxisIndex: 1,
barGap: '0',
itemStyle: {
normal: {
color: '#159aff'
}
},
data:linedata
}
]
}