給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
            }
        }
    }]
};

  

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM