前端-echarts5.0 tooltip不显示问题
·
在echarts官网完成绘制后,将配置复制到本地,结果tooltip无法显示。
如图所示BUG

项目使用vue3,echarts5.0,代码写的是vue2。
option = {
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross',
crossStyle: {
color: '#999'
}
}
},
legend: {
data: ['完工数量', '完成率']
},
xAxis: [
{
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
axisPointer: {
type: 'shadow'
}
}
],
yAxis: [
{
type: 'value',
name: '数量',
min: 0,
max: 250,
interval: 50,
axisLabel: {
formatter: '{value} ml'
}
},
{
type: 'value',
name: '完成率',
min: 0,
max: 25,
interval: 5,
axisLabel: {
formatter: '{value} °C'
}
}
],
series: [
{
name: '完工数量',
type: 'bar',
tooltip: {
valueFormatter: function (value) {
return value + ' ml';
}
},barWidth: '40%', // 修改柱子宽度
// 或者使用 barCategoryGap 设置类目间柱子的间距(例如:'20%')
// barCategoryGap: '20%'
itemStyle: {
color: '#1890ff' // 设置柱子颜色为淡蓝色
},
label: {
show: true, // 显示数据标签
position: 'top' // 数据标签显示在柱子顶部
},
data: [
2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3
]
},
{
name: '完成率',
type: 'line',
yAxisIndex: 1,
tooltip: {
valueFormatter: function (value) {
return value + ' °C';
}
},itemStyle: {
color: '#faad14' // 设置柱子颜色为淡蓝色
},
label: {
show: true, // 显示数据标签
position: 'top' // 数据标签显示在柱子顶部
},
data: [2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2]
}
]
};
排查了半天问题,发现这部分代码不正确。
this.myChart1 = echarts.init(this.$refs.topL);
this.option1 && this.myChart1.setOption(this.option1);
this.myChart2 = echarts.init(this.$refs.topR);
this.option2 && this.myChart2.setOption(this.option2);
let myChart3 = echarts.init(this.$refs.bottom);
this.option3 && myChart3.setOption(this.option3);
如果将myChart定义在了data()里面,那么tooltip就会不显示。
需要通过let来定义,就可以显示了。
!!!!!!
还有一种应该是最好的解决方法,就是Vue2中所有的myChart都放在script标签下的第一行
<script>
var myChart1;
魔乐社区(Modelers.cn) 是一个中立、公益的人工智能社区,提供人工智能工具、模型、数据的托管、展示与应用协同服务,为人工智能开发及爱好者搭建开放的学习交流平台。社区通过理事会方式运作,由全产业链共同建设、共同运营、共同享有,推动国产AI生态繁荣发展。
更多推荐


所有评论(0)