echarts實踐-圖表划分區域並設置不同顏色

上一篇echarts實踐-用線分割的點圖介紹了echarts的基本操作及用標線分割點圖的不同區域，如下為給圖表划分區域。

1、series節點下添加屬性markArea增加區域

（1）markArea節點下的data由多組區域數據構成，每組長度固定為2的對象分別用來固定左右及上下區間

data: [
                [{
                yAxis: '2.5',//y軸坐標控制
                itemStyle:{
                    color:'#c60c30'
                }
            }, {
                yAxis: '3.5'
            }]
            ,
            [{
                yAxis: '4.5',
                itemStyle:{
                    color:'#ffb400'
                }
            }, {
                yAxis: '6.5'
            }]

（2）可全局控制區域的樣式及單獨控制每個區域的樣式

全局，在data的同一級添加如下代碼：

itemStyle: { //全局的
                normal: { color: '#ff3333' }
            }

　　

單獨控制：

 [{
                yAxis: '2.5',//y軸坐標控制
                itemStyle:{ //控制當前區域樣式
                    color:'#c60c30'
                }
            }, {
                yAxis: '3.5'
            }]

 

2、示例代碼

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=3.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',
        markArea: { //標記區域
            itemStyle: { //全局的
                normal: { color: '#ff3333' }
            },
            data: [
                [{
                yAxis: '2.5',//y軸坐標控制
                itemStyle:{
                    color:'#c60c30'
                }
            }, {
                yAxis: '3.5'
            }]
            ,
            [{
                yAxis: '4.5',
                itemStyle:{
                    color:'#ffb400'
                }
            }, {
                yAxis: '6.5'
            }]
            ]
        },
        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' }
                        }
                }]
        }
    }
    
]
};

　　

3、效果圖