关于echarts图中的柱状图添加横线问题

echarts图柱状图添加横线

先看一下效果图：

话不多说先上代码，看注释应该能看懂点什么。

// An highlighted blocklet 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
盗版必究

关于echarts图中的柱状图添加横线问题相关推荐

iOS 给NSString文字中间或底部添加横线
给NSString类型的文字添加横线一种是添加到文字底部,一种是添加到文字中间 1.文字底部添加横线 NSMutableAttributedString *forgetTitle = [[NSMuta ...
Alitum designer查看的PCB 3D 渲染图上边没有元器件，怎么办？（如何为3D渲染图中的元器件添加3D模型？）
现象: 具体原因:因为你的元器件库中,没有添加相应元器件的模型如何做? 1.为AD 22安装元器件库: (1)拿到原始库文件: _Library_Base_20170106.rar (2)解压: ( ...
python 绘图实现图中为字体添加下标、上标
python 在绘图添加图例时,一些数学符号或者公式常常包含上标和下标,这里简单描述了如何实现上述要求. 在数学公式中,上标用^号,下标用_符号. 如果上下标只有一个符号,则可以不用花括号括起来. 如 ...
将不同数据来源的ggplot图绘制到同一张图中，并添加统一的图例
在R语言中使用ggplot绘制多幅图时,如果每幅图的数据来源或者风格不同时很难用分面绘制.这时可以使用ggpubr包的ggarrange函数将多幅图汇总到一张画布上. 还可以通过common.lege ...
idea中方法之间添加横线
效果如下: 总结实践很重要,看了别人的一定要动手实践下,才能知道其中的奥秘
微信小程序中使用echarts图
嗨喽大家好,我是老黑.最近这段时间完成了一个功能,那就是在微信小程序中引入了echarts图,也算是对这段时间的工作的一个总结吧.这个功能自己花费了很长的时间才整出来.后来自己反省了以下,总结了以 ...
Echarts图实现折线图根据自定义标准线,超过标准值是一种颜色低于标准值是一种颜色
通过echarts图中的visualMap组件可以将数据分成若干个区间,每个区间都可以设置不同的颜色,然后结合series中的markLine设置标准线从而实现标准线上下折线呈现出两种颜色的效果 // ...
python使用matplotlib可视化线图（line plot）、在可视化图像中的指定位置添加横线(add horizontal line in matplotlib plot)
python使用matplotlib可视化线图(line plot).在可视化图像中的指定位置添加横线(add horizontal line in matplotlib plot) 目录
seaborn使用violinplot函数可视化小提琴图、并在violinplot函数中设置inner参数来添加横线（inner=“stick“）显示数据的稠密程度
seaborn使用violinplot函数可视化小提琴图.并在violinplot函数中设置inner参数来添加横线(inner="stick")显示数据的稠密程度(Seaborn ...

关于echarts图中的柱状图添加横线问题

echarts图柱状图添加横线

关于echarts图中的柱状图添加横线问题相关推荐

最新文章

热门文章