需求是实现了,但是一直重绘太卡了 影响体验.
//配置
polar: {
tooltip: {
show: true,
backgroundColor: "rgba(255,255,255,.8)",
textStyle: {
color: "#5a5c5e",
fontSize: 12
},
padding: 0,
borderWidth: 1,
borderColor: "rgb(218,219,220)",
extraCssText: "box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);",
formatter: params => {
let str = "";
let name = params.name || "未知";
let value = params.value || 0;
let than = value
? ((value / this.regionTotal[this.selectedName]) * 100).toFixed(2)
: 0;
str += `<div style="line-height:20px;"><span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:#3398DB;"></span>浏览量(PV)<span style="float: right;">${value}</span><div/>`;
str += `<div style="line-height:20px;"><span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:#6EC71F;"></span>浏览量(PV)<span style="float: right;">${than}%</span><div/>`;
return `<div style="padding-left:12px;background:rgb(244,246,246);width:180px;line-height:30px;border-bottom:1px solid #e1e1e1;">${name}</div><div style="padding:8px 12px;">${str}</div>`;
}
},
graphic: [
{
type: "image",
id: "logo",
left: 20,
bottom: 10,
z: -10,
bounding: "raw",
style: {
image:
"https://tongji.baidu.com/web/css/decorator/map-legend.png",
width: 100,
height: 20
}
}
],
visualMap: {
show: false,
max: 7,
inRange: {
color: ["#edfbfb", "#b7d6f3", "#40a9ed", "#3598c1", "#215096"]
}
},
grid: {
right: "0%",
top: "0%",
bottom: "0%",
left: "0%"
},
geo: {
roam: false,
map: "china",
top: 0,
left: "right",
bottom: 20,
label: {
emphasis: {
show: false
}
},
itemStyle: {
emphasis: {
areaColor: "#fff464"
}
},
regions: [
{
name: "南海诸岛",
value: 0,
itemStyle: {
normal: {
opacity: 0,
label: {
show: false
}
}
}
}
]
},
series: [
{
name: "mapSer",
type: "map",
geoIndex: 0,
emphasis: {
label: false
}
}
]
}
showTips(item, index) {
if (item.name === "其他") {
this.outHandle();
} else {
this.polar.geo.regions = [
{
name: item.name,
selected: true
},
{
name: "南海诸岛",
itemStyle: {
opacity: 0
}
}
];
this.$refs.vEcharts.dispatchAction({
type: "showTip",
seriesIndex: 0,
name: item.name
});
}
}
//重绘函数
showTips(item, index) {
if (item.name === "其他") {
this.outHandle();
} else {
this.polar.geo.regions = [
{
name: item.name,
selected: true
},
{
name: "南海诸岛",
itemStyle: {
opacity: 0
}
}
];
this.$refs.vEcharts.dispatchAction({
type: "showTip",
seriesIndex: 0,
name: item.name
});
}
},