echart 柱子图加横线

option = {
tooltip:
trigger: ‘axis’,
backgroundColor: ‘#fff’,
borderColor: ‘rgba(249, 155, 115, 1)’,
borderWidth: 0.2,
},
grid: {
top: 10,
left: ‘0.2%’,
right: ‘0.4%’,
bottom: ‘9%’,
containLabel: true,
},
xAxis: [
{
type: ‘category’,
data: [‘网分’，‘棕测仪’，‘示波器’],
axisTick: {
show: false,
// alignWithLabel: true,
},
splitLine: {
show: false,
},
},
/隐藏一个不显示的横坐标，用作横线的位置/
{
type: ‘category’,
axisLine: {
show: false,
},
axisTick: {
show: false,
},
axisLabel: {
show: false,
},
splitArea: {
show: false,
},
splitLine: {
show: false,
},
splitLine: {
show: false,
},
data: [],
},
],
yAxis: [
{
type: ‘value’,
axisTick: {
show: false,
},
axisLine: {
show: false,
},
// axisLabel: {
// show: false,
// },
// splitLine: {
// show: false,
// },
},
],
//滚动条
dataZoom: [
{
type: ‘slider’,
xAxisIndex: [0],
start: 0,
end: 100,
handleSize: 2,
height: ‘5%’,
bottom: 10,
filterMode: ‘filter’,
},
// {
// id: ‘dataZoomY’,
// type: ‘slider’,
// xAxisIndex: 0,
// start: 0,
// end: 100,
// handleSize: 2,
// height: ‘5%’,
// bottom: 10,
// filterMode: ‘empty’,
// },
],
series: [],
}
//超负荷数据
option.series = [
/这个bar是撑起横线的高度，并设置透明/
{
data: [100,200,80], //超过值最大值 seriesthresholdValueData
type: ‘bar’,
barWidth: 20,
stack: ‘breakevenEleGroup’,
//xAxisIndex: 0,
itemStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: ‘#ff6a00’ },
{ offset: 0.5, color: ‘#ff6a00’ },
{ offset: 1, color: ‘#ff6a00’ },
]),
},
},
/这个bar是横线的显示/
{
type: ‘bar’,
stack: ‘breakevenEleGroup’,
barGap: ‘0’,
//xAxisIndex: 0,
itemStyle: {
normal: {
color: ‘rgba(0,0,0,1)’,
},
},
data: opacityData, //最大值在上面数据的基础上乘以一个数值得到最大值 eval(‘Math.max(’ + echartObj.seriesthresholdValueData.toString() + ‘)’) * 0.007
},
{
data: [], //数据，超负荷的数据
type: ‘bar’,
barWidth: 20,
//xAxisIndex: 0,
stack: ‘breakevenEleGroup’,
itemStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: ‘#ff6a00’ },
{ offset: 0.5, color: ‘#ff6a00’ },
{ offset: 1, color: ‘#ff6a00’ },
]),
},
},
]

//未达标数据
option.series = [
{
data: [], //数值
type: ‘bar’,
barWidth: 20,
stack: ‘breakevenEleGroup’,
itemStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: ‘#ff6a00’ },
{ offset: 0.5, color: ‘#ff6a00’ },
{ offset: 1, color: ‘#ff6a00’ },
]),
},
},
/这个bar是撑起横线的高度，并设置透明/
{
data: seriesthresholdValueData,
type: ‘bar’,
barWidth: 30,
stack: ‘breakevenEleGroup’,
//xAxisIndex: 1,
itemStyle: {
normal: {
color: ‘rgba(0,0,0,0)’ /设置bar为隐藏，撑起下面横线/,
},
},
},
/这个bar是横线的显示/
{
type: ‘bar’,
stack: ‘breakevenEleGroup’,
barGap: ‘0’,
//xAxisIndex: 1,
itemStyle: {
normal: {
color: ‘rgba(0,0,0,1)’,
},
},
data: opacityData, //最大值
},
]

实现原理就是，用3个柱子拼凑成一个，超负荷的时候，横线在柱子的上，意思就是说数据超过了标准线，
未达标的时候，是横线在柱子的上方，意思是说数据没有达到标准线

得到每一组数据中的最大值设置横线
1.echartObj.seriesthresholdValueData是最大值数据，次柱子设置透明的用来撑起最大值的数据
2.在上面数据的基础上乘以一个数值得到最大值 eval(‘Math.max(’ + echartObj.seriesthresholdValueData.toString() + ‘)’) * 0.007；这个柱子是一条横线 opacityData
3. 最后一个柱子就是展示的数据

echart 柱状图加横线相关推荐

eacharts和eacharts-gl、3d饼图、3d柱状图加折线图、下载gl报错解决
eacharts-gl下载时版本一定要和eacharts版本对应.否则不出效果!!目前已知可以生效有: 第一种1: npm install echarts@5.1.2 --save npm insta ...
合并的表格怎么加横线_excel表格如何在数据之间加横线-在excel里怎么添加单元格横线...
在EXCEL中,如何批量给数字中间加横线? 在编辑EXCEL有时部分文字我们需要的要将其划掉,也就是字上画一条,下面给大家介绍一下如何操作方法/步骤打开excel,找到需要编辑的内容点击&quo ...
文字两侧加横线的解决方案
文字两侧加横线的解决方案参考文章: (1)文字两侧加横线的解决方案 (2)https://www.cnblogs.com/-simon/p/5883424.html (3)https://www.c ...
android字体加横线
底部加横线是 textview.getPaint().setFlags(Paint. UNDERLINE_TEXT_FLAG ); textview.getPaint().setFlags(Paint ...
Android中TextView加横线的属性
textView.getPaint().setAntiAlias(true); // 抗锯齿textview.getPaint().setFlags(Paint.STRIKE_THRU_TEXT_FL ...
word/ppt 中怎么在数字字母上面加横线、波浪线、箭头等符号
word/ppt 中怎么在数字字母上面加横线.波浪线.箭头等符号解释: 该动作在word中称作插入标注符号在ppt中称作插入导数符号该篇博客只讲解在 ppt 中插入导数符号的方法,注: 该方法在 ...
合并的表格怎么加横线_如何在excel中文字后面加横线
如何在excel中文字后面加横线以下文字资料是由(历史新知网www.lishixinzhi.com)小编为大家搜集整理后发布的内容,让我们赶快一起来看一下吧! 如何在excel中文字后面加横线好办啊 ...
读取excel文件并使用matplotlib绘图（含柱状图、柱状图加数值的显示和直方图）
1. 读取excel数据,并显示折线图代码如下 #!/usr/bin/env python ''' 测试环境:ubuntu18.04下测试 '''import numpy as np import ...
Android TextView文字底部或者中间加横线
tv = (TextView) findViewById(R.id. text_view ); 中间加横线 tv.getPaint().setFlags( Paint.STRIKE_THRU_TE ...

echart 柱状图加横线

echart 柱子图加横线

echart 柱状图加横线相关推荐

最新文章

热门文章