requirements are implemented, but redrawing is too stuck all the time to affect the experience.
/ / configuration
polar: {
tooltip: {
show: true,
backgroundColor: "rgba(255,255,255,.8)",
textStyle: {
color: "-sharp5a5c5e",
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:-sharp3398DB;"></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:-sharp6EC71F;"></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 -sharpe1e1e1;">${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: ["-sharpedfbfb", "-sharpb7d6f3", "-sharp40a9ed", "-sharp3598c1", "-sharp215096"]
}
},
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: "-sharpfff464"
}
},
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
});
}
},