项目中用到的关于echarts的配置

1.坐标标题(name)的配置

来自

旋转： nameRotate, 旋转度数

名称与坐标轴间距: nameGap , 间距

大体位置调整：nameLocation, end、start、center三种选项

but想要是坐标轴名称放到任意位置的话，可以使用nameTextStyle.padding来做调整，比如：

2.坐标刻度的配置

exharts横轴xAxis属性有两种类型，category和value，在项目中遇到多个区域数据共同绘图时，设置为category时数值范围不正确、甚至会出现数据增多时横轴乱序的问题；设置为value时刻度从0开始，哪怕强制设置min为dataMin，一缩放范围还是从0开始，有一个属性一直没注意到，这个属性就能解决这个问题，看代码

3.区域选择功能

该属性是设置操作选区工具的，但是如果想通过隐藏这个工具，改用自己的事件(按钮点击、下拉框选择等)时，可以如下配置：

// option的配置
option: {
  brush: {
    // toolbox: ['lineX', 'keep', 'clear'],此处不显示
    xAxisIndex: 'all',
    brushLink: 'all',
    outOfBrush: {
      colorAlpha: 0.1
    },
    throttleType: 'debounce',
    throttleDelay: 500,
    xAxisIndex: 0,
    yAxisIndex: 0
  },
}

// 开启brush选区功能
myCharts.dispatchAction({
  type: 'takeGlobalCursor',
  key: 'brush',
  brushOption: {
    brushType: 'lineX',
    brushMode: 'multiple'
  }
})

// 关闭brush选区功能
myCharts.dispatchAction({
  type: 'brush',
  areas: []
})
myCharts.dispatchAction({
  type: 'takeGlobalCursor',
  key: 'dataZoomSelect',
  dataZoomSelectActive: false
})
myCharts.off('brushselected')
this.option.series.forEach(item=>{
  if(item.name === this.selectFileName){
    item.markPoint.data = []
  }
})

4.横轴缩放范围配置

1.扩大“放”的范围

需求：最高精度保留四位，但是默认没有小数位、在图表放大的过程中不断增加数据精度，直至增加到四位

// 第一步
axisLabel: {
  formatter: val => {
    return Number(val.toFixed(4))
  },
},
// 第二步
dataZoom: [{
  id: 'dataZoomX',
  minValueSpan: 0.001
}, {
  id: 'dataZoomY',
  minValueSpan: 0.001
}]

2.扩大“缩”的范围

xAxis: {
  name: 'x',
  min: -Math.pow(2,32),
  max: Math.pow(2,32)
},
dataZoom: [{
  id: 'dataZoomX',
  startValue: -200,
  endValue: 200
}]

这样，横轴就能平滑的缩到-Math.pow(2,32)Math.pow(2,32)之间了，如果只设置xAxis，一开始就是最大范围，我们通过设置一个刚好显示所有数据的范围作为startValue和endValue的值，然后还能不断缩小

5.图线选择绘图功能

通常：我们设置legend参数，可以显示图例，点击图例可以控制图线是否显示 那么，如果想隐藏echarts自带的图例，改用自己的事件(如多选框等)，只需要对legend的selected属性进行控制即可，如下：

legend: {
  show: false
},

// 复选框事件
this.option.legend.selected = {
  '邮件营销': true,
  '联盟广告': true,
  '视频广告': false,
  '直接访问': false,
  '搜索引擎': true
}