echarts實踐-用線分割的點圖

場景：不同類別每天都會錄入一些監控的數據，其中包括黃色、紅色警戒區，需通過圖表展示不同種類數據每天的分布情況

一、基礎處理

1、設置 y軸標題與y軸平行

yAxis: {

        name:'y軸標題',

        position: 'left',//y軸位置

        nameLocation: 'middle', //坐標軸名稱顯示位置

        nameGap:30//與y軸間距}

 

2、設置數據圓點的大小

symbolSize: 15,//點的大小（使用百分比無效）

 

3、去掉y坐標軸軸線

yAxis: {

        axisLine:{show:false},

},

 

4、添加平行於x軸的警戒線

markLine: {

                symbol: ['none', 'none'],//去掉箭頭

                itemStyle: {

                    normal: {

                        lineStyle: { //全局的樣式

                            type: 'solid',

                            width: 2

                        }

                        ,label: { show: false, position:'left' } }

                },

                data: [

                {

                        yAxis: 6.5 //平行於x軸且y軸值為6.5的標線

                }]

        }

 

5、設置警戒線顏色

data: [

                {

                        yAxis: 6.5 //平行於x軸且y軸值為6.5的標線

                        itemStyle: {

                            normal: { color: '#ffb400' } //線條顏色

                        }

                }]

 

6、指定y軸的最大值

yAxis: {

        max:20//最大值

    }

 

二、DEMO

1、源碼

option = {
    title: {
        text: '標題',
        x: 'center'
    },
    tooltip: {
        trigger: 'axis'
    },
    xAxis: {
        data : ['8/14','8/15','8/16','8/17','8/18','8/19','8/20']
    },
    yAxis: {
        axisLine:{show:false},
        name:'y軸標題',
        position: 'left',//y軸位置
        nameLocation: 'middle', //坐標軸名稱顯示位置
        type: 'value',
        max:20,//最大值
        nameGap:30//與y軸間距
    },
    series: [{
        itemStyle:{
            normal:{
                color:'#666666'
            }
        },
        symbolSize: 15,//點的大小
        data: [
            [x='8/14', y=8.04],
            [x='8/14', y=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',
        markLine: {
                symbol: ['none', 'none'],//去掉箭頭
                itemStyle: {
                    normal: { 
                        lineStyle: { //全局的樣式
                            type: 'solid', 
                            width: 2
                        }
                        ,label: { show: false, position:'left' } }
                },
                data: [{
                        yAxis: 2.5,
                        itemStyle: { 
                            normal: { color: '#c60c30' }
                        }
                },
                {
                        yAxis: 3.5,
                        itemStyle: { 
                            normal: { color: '#c60c30' }
                        }
                }
                ,
                {
                        yAxis: 4.5,
                        itemStyle: { 
                            normal: { color: '#ffb400' }
                        }
                },
                {
                        yAxis: 6.5,
                        itemStyle: { 
                            normal: { color: '#ffb400' }
                        }
                }]
        }
    }
]
};

2、效果

 

 

3、實踐效果

 

 

注：遇到問題多查echarts的官方文檔，尤其是“配置項”

http://echarts.baidu.com/option.html#xAxis.position