关于echarts图中的柱状图添加横线问题
echarts图柱状图添加横线
先看一下效果图：
话不多说先上代码，看注释应该能看懂点什么。
// An highlighted block
let that = this;
let e5Data = that.historyAllEchartData[that.tabPaneName].e5Data;
let lastVals = e5Data.lastVal;
/*计算横线的显示高度，echarts图的y轴是自适应的，所以这里求出最大值，并按照比例计算出线的高度，这里可以自己调整*/
let lineHeightData = eval("Math.max(" +lastVals.toString()+")") * 0.003;/*计算盈亏点线的高度*/
let lineHeightDatas = [];
lastVals.forEach(()=>{
lineHeightDatas.push(lineHeightData);
});
let option = {
grid: {
borderWidth: 1
},
legend: {
/*这里是四个指标，（去年同期和本月是柱状，增减百分比是折线，平衡点是在柱状上的横线）*/
data: ['去年同期', '本月', '增减百分比', '盈亏平衡点'],
textStyle: {
color: '#A7A7A7',
},
},
xAxis: [
/*横坐标*/
{
axisTick: {show: false},
type: 'category',
axisLine: {
lineStyle: {
type: 'solid',
color: '#f8f8f8',//左边线的颜色
width: '1.5'//坐标线的宽度
},
},
axisLabel: {
color: "#A7A7A7",
},
data: e5Data.stationName,
axisPointer: {
type: 'shadow'
}
},
/*隐藏一个不显示的横坐标，用作横线的位置*/
{
type: 'category',
axisLine: {
show: false
},
axisTick: {
show: false
},
axisLabel: {
show: false
},
splitArea: {
show: false
},
splitLine: {
show: false
},
data: []
},
],
yAxis: [
{
type: 'value',
interval: 500,
axisLine: {show: false},
axisTick: {show: false},
splitLine: {
show: true,
lineStyle: {
color: ['#F8F8F8'],
width: 1,
type: 'solid'
}
},
axisLabel: {
color: ['#A7A7A7'],
formatter: '{value} 度'
}
},
{
type: 'value',
min:-100,
max:100,
interval: 20,
axisLine: {show: false},
axisTick: {show: false},
splitLine: {
show: true,
lineStyle: {
color: ['#F8F8F8'],
width: 1,
type: 'solid'
}
},
axisLabel: {
color: ['#A7A7A7'],
formatter: '{value} %'
}
}
],
series: [
{
name: '去年同期',/*基础数据*/
type: 'bar',
itemStyle: {
normal: {
color: '#7ca9fc'
}
},
data: lastVals,
},
{
name: '本月',/*基础数据*/
type: 'bar',
barGap: "0",
itemStyle: {
normal: {
color: '#2846fe'
}
},
data: e5Data.currentVal,
},
{
/*这个bar是撑起横线的高度，并设置透明*/
name: "盈亏平衡点",
stack: 'breakevenEleGroup',/*盈亏点数据组，需要设置才能将两个bar堆积在一起*/
type: 'bar',
xAxisIndex: 1,
itemStyle: {
normal: {
color: 'rgba(0,0,0,0)',/*设置bar为隐藏，撑起下面横线*/
}
},
data: e5Data.breakevenEle,
},
{
/*这个bar是横线的显示*/
name: "盈亏平衡点",
stack: 'breakevenEleGroup',/*盈亏点数据组，需要设置才能将两个bar堆积在一起*/
type: 'bar',
xAxisIndex: 1,
barGap: "0",
itemStyle: {
normal: {
color: 'rgba(0,0,0,1)'
}
},
data: lineHeightDatas,
},
{
name: '增减百分比',
type: 'line',
yAxisIndex: 1,
itemStyle: {
normal: {
color: '#a8a2d7'
}
},
data: e5Data.rateVal,
},
]
};
其中的主要思想就是将两个bar堆积起来，上面的bar值设置成小值，显示为横线，下面的bar设置成大值，并设置透明，制造成一种横线悬浮的假象。
转载请声明出处：
https://blog.csdn.net/qq_33281948/article/details/90026429
盗版必究