vue3?ts編寫echart是tooltip無法展示的解決

更新時間：2022年10月19日 10:59:46 作者：Aurora_juan

這篇文章主要介紹了vue3?ts編寫echart是tooltip無法展示的解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教

vue3 ts編寫echart是tooltip無法展示

用ts 定義的一個ref 初始化ehart實例

tooltip參考網(wǎng)上的寫法改了很多次頁面還是不能展示

tooltip片段代碼如下

tooltip: {
? ? ? ? show: true,
? ? ? ? trigger: 'axis',
? ? ? ? axisPointer: {
? ? ? ? ? // 坐標軸指示器，坐標軸觸發(fā)有效
? ? ? ? ? type: 'line', // 默認為直線，可選為：'line' | 'shadow'
? ? ? ? ? lineStyle: {
? ? ? ? ? ? color: '#57617B'
? ? ? ? ? }
? ? ? ? },
? ? ? ? formatter:
? ? ? ? ? '<br />{a0}: {c0}%<br />{a1}: {c1}%<br />{a2}: {c2}%',
? ? ? ? backgroundColor: 'rgba(0,0,0,0.7)', // 背景
? ? ? ? padding: [8, 10], // 內邊距
? ? ? ? extraCssText: 'box-shadow: 0 0 3px rgba(255, 255, 255, 0.4);' // 添加陰影
? ? ? },

echarts社區(qū)都可以展示怎么到這里就這樣了

強大的百度

解決辦法

用 markRaw 讓echarts從監(jiān)聽對象變成普通對象??！

myEhart.value = markRaw(echarts.init(cyEchartRef.value))
? ? ? myEhart.value.setOption(echartOption)
? ? ? // myEhart.off('click')
? ? ? myEhart.value.on('click', function(params) {
? ? ? ? fetchDataFun(params.value)
? ? ? ? getLight(params.value)
? ? ? })

可以成功展示啦~

vue對echarts的tooltip自定義內容

先看一下后端返回的數(shù)據(jù)結構

change: {
	date: {
		date_x: ["2020-11-12"], 
		date_y: [10],
		date_describe: [5]
	}
}

tooltip 格式化后顯示效果

格式化代碼部分：

drawPass(){
  // 基于準備好的dom，初始化echarts實例
  let ref = this.$refs.pass
  let discrible = this.pwd_data_describe
  if (ref && ref !== undefined) {
    let myChart = this.$echarts.init(ref)
    // 繪制圖表
    myChart.setOption({
      tooltip: {
        show: true,
        formatter: function (param) {
          console.log(param)
          return param.name + '<br/>' + param.value + '<br/>描述：距上一次修改天數(shù)為 ' + discrible[param.seriesIndex]
        }
      },
      xAxis: {
        type: 'category',
        data: this.pwd_data_x,
      },
      yAxis: {
        type: 'value'
      },
      series: [{
        data: this.pwd_data_y,
        type: 'line',
        symbol: 'triangle',
        symbolSize: 20,
        lineStyle: {
          color: '#cc302e',
          width: 4,
          type: 'dashed'
        },
        itemStyle: {
          borderWidth: 3,
          borderColor: '#ff6f6c',
          color: '#ff9392'
        }
      }]
    })
  }
},

以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: