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()
})
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容