echarts使用中需要注意的一些地方

echarts百度的骄傲，当然也是中国的骄傲。使用中，还是有些费解的地方，毕竟是个复杂的图表，在此罗列一些：

1、去除“直角系”图表，上边和右边的线

这个线按道理，是在option配置对象，属性xAxis、yAxis中设置，本以为是这样设置的：

let option = {
  xAxis: [
    {
      splitLine: {show: false}
    }
  ],
  yAxis: [
    {
      splitLine: {show: false}
    }
  ]
}

结果不是。一番寻思，才发现在option配置对象，属性grid中设置的：

let option = {
  grid: {
    borderWidth: 0
  }
}

2、echarts自带的背景色

本以为是设置option配置对象属性backgroundColor，结果不是，还是设置grid中属性backgroundColor：

let option = {
  grid: {
    backgroundColor: '#c05'
  }
}

3、折线图内容填充色设置

itemStyle中的属性color，对于折线图来说，是设置线上面的小圆点（标志图形类型），真正设置内容填充色，要这么设置：

let option = {
  series: [
    {
      itemStyle: {
        normal: {
          areaStyle: {color: '#c05'}
        }
      }
    }
  ]
}

4、“直角系”图表，两根x、y轴如何设置

不单单是在option配置对象，属性xAxis、yAxis中设置两个对象就可以，还要在series中做好呼应，设置响应的xAxisIndex、yAxisIndex，才会出来两根轴：

let option = {
  yAxis: [
    {
      name: '总数',
      type: 'value',
      ...
    },
    {
      name: '成交数',
      type: 'value',
      ...
    }
  ],
  series: [
    {
      yAxisIndex: 0, // 默认为0，这个可以不写
      data: []
    },
    {
      yAxisIndex: 1,
      data: []
    }
  ]
}

5、legend颜色不生效的原因

可能大家第一时间，以为是option配置对象，属性color配置原因，还要在series中做好呼应，设置上name：

let option = {
  legend: ['总数', '成交数'],
  series: [
    {
      name: '总数',
      data: []
    },
    {
      name: '成交数',
      data: []
    }
  ]
}

6、barGap设置不起作用

原因是不能设置barWidth，可以改用barMaxWidth或者barCategoryGap，来代替

7、折线图tooltip的设置

想要鼠标经过，变成一根直线的提示，不单单要设置axisPointer，还需要对应设置trigger为axis：

let option = {
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'line'
    }
  }
}

8、tooltip提示框样式无法控制

打开控制台，查看tooltip提示框，不是canvas绘制出来的，是一个div元素class="echarts-tooltip zr-element"；可能是页面中css样式设置，影响到了。