vue3中使⽤echarts（v5.2）tooltip不显⽰的问题问题描述：echarts 实例赋值给 reactive 响应式 Proxy对象，导致tooltip不显⽰
//template  <div ref="chartContainer">
setup () {
const chartContainer = ref<HTMLElement>()
const charts = reactive({
chart: null
} as ChartsType)  // 设置为 reactive 响应式对象，保存echarts 实例
onMounted(() => {
const xAxisData = ['2021/09/15 10:00', '2021/09/15 11:00', '2021/09/15 12:00', '2021/09/15 13:00']
const seriesData = [[0, 79.55], [1, 79.89], [2, 78.83], [3, 79.95]]
const options = {
animation: false,
tooltip: {
trigger: 'axis'
},
xAxis: {
type: 'category',
data: xAxisData,
axisLine: {
show: true,
lineStyle: {
color: '#888'
setoption}
},
splitLine: {
show: false
}
},
yAxis: {
axisLine: {
show: true,
lineStyle: {
color: '#888'
}
}
},
series: {
name: 'data line',
type: 'line',
data: seriesData,
symbol: 'circle',
symbolSize: 5,
smooth: true,
lineStyle: {
width: 2,
type: 'solid'
}
},
grid: {
left: 45,
top: 25,
bottom: 30,
right: 30
}
}
charts.chart = echarts.init(chartContainer.value as HTMLElement)  // 保存echarts 实例，赋值给 reactive 响应式对象
charts.chart.setOption(options, true)
})
return {
chartContainer,
charts
}
}
结果：图表能显⽰，但提⽰框不显⽰。
更改1:
// 若只将tooltip的触发⽅式改为 'item', 那么点击线上的点，能有提⽰框弹出
tooltip: {
trigger: 'item'
},
更改2：
// tooltip的触发⽅式仍为 'axis'，改变echarts实例的赋值语句
//    charts.chart = echarts.init(chartContainer.value as HTMLElement)  // 保存echarts 实例，赋值给 reactive 响应式对象
//    charts.chart.setOption(options, true)
// 改为如下语句，tooltip 显⽰正常
const chart = echarts.init(chartContainer.value as HTMLElement)  // 这样赋值，不直接将 echarts 实例赋值给 reactive 响应式对象    chart.setOption(options, true)
charts.chart = chart
更改3：
const charts = reactive({ chart: null})  // charts.chart 是个Proxy对象
// 如果 charts 不是响应式的，没问题。
const charts  = { chart: null }
charts.chart = echarts.init(chartContainer.value as HTMLElement)
charts.chart.setOption(options, true)

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。