|
@@ -100,16 +100,18 @@ export default {
|
|
|
cIndex: 0,
|
|
|
oldcIndex: 0,
|
|
|
myChart: null,
|
|
|
+ getLarge9: []
|
|
|
};
|
|
|
},
|
|
|
mounted() {
|
|
|
this.getbigGetLarge9();
|
|
|
- this.echart_7();
|
|
|
+
|
|
|
},
|
|
|
methods: {
|
|
|
getbigGetLarge9(){
|
|
|
bigGetLarge9().then(res=>{
|
|
|
- console.log(res)
|
|
|
+ this.getLarge9 = res.data
|
|
|
+ this.echart_7();
|
|
|
})
|
|
|
},
|
|
|
echart_7(pam={
|
|
@@ -134,14 +136,10 @@ export default {
|
|
|
];
|
|
|
echarts.registerMap('china', geoJsonData);
|
|
|
// 指定城市和颜色
|
|
|
- var cityColors = {
|
|
|
- '北京市': '#ff7f50',
|
|
|
- '上海市': '#87cefa',
|
|
|
- '广州市': '#da70d6',
|
|
|
- '深圳市': '#32cd32',
|
|
|
- '成都市': '#6495ed',
|
|
|
- '白云区': 'red'
|
|
|
- };
|
|
|
+ var cityColors = {}
|
|
|
+ this.getLarge9.map(name=>{
|
|
|
+ cityColors[name] = "#009eff"
|
|
|
+ });
|
|
|
// 构建 series 数据
|
|
|
var seriesData = Object.keys(cityColors).map(function (city) {
|
|
|
return {
|
|
@@ -175,11 +173,11 @@ export default {
|
|
|
// 默认背景色
|
|
|
areaColor: 'rgba(0,0,0,0)',
|
|
|
// 边框颜色
|
|
|
- borderColor: '#111'
|
|
|
+ borderColor: '#096DF3'
|
|
|
},
|
|
|
emphasis: {
|
|
|
// 默认背景色
|
|
|
- areaColor: 'red'
|
|
|
+ areaColor: '#7024fb'
|
|
|
}
|
|
|
},
|
|
|
regions: [
|
|
@@ -211,17 +209,62 @@ export default {
|
|
|
that.myChart.on('click', function (params) {
|
|
|
var cityName = params.name;
|
|
|
if (cityColors[cityName]) {
|
|
|
- seriesData.forEach(function (city) {
|
|
|
- if (city.name === cityName) {
|
|
|
- city.itemStyle.normal.areaColor = '#ffcc33'; // 设置点击后的颜色
|
|
|
- }
|
|
|
- });
|
|
|
- that.myChart.setOption({
|
|
|
- series: [{
|
|
|
- data: seriesData
|
|
|
- }]
|
|
|
- });
|
|
|
+ var seriesData = Object.keys(cityColors).map(function (city) {
|
|
|
+ return {
|
|
|
+ name: city,
|
|
|
+ itemStyle: {
|
|
|
+ areaColor: cityName === city ? "#7024fb" : null,
|
|
|
+ normal: {
|
|
|
+ areaColor: cityName === city ? "#7024fb" : cityColors[city],
|
|
|
+ borderColor: 'rgba(0,0,0,0)'
|
|
|
+ },
|
|
|
+ emphasis: {
|
|
|
+ areaColor: cityName === city ? "#7024fb" : cityColors[city],
|
|
|
+ borderColor: 'rgba(0,0,0,0)'
|
|
|
+ }
|
|
|
+ }
|
|
|
+ };
|
|
|
+ })
|
|
|
+ }else{
|
|
|
+ var seriesData = Object.keys({...cityColors, [cityName]:"#7024fb"}).map(function (city) {
|
|
|
+ return {
|
|
|
+ name: city,
|
|
|
+ itemStyle: {
|
|
|
+ areaColor: cityName === city ? "#7024fb" : null,
|
|
|
+ normal: {
|
|
|
+ areaColor: cityName === city ? "#7024fb" : cityColors[city],
|
|
|
+ borderColor: 'rgba(0,0,0,0)'
|
|
|
+ },
|
|
|
+ emphasis: {
|
|
|
+ areaColor: cityName === city ? "#7024fb" : cityColors[city],
|
|
|
+ borderColor: 'rgba(0,0,0,0)'
|
|
|
+ }
|
|
|
+ }
|
|
|
+ };
|
|
|
+ })
|
|
|
}
|
|
|
+ that.myChart.setOption({
|
|
|
+ geo: {
|
|
|
+ regions: [
|
|
|
+ ...seriesData,
|
|
|
+ {
|
|
|
+ name: "南海诸岛",
|
|
|
+ itemStyle: {
|
|
|
+ // 隐藏地图
|
|
|
+ normal: {
|
|
|
+ opacity: 0, // 为 0 时不绘制该图形
|
|
|
+ }
|
|
|
+ },
|
|
|
+ label: {
|
|
|
+ show: false // 隐藏文字
|
|
|
+ }
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ },
|
|
|
+ series: [{
|
|
|
+ data: seriesData
|
|
|
+ }]
|
|
|
+ });
|
|
|
});
|
|
|
})
|
|
|
},
|