给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: {
                width: 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: {
                width: 2
            }
        }
    }]
};

  

 

posted on 2018-08-20 18:51  村_长  阅读(16443)  评论(0编辑  收藏  举报

导航