Select+Vue+Echarts实现条形图选择，但是有问题：就是当鼠标放到相应条形图上时，没有提示框，我代码里写了tooltip:{trigger:'axis'}的，这个怎么搞。代码如下
<div id="app">
<div style="z-index: 2; position: absolute; top: 20px; left: 10px; background-color: white; border-radius: 7.5; height: 410px; width: 250px;">
<div style="height: 25px;">
<select v-model="index">
<option>GDP总量</option>
<option>人均GDP</option>
</select>
</div>
<div>
<div style="text-align: center; height: 25px;"><span>{{index}}</span>排名图<span></span>{{unit}}</div>
<div :id="id" style="height: 350px;"></div>
</div>
</div>
</div>
<script>
var mapApp = Vue.createApp({
data(){
return{
index:'GDP总量',
unit:'(亿元)',
id: 'GDPRank',
GDPRankCharts:null,
totalGDPOptionRank:null,
perGDPOptionRank:null
}
},
mounted(){
this.showCharts()
},
methods:{
showCharts(){
this.GDPRankCharts = echarts.init(document.getElementById(this.id),{width: 160,height:340});
$.get('../data/广东省各市json经济数据.json').done((data)=>{
this.totalGDPOptionRank = {
dataset:[
{
dimensions: ['distinct','totalGDP'],
source:[
['深圳市',data['深圳市'].total_GDP],
['广州市',data['广州市'].total_GDP],
['佛山市',data['佛山市'].total_GDP],
['东莞市',data['东莞市'].total_GDP],
['惠州市',data['惠州市'].total_GDP],
['珠海市',data['珠海市'].total_GDP],
['江门市',data['江门市'].total_GDP],
['茂名市',data['茂名市'].total_GDP],
['中山市',data['中山市'].total_GDP],
['湛江市',data['湛江市'].total_GDP],
['汕头市',data['汕头市'].total_GDP],
['肇庆市',data['肇庆市'].total_GDP],
['揭阳市',data['揭阳市'].total_GDP],
['清远市',data['清远市'].total_GDP],
['韶关市',data['韶关市'].total_GDP],
['阳江市',data['阳江市'].total_GDP],
['汕尾市',data['汕尾市'].total_GDP],
['梅州市',data['梅州市'].total_GDP],
['潮州市',data['潮州市'].total_GDP],
['河源市',data['河源市'].total_GDP],
['云浮市',data['云浮市'].total_GDP]
]
},
{
transform:{
type:'sort',
config: {
dimension: 'totalGDP',
order:'asc'
}
}
}
],
tooltip:{
trigger: 'axis',
axisPointer:{
type:'shadow'
}
},
grid:{
left: 70,
top: 10
},
xAxis:{
position: 'bottom'
},
yAxis:{
type:'category',
axisLabel:{interval:0}
},
series:{
type: 'bar',
encode: { y: 'distinct', x: 'totalGDP' },
datasetIndex: 1
}
};
this.perGDPOptionRank = {
dataset:[
{
dimensions: ['distinct','perGDP'],
source:[
['深圳市',data['深圳市'].perGDP],
['广州市',data['广州市'].perGDP],
['佛山市',data['佛山市'].perGDP],
['东莞市',data['东莞市'].perGDP],
['惠州市',data['惠州市'].perGDP],
['珠海市',data['珠海市'].perGDP],
['江门市',data['江门市'].perGDP],
['茂名市',data['茂名市'].perGDP],
['中山市',data['中山市'].perGDP],
['湛江市',data['湛江市'].perGDP],
['汕头市',data['汕头市'].perGDP],
['肇庆市',data['肇庆市'].perGDP],
['揭阳市',data['揭阳市'].perGDP],
['清远市',data['清远市'].perGDP],
['韶关市',data['韶关市'].perGDP],
['阳江市',data['阳江市'].perGDP],
['汕尾市',data['汕尾市'].perGDP],
['梅州市',data['梅州市'].perGDP],
['潮州市',data['潮州市'].perGDP],
['河源市',data['河源市'].perGDP],
['云浮市',data['云浮市'].perGDP]
]
},
{
transform:{
type: 'sort',
config: {
dimension: 'perGDP',
order: 'asc'
}
}
}
],
tooltip:{
trigger: 'axis',
axisPointer:{
type:'shadow'
}
},
grid:{
left: 70,
top: 10
},
xAxis:{
position: 'bottom'
},
yAxis:{
type:'category',
axisLabel:{interval:0}
},
series:{
type: 'bar',
encode: { y: 'distinct', x: 'perGDP' },
datasetIndex: 1
}
};
this.GDPRankCharts.setOption(this.totalGDPOptionRank);
});
}
},
watch:{
index(newIndex){
if(newIndex=='GDP总量'){
this.unit = '(亿元)'
this.GDPRankCharts.setOption(this.totalGDPOptionRank);
}else if(newIndex=='人均GDP'){
this.unit ='(元)'
this.GDPRankCharts.setOption(this.perGDPOptionRank);
}
}
}
});
mapApp.mount('#app');
</script>
