ecahrts各种用法

一、bar滚动条及固定间隔

dataZoom: [
  {
   type: 'slider',
   show: true,
   minValueSpan: 12,
   maxValueSpan: 12,
   startValue: 0, // 初始显示值
   endValue: 12, // 一页展示的条数
   height: 10, //组件高度
   left: '5%', //左边的距离
    right: '4%', //右边的距离
    bottom: 50, //底边的距离
    borderColor: '#fff',
    fillerColor: '#6666664d',
    borderRadius: 5,
    backgroundColor: '#fff', //两边未选中的滑动条区域的颜色
    showDetail: false, //即拖拽时候是否显示详细数值信息 默认true
    realtime: true, //是否实时更新
    filterMode: 'filter'
   }
],
 xAxis: {
// 柱子之间间隔的宽度为一页十三条间隔的宽度
   max: bingQuData.length > 13 ? bingQuData.length : 13,
}

二、通用echarts点击事件

this.chart.on('click', function (params) {
   fun()
})

二、点击扇形图legend不关闭图但是触发点击事件

let chart = this.chart
this.chart.on('legendselectchanged', function (params) {
   chart.setOption({
       legend: { selected: { [params.name]: true } }
   })
   fun()
})

三、柱状图整根柱子触发事件

在echars bar中，点击事件只对有数据的范围点击有效。在数据量较小的时候，用户有时候会点击不上。这是需要对整个柱子的范围都能点击

// 柱状图在数据少的情况下点击不方便，以下拿到了点击的条数
_this.leftChart.getZr().on('click', function (params) {
  let xIndex = 0
  const pointInPixel = [params.offsetX, params.offsetY]
  if (_this.leftChart.containPixel('grid', pointInPixel)) {
  // 获取到点击数据的下标
    xIndex = _this.leftChart.convertFromPixel({ seriesIndex: 0 }, [
      params.offsetX,
      params.offsetY
    ])[0]
  }
  if (data[xIndex]) fun()
})