Vue3 TypeScript ECharts 中 tooltip 不显示如何解决？

本文共计653个文字，预计阅读时间需要3分钟。

目录：Vue3 + TypeScript 编写 ECharts 报错：tooltip 无法显示，使用 TypeScript 定义的 ref 初始化 ECharts 实例，解决方法

内容：在使用 Vue3 和 TypeScript 编写 ECharts 图表时，可能会遇到 tooltip 无法显示的问题。以下是解决这一问题的方法：

1. 确保在 ECharts 的配置中正确设置了 tooltip 的相关选项。

2.使用 TypeScript 定义的 ref 来初始化 ECharts 实例，确保类型正确。

3.以下是具体的代码示例：

typescript

以上代码中，通过 TypeScript 定义的 ref `echartRef` 来初始化 ECharts 实例，并设置了 tooltip 的显示格式。确保在 ECharts 的配置中正确设置了 tooltip 的相关选项，即可解决 tooltip 无法显示的问题。

目录

• vue3 ts编写echart是tooltip无法展示
• 用ts 定义的一个ref 初始化ehart实例
• 解决办法
• vue对echarts的tooltip自定义内容

vue3 ts编写echart是tooltip无法展示

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

tooltip参考网上的写法 改了很多次 页面还是不能展示

tooltip片段代码如下

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

强大的百度

解决办法

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

可以成功展示啦~

vue对echarts的tooltip自定义内容

先看一下后端返回的数据结构

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/>描述：距上一次修改天数为 ' + 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' } }] }) } },

以上为个人经验，希望能给大家一个参考，也希望大家多多支持易盾网络。