Echarts自定义警戒线+图例

爱吃糖的猫

已于 2023-07-14 16:40:45 修改

阅读量995

点赞数 1

分类专栏：笔记文章标签： echarts 前端 javascript

于 2023-04-07 22:32:50 首次发布

本文链接：https://blog.csdn.net/weixin_42745647/article/details/130021968

版权

笔记专栏收录该内容

2 篇文章 1 订阅

订阅专栏

本文介绍了如何使用Echarts实现自定义警戒线和图例颜色的功能，包括数据分段显示、警戒线绘制以及图例颜色与警戒线颜色的统一。通过设置多个隐藏线条来模拟图例与线条的分离效果，并提供了完整的HTML代码示例。

摘要由CSDN通过智能技术生成

本文节选自我的博客：Echarts 自定义警戒线 + 图例

💖 作者简介：大家好，我是MilesChen，偏前端的全栈开发者。
📝 CSDN主页：爱吃糖的猫🔥
📣 我的博客：爱吃糖的猫
📚 Github主页: MilesChen
🎉 支持我：点赞👍+收藏⭐️+留言📝
💬介绍：The mixture of WEB+DeepLearning+Iot+anything🍁

前言

     工作中要画个这种折线图，这种效果全网搜不到，所以就自己实现吧！

话不多说，先上图

是不是你想要的效果？文末附HTML完整代码，需要引入自己的echarts文件

需求：

1.实现数据分段显示，每段对应不同的颜色，
2.画图对应区域的警戒线
3.图例显示不同区域的警戒线

难点：

1.实现多段警戒、多段折线
2.实现不同区段的警戒线与图例颜色统一
3.实现legend与line脱离，因为要显示不同区段的颜色（我查过，只有图例能解决这个问题）

代码

注释已写入代码，若看不明白可去 Echart查询对应API

<!DOCTYPEhtml>
<html>
    <head>
        <metacharset=utf-8>
    </head>
    <body>
        <divid="chart"style="width:800px;height:400px"></div>
        <scriptsrc="./echarts.min.js"></script>
        <scripttype="text/javascript">
            varmyChart= echarts.init(document.querySelector('#chart'));
            letxarr= ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
            letyarr= [82.3,55,13,78,99,21,42]
            letmarkLine = {
                "fatal_error":89.647888,
                "warning":61.664089,
                "error":72.212051
            }  //警戒线

            letoption= {
            tooltip:{trigger:"axis",},
            legend:{
                y:'top',
                selectedMode:false,
                icon:"rect", // 图例icon为方块
                itemHeight:3, // 图例icon高度
                itemWidth:18, // 图例icon宽度
                formatter:function(name) {
                    switch(name){
                    case'data1':
                        return'正常'
                    case'hide1':
                        return'黄色预警'
                    case'hide2':
                        return'橙色预警'
                    case'hide3':
                        return'红色预警'
                    default:
                        return'code error'
                    }
                },
            },
            grid:{
                left:"5%",
                right:"5%",
                bottom:"3%",
                top:40,
                containLabel:true,
            },
            xAxis:{
                type:"category",
                boundaryGap:false,
                data:xarr,
                axisLabel:{
                    interval:0, 
                    rotate:0,
                },
            },
            yAxis:{
                type:"value",
            },
            series:[{
                name:'data1',
                symbol:'none',
                data:yarr,
                type:"line",
                itemStyle:{normal:{color:"#5470c6"}},
                markLine:{   //警戒线
                data:[      //存放警戒线配置
                {
                    yAxis:markLine['fatal_error'],
                    lineStyle:{
                    color:'#ff0000'
                    },
                    label:{
                    color:'#ff0000',
                    fontSize:10,
                    formatter:(e)=>{returne.value}   //这里可以显示警戒线的值  也可使用字符串拼接，实现自己的值
                    }
                },

                {
                    yAxis:markLine["error"],
                    lineStyle:{color:'#E28909'},
                    label:{
                    color:'#E28909',
                    fontSize:10,
                    formatter:(e)=>{returne.value}
                    }
                },
                {
                    yAxis:markLine["warning"],
                    lineStyle:{color:'#E4C90C'},
                    label:{
                        color:'#E4C90C',
                        fontSize:10,
                        formatter:(e)=>{returne.value}
                    }
                },
                ],
                silent:false,//鼠标移入警戒线，警戒线会变粗
                symbol:false,
                lineStyle:{//警戒线的样式，颜色，宽度，类型
                    color:'red',
                    type:'dashed',//虚线
                    width:1
                },
                }
            },
            {name:'hide1',type:'line',itemStyle:{normal:{color:"#E4C90C"}}}, //隐藏线条，用于图例显示黄色警戒线 注意没有数据
            {name:'hide2',type:'line',itemStyle:{normal:{color:"#E28909"}}}, //隐藏线条，用于图例显示橙色警戒线
            {name:'hide3', type:'line',itemStyle:{normal:{color:"#ff0000"}}},//隐藏线条，用于图例显示红色警戒线
            ],
            visualMap:{   //设置不同区段的折线段的颜色
                pieces:[
                    {
                    lte:markLine["warning"],
                    color:"#5470c6"
                },
                {
                    gt:markLine["warning"],
                    lte:markLine["error"],
                    color:"#E4C90C"
                },
                {
                    gt:markLine["error"],
                    lte:89.64,
                    color:"#E28909"
                },
                {
                    gt:markLine["fatal_error"],
                    color:"#ff0000"
                },
                ],
                left:"center",//标签距离左边的距离，还可以用left。center等字段
                top:"25",//标签距离顶部距离。还可以用top。middle等字段
                orient:"horizontal",//标签排列方式，水平和垂直
                show:false,//标签是否显示
            },
            }
            
            myChart.setOption(option);
        </script>
    </body>
</html>

总结

1.实现多段警戒线和实现多段折线，这种API可以搜到
2.实现自定义图例，这API也可以搜到
3.实现legend与line脱离，这种API是不存在的。我们实现的效果是一种伪分离：
因为我们定义了四条线，实际上只显示了一条，其他的都拿来当了图例。再设置图例不可点击，达到只显示不控制的效果
注意：使用自定义title可以达到同样的效果，有时候自定义title确实用完了可以使用这种方式