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 轴的 竖线， 背景显示为网格；
         
        },