Echarts 在条形图中，如何加一条警戒线（markline），y轴双轴，警戒线单位为百分比

最新推荐文章于 2025-06-20 11:19:23 发布

让天空解释着蔚蓝

最新推荐文章于 2025-06-20 11:19:23 发布

阅读量1.3w

点赞数 2

CC 4.0 BY-SA版权

分类专栏： web 文章标签： Echarts web 前端

本文链接：https://blog.csdn.net/chidieguai8187/article/details/84836537

web 专栏收录该内容

2 篇文章

订阅专栏

本文介绍如何使用ECharts实现带有警戒线的双轴条形图，详细讲解了配置项和代码示例，包括title、tooltip、toolbox、legend、xAxis、yAxis、series等属性的设置。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Echarts条形图
警戒线主要用markline属性来实现，参考的官网API地址：http://echarts.baidu.com/api.html#echarts

话不多说直接上图

这里主要实现的是添加警戒线，y轴为双轴，左侧是警戒线的单位，右侧是额度的单位

源码：

	var dom1 = " <div id='myChart1' style='width:500px;height:400px;float: left;margin-top: 40px;' ></div>" ;
        $('.content').append(dom1);
        var myChart = echarts.init(document.getElementById('myChart1'));


        option = {
            title : {
                text: '条形图',
                x:'center',
                textStyle:{//标题内容的样式
                    color:'#696969',//
                    fontStyle:'normal',//主标题文字字体风格，默认normal，有italic(斜体),oblique(斜体)
                    fontWeight:"lighter",//可选normal(正常)，bold(加粗)，bolder(加粗)，lighter(变细)，100|200|300|400|500...
                    fontFamily:"san-serif",//主题文字字体，默认微软雅黑
                    fontSize:16//主题文字字体大小
                }
            },
            tooltip: {
                trigger: 'axis',
                axisPointer : {            // 坐标轴指示器，坐标轴触发有效
                    type : 'none'        // 默认为直线，可选为：'line' | 'shadow'
                },
                formatter: function(datas)
                {
                    var res = "详情：" + '<br/>';
                    res += datas[0].seriesName + ' : ' +initdata+'元   ('+ datas[0].value + '%)'+ '<br/>';
                    res += '警戒线：'+maxvalue+'%' + '<br/>';
                    res += datas[1].seriesName + ' : ' + datas[1].value + '元'+ '<br/>';
                    return res;
                }


            },
            toolbox: {
                show : false
            },
            legend: {
                selectedMode:false, //关闭点击事件
                data:['总额度','已使用额度'],
                orient: 'vertical',
                left: 'left', //图标放在左边
            },
            xAxis: [//设置x轴
                {
                    type: 'category',
                    data: ['','额度',''],
                }
            ],
            yAxis: [//设置y轴
                {
                    type: 'value',
                    min: 0,
                    max: 100,
                    interval: 20,
                    axisLabel: {
                        show: true,
                        interval: 'auto',
                        formatter: '{value} %'
                    },
                },
                {
                    type: 'value',
                    splitLine: { show: false },
                    min: 0,
                    max: initdata,
                    formatter: '{value}元'
                }
            ],
            series: [
                {
                    name:'总额度',
                    type:'bar',
                    data:bardata,//数据
                    itemStyle: {
                        normal:{
                            color: function (params){
                                var colorList = [
                                    'rgba(70, 130, 180, 0.5)',
                                    'rgba(70, 130, 180, 0.5)',
                                    'rgba(70, 130, 180, 0.5)',
                                   ];
                                return colorList[params.dataIndex];
                            }
                        }
                    },
                    markLine : {
                        symbol:"none",               //去掉警戒线最后面的箭头
                        label:{
                            position:"end",         //将警示值放在哪个位置，三个值“start”,"middle","end"  开始  中点 结束
                            formatter: "警戒线"
                        },
                        data : [{
                            silent:false,             //鼠标悬停事件  true没有，false有
                            lineStyle:{               //警戒线的样式  ，虚实  颜色
                                type:"solid",
                                color:"rgba(238, 99, 99)"
                            },
                            name: '警戒线',
                            yAxis: MAXVALUE
                        }]
                    }
                },
                {
                    name:'已使用额度',
                    type:'bar',
                    data:bardata2,//数据
                    yAxisIndex:1,
                    itemStyle: {
                        normal:{
                            color: function (params){
                                var colorList = [
                                    'rgba(228, 57, 60, 0.6)',
                                    'rgba(228, 57, 60, 0.6)',
                                    'rgba(228, 57, 60, 0.6)',
                                    ];
                                return colorList[params.dataIndex];
                            }
                        }
                    }
                }
            ]
        };
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);

Echarts中，实现双轴，主要是两个地方配置，第一个在yAxis中配置，第二个在series中配置，
实现markline，在相对应的series中，配置markline属性，Label来调控标签显示的位置以及样式