这个是自动轮播的时候,左下角visualMap没数据
这个是鼠标移动上去就会显示数据,是什么原因呢,有没有大佬!求个解决方法
下面是代码:
// 基于准备好的dom,初始化echarts实例
let chart = this.$echarts.init(document.getElementById(this.chartId));
let maxNumber = this.chartOptions.maxNumber;
/**
获取对应的json地图数据,然后向echarts注册该区域的地图,最后加载地图信息
@params {String} mapCode:json数据的地址
@params {String} name: 地图名称
*/
loadMap(mapData, "china");
//自动轮播
var index = 0;
let autoTooltip = () => {
let _this = this;
_this.mTime = setInterval(() => {
// 取消高亮;
chart.dispatchAction({
type: "downplay",
seriesIndex: 0,
});
//高亮
chart.dispatchAction({
type: "highlight",
seriesIndex: 0,
dataIndex: index,
});
// 显示框框
chart.dispatchAction({
type: "showTip",
seriesIndex: 0,
dataIndex: index,
});
index++;
if (index >= allData.length) {
index = 0;
}
}, 6000);
};
//执行
if (Array.isArray(allData) && allData.length === 0) {
return;
} else {
autoTooltip();
}
//鼠标移入重新计算
chart.on("mouseover", () => {
this.mTime && clearInterval(this.mTime);
autoTooltip();
});
function loadMap(mapCode, name) {
if (mapCode) {
echarts.registerMap(name, mapCode);
var option = {
tooltip: {
show: true,
formatter: function (params) {
if (params.data)
return (
`<div style="text-align: center">${params.name}</div>` +
"</br>" +
"累计用户:" +
params.data.value +
"</br>" +
"昨日新增:" +
params.data.activeDailyNew
);
},
},
visualMap: {
type: "continuous",
text: ["高", "低"],
showLabel: true,
min: 0,
max: maxNumber,
inRange: {
color: ["#edfbfb", "#b7d6f3", "#40a9ed", "#3598c1", "#215096"],
},
textStyle: {
color: "#fff",
fontSize: 18,
},
splitNumber: 0,
},
series: [
{
name: name,
type: "map",
mapType: name,
selectedMode: "false", //是否允许选中多个区域
label: {
normal: {
show: true,
},
emphasis: {
show: true,
},
},
data: allData,
},
],
};
chart.setOption(option);
}
}
轮播的时候 是不是要重新渲染一下这个柱子的数据哦。代码贴出来瞅瞅
好像要触发一下
https://echarts.apache.org/zh/api.html#action
试试