echart Vue3 hover不显示tooltip 解决
·
问题:在echart示例里面编辑是可以正常显示hover数据的,放到项目上就展示hover数据了
解决:barChart 要使用shallowRef
原因:Vue3 底层使用了 proxy 代理创建实例,其创建出来的实例与echarts真正使用的那个存在兼容性问题,所以Echarts 无法从中获取内部变量;故设置echarts实例时,不要使用ref、reactive等响应式方法创建echarts对象,应该使用shallowReactive、shallowRef、或者普通变量
代码:
import { onMounted, reactive, shallowRef } from "vue";
let barChart = shallowRef(null)
const getUserBarChart = () => {
barChart.value = echarts.init(
document.getElementById('barChartId')
)
let option = {
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
legend: {
top: 15,
left: 0,
data: ['老用户睡眠量', '新用户增长量']
},
grid: {
left: 20,
right: 20,
bottom: 50,
},
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
color: ['#F93920', '#3BB346'],
series: [
{
name: '老用户睡眠量',
type: 'bar',
data: [120, 200, 150, 80, 70, 110, 130],
colorBy: 'series'
},
{
name: '新用户增长量',
type: 'bar',
colorBy: 'series',
// emphasis: {
// focus: 'series'
// },
data: [220, 182, 191, 234, 290, 180, 210.100]
},
]
};
barChart.value.setOption(option)
}
更多推荐
所有评论(0)