echarts 怎么实现这样的折线图

发布于 2022-09-13 00:18:30 字数 185 浏览 14 评论 0

image.png
Y轴固定为小雨、中雨、大雨

后端传来的Y轴数据类似[5,6,11,3,8]这样的数组,最大值不确定(目前只有设计稿,不确定具体是怎样的数据,我猜测是这样的:低于5cm为小雨,5cm到10cm之间中雨,大雨10cm是大雨)

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

深白境迁sunset 2022-09-20 00:18:30

如果只是设置y轴,可以设置axisLabel中的formatter

如果是加三条分割线,可以使用markline
image.png

series: [{
    name: '分钟降雨量',
    type:'line',
    yAxisIndex:1,
    z:10,
    itemStyle: {normal: {color: 'red'}},
    data:seriesData,
    markLine : {
        symbol:["","arrow"],
        silent:true,//不响应事件                            
        data : [
            {
                name: '大雨',yAxis: '1',itemStyle:{normal:{color:'#EF4B1D'}}, 
                label:{normal:{formatter: function(){return '大雨'}}}
            },
            {
                name: '中雨',yAxis: '0.35',itemStyle:{normal:{color:'#FDA19D'}},
                label:{normal:{formatter: function(){return '中雨'}}}
            },
            {
                name: '小雨',yAxis: '0.15',itemStyle:{normal:{color:'#FDD49D'}},
                label:{normal:{formatter: function(){return '小雨'}}}
            }
        ]
    }
}]
~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文