echatrs踩坑記錄之 不同區域 顯示 不同顏色

1、被 UI 折磨瘋掉：UI圖

可以看到幾個點：
1、沒有X、Y 軸刻度；
2、沒有顯示title；
3、背景顏色 以及 線的 顏色 更改；
4、背景爲網格

2、去掉X 、Y 軸

分別在 xAxis 和 yAxis 加入

 axisTick:{
     show:false, //隱藏刻度線
 },
axisLine:{ 
    show:false,//y軸
  },

3、圖的大小顯示問題

當把title 和 x、y 軸去掉以後， 就會放心 圖只在 中心， 四周留白過於大了，因爲是原本的 x、y 軸 的位置。
需要配置， 將 圖撐滿 ，看起來舒服；

grid:{
   top:"10px",
   left:"0px",
   right:"0px",
   bottom:"10px",
   backgroundColor: '#fff',
   width:"auto", //圖例寬度
   height:"100%", //圖例高度
 },

3、背景顏色 的更改

通過markArea 這個配置項， 具體可以看echatrs 官網；
注意點： name 一點要不同；配置各區域範圍；

color:['#FBF1F5','#FBF1F5','#DEFAF7',],
series: [
          {
            name: 'x x x',
            type: 'line',
            smooth: true,
            data: [100, 180, 250, 260, 270, 300, 550, 500, ],
          },
          {
            name:'1',
            type:'line',
            markArea: {
                data: [[{
                yAxis: '0',
                }, {
                yAxis: '300',
                }]],
            },
          },
          {
            name:'2',
            type:'line',
            markArea: {
              data: [[{
              yAxis: '300',
              }, {
              yAxis: '450',
              }]]
            },
          },
          {
            name:'3',
            type:'line',
            markArea: {
              data: [[{
              yAxis: '450',
              }, {
              yAxis: '960',
              }]],
            },
          },
        ],

4、線的顏色更改

線的顏色是根據visualMap 來控制的。
visualMap.dimension 爲0 的話， 是根據X軸值分區的，爲1 的話是根據Y軸區分。

 visualMap: {
          show: false,
          dimension: 1,
          pieces: [{
            lte: 300,
            color: '#F5726C',
          }, {
            gt: 300,
            lte: 450,
            color: '#76DBC8',
          }, {
            gt: 450,
            color: '#F5726C',
          }],
        },

可以看到， 區間的劃分，要去series 中的最好一樣。

5、網格

折線圖一般背景默認是 只有橫線， 想要豎線出來，需要配置splitLine， 這樣看起來就是網格線

xAxis: {
        
          splitLine:{show: true},// 加上 x 軸的 豎線， 背景顯示爲網格；
         
        },