在vue-cli构建的项目中 使用echarts,使用dispatchAction这个api后tooptip并不会自动显示,代码如下
var myData = [
{name: '海门', value: [121.15, 31.89, 90]},
{name: '鄂尔多斯', value: [109.781327, 39.608266, 120]},
{name: '招远', value: [120.38, 37.35, 142]},
{name: '舟山', value: [122.207216, 29.985295, 123]}
]
var option = {
geo: {
map: 'china',
itemStyle: { // 定义样式
normal: { // 普通状态下的样式
areaColor: '#323c48',
borderColor: '#111'
},
emphasis: { // 高亮状态下的样式
areaColor: '#2a333d'
}
}
},
backgroundColor: '#404a59', // 图表背景色
tooltip: {
trigger: 'item',
formatter: (params) => {
return `<p style="color:#fff;">${params.name}</p>
<p style="color:#fff;">${params.seriesId}人</p>
`
console.log(params, 'params')
},
backgroundColor:'rgba(12, 204, 104, 0.92)',
borderColor:'#FFFFCC',
showDelay : 0,
hideDelay : 0,
enterable:true,
transitionDuration : 0,
extraCssText:'z-index:100',
},
series: [
{
name: '销量',
type: 'scatter',
coordinateSystem: 'geo',
data: myData // series数据内容
}
],
visualMap: {
type: 'continuous', // 连续型
min: 0, // 值域最小值,必须参数
max: 200, // 值域最大值,必须参数
calculable: true, // 是否启用值域漫游
inRange: {
color: ['#50a3ba','#eac736','#d94e5d']
// 指定数值从低到高时的颜色变化
},
textStyle: {
color: '#fff' // 值域控件的文本颜色
}
}
}
var counts = option.series[0].data.length;
console.log(option.series[0], 'option.series[0]')
let myChart = echarts.init(document.getElementById('map'))
myChart.setOption(option);
function autoHoverTip(){
for(var i = 0;i<counts;i++){
(function (i) {
let ts = setTimeout(function () {
myChart.dispatchAction({
type: 'showTip',
seriesIndex: 1,
dataIndex: i
});
}, 5000*i);
})(i);
}
}
setTimeout(function() {
autoHoverTip();
let tv = setInterval(autoHoverTip, counts*5600);
});
}
函数已经在mounted钩子中调用