vue3 ts编写echart是tooltip无法展示

用ts 定义的一个ref 初始化ehart实例

tooltip参考网上的写法 改了很多次 页面还是不能展示
tooltip片段代码如下

tooltip: {
        show: true,
        trigger: 'axis',
        axisPointer: {
          // 坐标轴指示器,坐标轴触发有效
          type: 'line', // 默认为直线,可选为:'line' | 'shadow'
          lineStyle: {
            color: '#57617B'
          }
        },
        formatter:
          '{b}
{a0}: {c0}%
{a1}: {c1}%
{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社区都可以展示怎么到这里就这样了
强大的百度

解决办法

用 markRaw 让echarts从监听对象变成普通对象!!

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)
      })

可以成功展示啦~

你可能感兴趣的:(vue3,echarts,前端,javascript)