echarts柱状图每根柱子添加警戒值/阈值，分段警戒线

已于 2023-07-28 14:57:59 修改
阅读量1.3k 收藏 3
点赞数
分类专栏： echarts 前端 文章标签： echarts 前端 javascript
于 2023-07-28 14:56:10 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Hyanl/article/details/131977409
版权

需求：柱状图每根柱子都添加单独的警戒值（黄色线部分），效果图如下：
在这里插入图片描述
实现方式我这有两种方案，如下介绍。
方案1：使用echarts的标线markLine实现（ps：此种方案有弊端：需要一一设置每个柱子的标线起始点，不好控制，不太建议使用）
代码如下：

<body>
    <!-- 为 ECharts 准备一个定义了宽高的 DOM -->
    <div id="main" style="width: 600px;height:400px;"></div>
    <script type="text/javascript">
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));
         // 警戒线
        let markLines = []
        let markLineValue = [10,20,30,40,30] //警戒线值
        let markLineItem = [
                                //第一条警戒线
                                {
                                    yAxis: markLineValue[0],
                                    x: 60, //设置警戒线的起点偏移量
                                    lineStyle: { type: "solid", color: "yellow", width: 3 },
                                    label: { show: true, color: "yellow", position: "insideMiddleBottom", formatter: markLineValue[0] + 'db' },
                                },
                                {
                                    position: "middle",
                                    yAxis: markLineValue[0],
                                    x: 110, //设置警戒线的终点偏移量
                                    lineStyle: { type: "solid", color: "yellow", width: 3 },
                                    label: { show: true, position: "insideMiddleBottom" },
                                }
                            ]
        markLines.push(markLineItem);
        //设置每一条标线的起始偏移量，根据实际情况自行改之
        for (let i = 1; i <markLineValue.length; i++) {
            let item = JSON.parse(JSON.stringify(markLines[i-1]))
            let xStart = item[0].x
            let xEnd = item[1].x
            item[0].x = xStart + 115
            item[0].yAxis = markLineValue[i]
            item[0].label.formatter = markLineValue[i] +'db'
            item[1].x = xEnd + 115
            item[1].yAxis = markLineValue[i]
            markLines.push(item)
        }
        var option = {
            title: {
                text: 'ECharts 入门示例'
            },
            tooltip: {
                show: true,
                trigger: 'axis'
            },
            legend: {
                data: ['销量']
            },
            xAxis: {
                data: ['衬衫11111111111111111', '羊毛衫', '雪纺衫', '裤子', '高跟鞋'],
                axisLabel: {
                    // 文字省略
                    formatter: function (value) {
                        if (value.length > 3) {
                            return `${value.slice(0, 3)}...`
                        }
                        return value
                    }
                }
            },
            yAxis: {
                splitLine: { show: false }
            },
            grid: {
                containLabel: true,
                top: 30,
                left: 10,
                right: 10,
                bottom: 8
            },
            series: [
                {
                    name: '销量',
                    type: 'bar',
                    data: [5, 20, 36, 10, 10],
                    barWidth: '50px', // 柱图宽度
                    itemStyle: {
                        normal: {
                            label: {
                                formatter: '{c}' + 'db',
                                show: true,
                                position: 'top',
                                textStyle: {
                                    color: 'blue'
                                }
                            }
                        }
                    },
                    //设置柱状图背景
                    showBackground: true,
                    backgroundStyle: {
                        color: 'rgba(180, 180, 180, 0.2)'
                    },
                    markLine: {
                        symbol: "none",               //去掉警戒线最后面的箭头
                        data:markLines
                         }
                    }]
        };
        // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
    </script>
</body>

方案2：使用echarts的自定义图形custom实现（此方案较方案一更实用）
代码如下：

<body>
    <!-- 为 ECharts 准备一个定义了宽高的 DOM -->
    <div id="main" style="width: 600px;height:400px;"></div>
    <script type="text/javascript">
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));
        let markLineValue = [10,20,30,40,30] //警戒线值
        var option = {
            title: {
                text: 'ECharts 入门示例'
            },
            tooltip: {
                show: true,
                trigger: 'axis'
            },
            legend: {
                data: ['销量']
            },
            xAxis: {
                data: ['衬衫11111111111111111', '羊毛衫', '雪纺衫', '裤子', '高跟鞋'],
                axisLabel: {
                    // 文字省略
                    formatter: function (value) {
                        if (value.length > 3) {
                            return `${value.slice(0, 3)}...`
                        }
                        return value
                    }
                }
            },
            yAxis: {
                splitLine: { show: false }
            },
            grid: {
                containLabel: true,
                top: 30,
                left: 10,
                right: 10,
                bottom: 8
            },
            series: [
                {
                    name: '销量',
                    type: 'bar',
                    data: [5, 20, 36, 10, 10],
                    barWidth: '50px', // 柱图宽度
                    itemStyle: {
                        normal: {
                            label: {
                                formatter: '{c}' + 'db',
                                show: true,
                                position: 'top',
                                textStyle: {
                                    color: 'blue'
                                }
                            }
                        }
                    },
                    //设置柱状图背景
                    showBackground: true,
                    backgroundStyle: {
                        color: 'rgba(180, 180, 180, 0.2)'
                    }
                    },
                    {
                    type: 'custom',
                    // 图形渲染逻辑函数
                    renderItem: function renderItem(param, api) {
                    //获取每根柱子中点的x，y坐标
                        var point = api.coord([api.value(0), api.value(1)]);
                        return {
                            type: 'line',
                            transition: ['shape'],
                            shape: {
                                x1: point[0] - 25, //每根柱子的起点x轴坐标，我这的柱子宽度为50px，起点就为point[0]-50/2
                                x2: point[0] + 25, //每根柱子的终点x轴坐标
                                y1: point[1],
                                y2: point[1]
                            },
                            style: api.style({
                                stroke: api.visual('color'),
                                lineWidth: 3,
                            })
                        };
                    },
                    itemStyle: {
                        borderType: 'soild',   //可以控制警示线的样式
                        normal: {
                            label: {
                                formatter: '{c}' + 'db',
                                show: true,
                                position: 'bottom',
                                textStyle: {
                                    color: 'yellow'
                                }
                            },
                            color: "yellow",
                        }
                    },

                    z: 999, //控制图形前后顺序，数值小会被数值大的覆盖
                    data: markLineValue   //警示线的数值
                }
                    ]
        };
        // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
    </script>
