|
@@ -230,6 +230,7 @@ export default {
|
|
|
var data = [],
|
|
|
geoCoordMap = {};
|
|
|
json.features.forEach((v) => {
|
|
|
+ geoCoordMap[v.properties.name] = v.properties.center;
|
|
|
data.push({
|
|
|
name: v.properties.name,
|
|
|
value: this.dataMap[v.properties.name],
|
|
@@ -253,19 +254,37 @@ export default {
|
|
|
const myChart = echarts.init(chartDom);
|
|
|
echarts.registerMap("HK", json);
|
|
|
let option = {
|
|
|
- // backgroundColor: "#041139",
|
|
|
tooltip: {
|
|
|
trigger: "item",
|
|
|
alwaysShowContent: true,
|
|
|
formatter: function (params) {
|
|
|
- return params.name + "<br/>作业数量 " + params.value;
|
|
|
+ const v = Array.isArray(params.value)
|
|
|
+ ? params.value[2]
|
|
|
+ : params.value;
|
|
|
+ return (
|
|
|
+ params.name +
|
|
|
+ "<br/>作业数量 " +
|
|
|
+ `<span class="orange">${v || 0}</span>`
|
|
|
+ );
|
|
|
},
|
|
|
},
|
|
|
+ // visualMap: {
|
|
|
+ // show: false,
|
|
|
+ // seriesIndex: [0],
|
|
|
+ // inRange: {
|
|
|
+ // color: ["#02367C", "#3a92fe"],
|
|
|
+ // },
|
|
|
+ // },
|
|
|
visualMap: {
|
|
|
- show: false,
|
|
|
+ show: true,
|
|
|
+ min: 0,
|
|
|
+ max: 20000,
|
|
|
+ left: "10%",
|
|
|
+ bottom: "10%",
|
|
|
+ calculable: true,
|
|
|
seriesIndex: [0],
|
|
|
inRange: {
|
|
|
- color: ["#02367C"],
|
|
|
+ color: ["#04387b", "#467bc0"], // 蓝绿
|
|
|
},
|
|
|
},
|
|
|
geo: [
|
|
@@ -310,7 +329,7 @@ export default {
|
|
|
borderWidth: 1,
|
|
|
},
|
|
|
emphasis: {
|
|
|
- areaColor: "#0057C9",
|
|
|
+ areaColor: "#004096",
|
|
|
},
|
|
|
},
|
|
|
select: {
|
|
@@ -325,37 +344,42 @@ export default {
|
|
|
data: data,
|
|
|
},
|
|
|
{
|
|
|
- name: "点",
|
|
|
+ name: "Top 5",
|
|
|
type: "effectScatter",
|
|
|
coordinateSystem: "geo",
|
|
|
+ data: convertData(
|
|
|
+ data
|
|
|
+ .sort(function (a, b) {
|
|
|
+ return b.value - a.value;
|
|
|
+ })
|
|
|
+ .slice(0, 10)
|
|
|
+ ),
|
|
|
+ symbolSize: function (val) {
|
|
|
+ return 10;
|
|
|
+ },
|
|
|
showEffectOn: "render",
|
|
|
rippleEffect: {
|
|
|
- period: 10,
|
|
|
- scale: 4,
|
|
|
- brushType: "fill",
|
|
|
+ brushType: "stroke",
|
|
|
},
|
|
|
hoverAnimation: true,
|
|
|
- itemStyle: {
|
|
|
+ label: {
|
|
|
+ show: false,
|
|
|
normal: {
|
|
|
- color: "#ffc600",
|
|
|
- shadowBlur: 10,
|
|
|
- shadowColor: "#5d6a4f",
|
|
|
+ formatter: "{b}",
|
|
|
+ position: "left",
|
|
|
+ show: false,
|
|
|
},
|
|
|
},
|
|
|
- label: {
|
|
|
+ itemStyle: {
|
|
|
normal: {
|
|
|
- show: false,
|
|
|
- formatter: function (parm) {
|
|
|
- return parm.value[2];
|
|
|
- },
|
|
|
- textStyle: {
|
|
|
- color: "#fff",
|
|
|
- fontSize: 12,
|
|
|
- },
|
|
|
+ color: (params) => {
|
|
|
+ const [x, y, v] = params.value;
|
|
|
+ return v ? "#44936c" : "gray";
|
|
|
+ }, //标志颜色,
|
|
|
+ shadowBlur: 5,
|
|
|
},
|
|
|
},
|
|
|
- zlevel: 6,
|
|
|
- data: convertData(data),
|
|
|
+ zlevel: 1,
|
|
|
},
|
|
|
],
|
|
|
};
|
|
@@ -409,4 +433,7 @@ export default {
|
|
|
}
|
|
|
::v-deep {
|
|
|
}
|
|
|
+.orange {
|
|
|
+ color: orange !important;
|
|
|
+}
|
|
|
</style>
|