|
@@ -293,13 +293,20 @@ export default {
|
|
},
|
|
},
|
|
mapHeatData: {
|
|
mapHeatData: {
|
|
handler(val) {
|
|
handler(val) {
|
|
|
|
+ // const maxValue = (Math.max(val.map(item => parseFloat(item.value))) / 5)
|
|
|
|
+ // console.log('11111', val.map(item => item.value), maxValue)
|
|
if (val.length > 0) {
|
|
if (val.length > 0) {
|
|
this.mapChart.setOption({
|
|
this.mapChart.setOption({
|
|
series: [
|
|
series: [
|
|
{
|
|
{
|
|
- data: val.map(item => ({...item, label: {
|
|
|
|
- color: item.value > 100 ? '#fff' : '#000'
|
|
|
|
- }}))
|
|
|
|
|
|
+ data: val.map(item => ({...item,
|
|
|
|
+ label: {
|
|
|
|
+ color: item.value > 100 ? '#fff' : '#000'
|
|
|
|
+ },
|
|
|
|
+ // itemStyle: {
|
|
|
|
+ // color: this.itemColor(item.value, maxValue)
|
|
|
|
+ // }
|
|
|
|
+ }))
|
|
}
|
|
}
|
|
]
|
|
]
|
|
})
|
|
})
|
|
@@ -346,13 +353,39 @@ export default {
|
|
|
|
|
|
return res;
|
|
return res;
|
|
},
|
|
},
|
|
|
|
+ itemColor(val, max) {
|
|
|
|
+ if (val < max) {
|
|
|
|
+ return "#e0f3f8";
|
|
|
|
+ } else if (val < max * 2) {
|
|
|
|
+ return "#abd9e9";
|
|
|
|
+ } else if (val < max * 3) {
|
|
|
|
+ return "#74add1";
|
|
|
|
+ } else if (val < max * 4) {
|
|
|
|
+ return "#4575b4";
|
|
|
|
+ } else {
|
|
|
|
+ return "#313695";
|
|
|
|
+ }
|
|
|
|
+ },
|
|
drawMap() {
|
|
drawMap() {
|
|
const mapChart = this.$refs.map;
|
|
const mapChart = this.$refs.map;
|
|
echarts.registerMap("chongqing", this.activeMap);
|
|
echarts.registerMap("chongqing", this.activeMap);
|
|
|
|
|
|
- let data = this.heatData.map(item => ({...item, label: {
|
|
|
|
- color: item.value > 100 ? '#fff' : '#000'
|
|
|
|
- }}));
|
|
|
|
|
|
+ // const maxValue = Math.max(this.heatData.map(item => parseFloat(item.value))) / 5
|
|
|
|
+
|
|
|
|
+ // '#313695',
|
|
|
|
+ // '#4575b4',
|
|
|
|
+ // '#74add1',
|
|
|
|
+ // '#abd9e9',
|
|
|
|
+ // '#e0f3f8'
|
|
|
|
+
|
|
|
|
+ let data = this.heatData.map(item => ({...item,
|
|
|
|
+ label: {
|
|
|
|
+ color: item.value > 100 ? '#fff' : '#000'
|
|
|
|
+ },
|
|
|
|
+ // itemStyle: {
|
|
|
|
+ // color: this.itemColor(item.value, maxValue)
|
|
|
|
+ // }
|
|
|
|
+ }));
|
|
|
|
|
|
const { mapName } = this;
|
|
const { mapName } = this;
|
|
|
|
|
|
@@ -485,9 +518,10 @@ export default {
|
|
textStyle: {
|
|
textStyle: {
|
|
color: "#000",
|
|
color: "#000",
|
|
},
|
|
},
|
|
|
|
+ extraCssText: "z-index: 1000;"
|
|
},
|
|
},
|
|
visualMap: {
|
|
visualMap: {
|
|
- show: false,
|
|
|
|
|
|
+ show: true,
|
|
bottom: 20,
|
|
bottom: 20,
|
|
left: 10,
|
|
left: 10,
|
|
inRange: {
|
|
inRange: {
|