Echarts のチャート描画の問題と解決策

1. Echarts チャートが再描画されると、次の警告が表示されることがあります。There is a chart instance already initialized on the dom.

理由: チャートを再描画すると、Dom インスタンスはまだ存在しており、繰り返し初期化されます。

解決：

// 在初始化实例之前先将实例销毁，实例销毁后就无法再被使用了，然后再重新进行初始化
that.myChart && that.myChart.dispose()

2. Echarts のチャート (折れ線グラフ、ヒストグラム) のモバイル端末上のイベントをクリックします。

モバイル端末で h5 チャートを作成するときに、特定の点または列をクリックしたい場合、それをトリガーするには 2 回以上クリックする必要があることがわかりました。追加される理由。。。

解決：

this.char.getZr().on('click',params => {
    
     // 监听鼠标点击的图表区域
   const pointInPixel= [params.offsetX, params.offsetY]
   if (that.char.containPixel('grid',pointInPixel)) {
    
    
   let xIndex=that.char.convertFromPixel({
    
    seriesIndex:0},[params.offsetX, params.offsetY])[0]
    if (data[xIndex]) {
    
    
       that.newDate = data[xIndex].tradeDate.replace(/\//g,'.')
       let realNumber = data[xIndex].rtnTotal
       realNumber=realNumber+''
       var number = realNumber.split(".");
       var reg = /\d{1,3}(?=(\d{3})+$)/g
       if(number.length===1){
    
    
          realNumber = (number[0] + '').replace(reg, '$&,')
       }
       that.nowProfit = realNumber
   }
       document.getElementsByClassName('defaultDate')[0].style.background = '#f5effe'
  }
})

3. Echarts チャート – > マウスを中に移動し、小さな手をキャンセルします。

チャート内でジャンプするためにクリックする必要がない場合、マウスが現在のチャート内に移動すると、小さな手の状態が矢印に変わります。

	// myChart是绘图的对象
	myChart.getZr().on('mousemove', param => {
    
    
      myChart.getZr().setCursorStyle('default')
      //  若鼠标滑过区域位置在当前图表范围内 鼠标设置为小手
      // if (radarChart.containPixel('grid', pointInPixel)) { 
	  //  radarChart.getZr().setCursorStyle('pointer')
	  // } 
    })

​