</body>
Hyanl
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Echarts 实现线条绘制
虎康的博客
05-29 181
用 Echarts 实现如下效果。
echarts 柱状图渐变色背景
05-14
该案例设置 echarts 柱状图渐变色，同样也可以应用折线图、圆形图等。效果说明：https://blog.csdn.net/qq_36437172/article/details/106115048
echarts折线图按阈值分段设置(颜色，节点图表等)
fjxtgdx的博客
06-20 1226
这里有几个需要注意的点，1.如果不设置seriesIndex的值，会默认覆盖所有series的数据样式。在此之前，我们有进行过对折线节点按值配置(大小、图标、值都可以在对应的回调函数中判断区分)，但线并未设置。我看了下，简单说就是设置类似大小，图案，颜色，亮度等能看到的样式的修改，而能设置的对象里，也包括线。我查看对应的官方配置项，线的颜色只可以简单设置，或者按照固定规则进行渐变色设置，这并不符合需求。有同样需求的朋友可以进行参考，当然，功能还有很多，这里只进行了简单使用。
Echarts自定义警戒线
最新发布
林中明月间丶
03-14 183
【代码】Echarts自定义警戒线。
Echarts柱状图柱子上“画线”
Aabigale的博客
11-18 4922
需求背景 需要在柱状图上实现“画线”，作为其它数据的标识，图例 代码实现思路：“画线部分”由两部分组成，一部分透明柱子加线的部分 let e5Data = { lastVal:[10,20,30,40,50], stationName:['name1','name2','name3','name4','name5'], breakevenEle:[6,30,42,40,10] }; let lastVals = e5Data.
echarts横向柱状图单个柱子设置警戒线，超过警戒线为渐变蓝色，没超过为渐变红色
xiongmouren_jy的博客
12-15 1622
echarts柱状图、设置独立警戒线、按需改变柱子颜色、柱子设置渐变色
Echarts自定义警戒线+图例
weixin_42745647的博客
04-07 911
1.实现多段警戒线和实现多段折线，这种API可以搜到2.实现自定义图例，这API也可以搜到3.实现legend与line脱离，这种API是不存在的。我们实现的效果是一种伪分离：因为我们定义了四条线，实际上只显示了一条，其他的都拿来当了图例。再设置图例不可点击，达到只显示不控制的效果。
Echarts 带预警线的柱状图
weixin_39395388的博客
05-10 1146
Echarts 带预警线的柱状图JS代码 JS代码 dataArry: ['33'], dataCount: [66], option: { grid: { show: 'true', borderWidth: '0', // height: '100%', width: '100%', x: '0' }, tooltip:
echarts——警戒线添加及legend自定义
qq_42802941的博客
10-15 1586
yAxis: 600, // 警戒线的标注值，可以有多个yAxis,多条警示线 或者采用 {type : 'average', name: '平均值'}，type值有 max min average，分为最大，最小，平均值。// icon 属性值'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow', 'none'color: "rgba(253,197,0,0.3)", // 0% 处的颜色。
解决echarts 一条柱状图显示两个值,类似进度条的问题
01-21
allUseDayChartTwo = echarts.init(obj); var category = xdata; var lineData = zdata; var barData = ydata; option = { // backgroundColor:'#F00', tooltip: { trigger: 'axis', backgroundC
echarts自定义树状图，且每个系列柱子数不一
04-11
echarts自定义柱状图的形式，根据数据格式，横轴为多个系列项，每个系列项拥有的柱子数量不等，可自动计算柱子数量等分宽度显示。
echarts漂亮的柱状图按月统计
07-20
<script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.2.1/echarts.min.js"></script> </head> ; height: 600px;"></div> <script src="js/main.js"></script> </body> </html> ``` 这里，我们引入了...
ECharts设置柱状图超出规定值变色以及阈值线
qq_51609497的博客
09-28 3292
ECharts设置柱状图超出规定值变色以及阈值线
echarts图表标线-markLine(阈值线、警戒线)+箭头
buzhidjiaosha的博客
12-29 3521
series里面添加markLine。
Echart警戒线
Principal_Z的博客
08-22 890
series: [ { name: '温度', type: 'line', // 设置数据显示类型,分为line,bar,pie itemStyle: { color: '#17FF38' // 线条的颜色 }, data: [92, 100, 110, 15, 16, 14,89, 10, 110, 65, 60, 74,92, 100, 110, 105, 16,...
echarts柱状图设置多段markline的替代性方案
WINDRUNNER360的博客
11-27 2692
给柱状图的每个柱子设置一个单独的警示线，可以用markline或者custom系列
echarts的markline警标线（一条/多条）的使用
蓝胖子的博客
10-18 4566
echarts的markline警标线（一条/多条）的使用
Echart之柱状图
joe0516的专栏
12-24 1580
// 指定图表的配置项和数据 var option = {   // ----  标题 -----   title: {     show:false,     text: '主标题',     textStyle: {       color: 'red'     },     subtext: '副标题',     subtextStyle: {       color: 'blue'   ...
echarts折线图line动态显示阈值警戒线markLine
BDawn的专栏
07-20 1692
根据实时数据变换markLine的展示效果。比如温度超过设置的警戒线，就会出现警报效果。 当温度超过40度时，警戒线就会出现闪烁的报警效果；当温度没有高于40度时，则警戒线没有闪烁效果；
echarts柱状图两根柱子在同一水平线
05-23
要将两根柱子在同一水平线上，可以通过设置柱子的宽度和间距来实现。在 ECharts 中，可以通过 `barWidth` 和 `barGap` 属性来控制柱子的宽度和间距。 例如，将两根柱子的宽度设置为50%，间距设置为20%： ``` option = { ... xAxis: { type: 'category', data: ['A', 'B'] }, yAxis: { type: 'value' }, series: [ { name: '柱子1', type: 'bar', barWidth: '50%', barGap: '20%', data: [100, 200] }, { name: '柱子2', type: 'bar', barWidth: '50%', barGap: '20%', data: [150, 250] } ] } ``` 这样，两根柱子就会在同一水平线上，并且有一定的间距。你可以根据实际情况调整 `barWidth` 和 `barGap` 的值来达到最佳效果。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值