• 给echarts的图表加水平直线或其它直线


     可通过markLine及type=‘line’的方式添加直线

    1、markline

    可通过设置symbol取消/增加两端的箭头

    markLine: {
                    symbol: ['none', 'none'],//去掉箭头
                    itemStyle: {
                        normal: { lineStyle: { type: 'solid', color:'blue'}
                        ,label: { show: false, position:'left' } }
                    },
                    data: [{
                            name: 'Y 轴值为 100 的水平线',
                            yAxis: 7.24
                    },
                    [
                        {name: '标线1起点', value: 10, x: 50, y: 20},
                        {name: '标线1终点', x: 150, y: 120}
                    ]
                    ]
            } 

    2、type=‘line’

    此种方式,对于X坐标轴为字符串的值无法从圆点开始

    {
            name: 'MA5',
            type: 'line',
            data: [
                ['8/14', 8.5],
                ['8/20', 8.5]
            ],
            smooth: true,
            showSymbol: false,
            lineStyle: {
                normal: {
                     2
                }
            }
        }

    3、示例

    option = {
        xAxis: {
            data : ['8/14','8/15','8/16','8/17','8/18','8/19','8/20']
        },
        yAxis: {},
        series: [{
            symbolSize: 20,
            data: [
                ['8/14', 8.04],
                ['8/14', 9.04],
                ['8/15', 6.95],
                ['8/15', 7.58],
                ['8/15', 8.81],
                ['8/15', 8.33],
                ['8/16', 9.96],
                ['8/17', 7.24],
                ['8/18', 4.26],
                ['8/18', 10.84],
                ['8/20', 4.82],
                ['8/20', 5.68]
            ],
            type: 'scatter',
            // labelLine:{normal:{show:false}},
            markLine: {
                    symbol: ['none', 'none'],//去掉箭头
                    itemStyle: {
                        normal: { lineStyle: { type: 'solid', color:'blue'}
                        ,label: { show: false, position:'left' } }
                    },
                    data: [{
                            name: 'Y 轴值为 100 的水平线',
                            yAxis: 7.24,
                            // valueDim: 'close'
                    },
                    [
                        {name: '标线1起点', value: 10, x: 50, y: 20},
                        {name: '标线1终点', x: 150, y: 120}
                    ]
                    ]
            }
        }
        ,
        {
            name: 'MA5',
            type: 'line',
            data: [
                ['8/14', 8.5],
                ['8/20', 8.5]
            ],
            smooth: true,
            showSymbol: false,
            lineStyle: {
                normal: {
                     2
                }
            }
        }]
    };
    

      

  • 相关阅读:
    redis>lua脚本
    redis百万级数据存取
    spring之自定义注解
    spring>aop
    git的回退和撤销操作
    vue2.0 v-tap简洁(漏)版 (只解决300ms问题)
    JSONP原理小记
    前端模块加载规范AMD与CMD小记
    html状态码
    使用vue-cli开发时跨域问题
  • 原文地址:https://www.cnblogs.com/hepc/p/9507308.html
Copyright © 2020-2023  润新知