Echart绘画警戒值虚线

小小弯_Shelby

已于 2023-05-23 12:04:07 修改

阅读量99

点赞数

分类专栏：前端文章标签： java javascript 开发语言

于 2023-05-19 17:08:06 首次发布

本文链接：https://blog.csdn.net/weixin_44293690/article/details/130770589

版权

前端专栏收录该内容

25 篇文章 1 订阅

订阅专栏

示例代码：

loadPressureEchart() {
     this.pressureEchart = echarts.init(document.getElementById('pressureEchart'));
     this.pressureEchart.setOption(
         (option = {
             title: {
                 text: '',
                 left: '1%'
             },
             color: ['#67C23A'],
             tooltip: {
                 trigger: 'axis'
             },
             legend: {},
             grid: {
                 top: '12%',
                 left: '5%',
                 right: '5%',
                 bottom: '23%'
             },
             xAxis: {
                 boundaryGap: false,
                 data: ['2023-02-10', '2023-03-10', '2023-04-10']
             },
             yAxis: {},
             dataZoom: [
                 {
                     //startValue: '2023-06-01'
                 },
                 {
                     type: 'inside'
                 }
             ],

             series: {
                 name: '压力值',
                 type: 'line',
                 data: [230, 200, 200],
                 markLine: {//警戒值线显示
                    symbol: 'none', // 去掉箭头
                    lineStyle: {
                        color: '#ff0000'//虚线设置为红色
                    },
                    label: {
                        position: 'start',
                        formatter: '压力警戒值：{c}Mpa',
                        color: '#fc5531',
                        align: 'left',
                        offset: [17, -10]
                    },
                    data: [
                        {
                            yAxis: 230,//警戒值
                        }
                    ]
                }
             }
         })
     );
 }