echarts折線區域圖

一、使用場景

　　 當舒張壓和收縮壓超過或低於他們對應的范圍時，折線應該給與不同顏色。兩個指標對應的范圍也要填充不同的顏色。

       

二、實現方案

　　主要使用了echarts中的visualMap，series.markArea；visualMap作用是定義數據范圍，利用不同范圍定義不同的顏色，其中visualMap.seriesIndex的值對應series.data。seriesIndex=0 ->series[0]. markArea則是定義區域范圍並填充顏色.　

visualMap

 

 markArea: {
                  silent:false,
                  itemStyle:{
                    color:'#BCE7B1'
                  },
                  data: [
                    [{
                      name: '',
                      yAxis: 60
                    },
                    {
                      yAxis: 90
                    }]
                  ],
                },

完整option代碼

this.option={
            tooltip : {
              trigger: 'axis'
            },
            legend: {
              data:['舒張壓','收縮壓']
            },
            calculable : true,

            xAxis : [
              {
                type : 'category',
                boundaryGap : false,
                axisLabel:{
                  rotate:45,
                  interval:0
                },
                data : ['周一','周二','周三','周四','周五','周六','周日']
              }
            ],
            yAxis : [
              {
                name:'血壓',
                type : 'value',
                axisLabel : {
                  formatter: '{value}'
                }
              }
            ],
            visualMap: [
              {
                show: false,
                seriesIndex:0,
                pieces: [
                  {
                    gt:0,
                    lte:60,
                    color:'#e91642'
                  },
                  {
                    gt: 60,
                    lte: 90,        
                    color: '#D5D5D5'
                  },
                  {
                    gt: 90,          
                    let:200,
                    color: '#e91642'
                  }
                  ]
              },
              {
                show: false,
                seriesIndex:1,
                pieces:[
                  {
                    gt:0,
                    lte:90,
                    color:'#e91642'
                  },
                  {
                  gt: 90,
                  lte: 140,          
                  color: '#EBEBBE'
                }, {
                  gt: 140,          
                  let:200,
                  color: '#e91642'
                }]
              }
            ],
            series : [
              {
                name:'舒張壓',
                type:'line',
                data:[55, 85, 90, 95, 70,105, 90],
                markPoint : {
                  data : [
                    {type : 'max', name: '最大值'},
                    {type : 'min', name: '最小值'}
                  ]
                },
                markArea: {
                  silent:false,
                  itemStyle:{
                    color:'#BCE7B1'
                  },
                  data: [
                    [{
                      name: '',
                      yAxis: 60
                    },
                    {
                      yAxis: 90
                    }]
                  ],
                },
              },
              {
                name:'收縮壓',
                type:'line',
                data:[90, 95, 105, 160, 135, 150, 140],
                markPoint : {
                  data : [
                    {type : 'max', name: '最大值'},
                    {type : 'min', name: '最小值'}
                  ]
                },
                markArea: {
                  silent:false,
                  itemStyle:{
                    color:'#B8C4F1'
                  },
                  data: [
                    [{
                      name: '',
                      yAxis: 90
                    },
                      {
                        yAxis: 140
                      }]
                  ],
                },
              }
            ]
          };