<template>
<div class="xxc-map" ref="chart" id='xxc-map'>
</div>
</template>
<script>
import * as echarts from 'echarts';
export default {
props: ['myData', 'sendMapName'],
data() {
return {
optionMap: {},
myChart: null,
name: 'china',
newData: [],
isShowCity: false,
isShowBig: 'scale'
}
},
watch: {
myData(val) {
this.updateData(val);
},
sendMapName(val) {
this.init(val);
}
},
created() { console.log(this.sendMapName) },
mounted() {
setTimeout(() => {
this.init();
}, 200);
},
methods: {
init() {
this.newData = [...this.myData];
if (this.sendMapName) {
this.name = this.sendMapName
this.isShowCity = false;
// this.isShowBig = 'scale';
this.isShowBig = true;
} else {
this.name = 'china';
}
console.log(this.name)
//初始化echarts
this.myChart = echarts.init(document.getElementById('xxc-map'));
this.myChart = this.$echarts.init(this.$refs.chart);
var provinces = ['shanghai', 'hebei', 'shanxi', 'neimenggu', 'liaoning', 'jilin', 'heilongjiang', 'jiangsu', 'zhejiang', 'anhui', 'fujian', 'jiangxi', 'shandong', 'henan', 'hubei', 'hunan', 'guangdong', 'guangxi', 'hainan', 'sichuan', 'guizhou', 'yunnan', 'xizang', 'shanxi1', 'gansu', 'qinghai', 'ningxia', 'xinjiang', 'beijing', 'tianjin', 'chongqing', 'xianggang', 'aomen', 'taiwan'];
var provincesText = ['上海', '河北', '山西', '内蒙古', '辽宁', '吉林', '黑龙江', '江苏', '浙江', '安徽', '福建', '江西', '山东', '河南', '湖北', '湖南', '广东', '广西', '海南', '四川', '贵州', '云南', '西藏', '陕西', '甘肃', '青海', '宁夏', '新疆', '北京', '天津', '重庆', '香港', '澳门', '台湾'];
//调用定制参数
this.setData(this.myData);
// 把参数设置到图表里
this.myChart.setOption(this.optionMap);
// this.myChart.setOption(this.optionMap);
this.myChart.on('click', (param) => {
this.$root.$emit('changeCity', param.name);
for (var i = 0; i < provincesText.length; i++) {
if (param.name == provincesText[i]) {
//显示对应省份的方法
this.name = provinces[i];
this.mapfun(this.name);
break;
}
}
});
},
randomData() {
return Math.round(Math.random() * 500);
},
mapfun(name) {
this.newData = [];
// var url = (`echarts/map/json/province/${name}.json`);
var a = require(`../../../../node_modules/echarts/map/json/province/${name}.json`);
//注册当前省份的地图
echarts.registerMap(name, a)
a.features.forEach(item => {
this.newData.push({
name: item.properties.name,
value: this.randomData()
})
})
this.isShowCity = true;
this.isShowBig = true;
this.$echarts.dispose(this.$refs.chart);
this.setData(this.myData);
this.myChart.setOption(this.optionMap);
},
// 设置echarts配置
setData() {
//初始化echarts实例
this.myChart = echarts.init(document.getElementById('xxc-map'));
// echarts.registerMap(this.name);
this.optionMap = {
backgroundColor: '#FFFFFF',
tooltip: {
trigger: 'item',
show: false
},
//左侧小导航图标;控制地图省份的颜色
visualMap: {
show: false,
color: ['#76a2c8']
},
grid: {
top: 40, //距离容器上边界40像素
bottom: 30 //距离容器下边界30像素
},
//配置属性
series: [{
name: '数据',
type: 'map',
// map: 'china',
map: this.name,
roam: this.isShowBig, //鼠标缩放和平移漫游
selectedMode: 'single', //multiple多选single
label: {
normal: {
show: this.isShowCity, //省份名称
color: 'rgba(0,0,0,.8)',
fontSize: '100%',
align: 'center'
},
emphasis: {
show: false
}
},
itemStyle: {
normal: {
borderWidth: .5,//区域边框宽度
borderColor: '#fff',//区域边框颜色
// areaColor: "#ff6200",//区域颜色
color: '#ff6200',
},
emphasis: {//选中颜色
areaColor: "#ff6200"
}
},
data: this.newData //数据
}]
};
//使用制定的配置项和数据显示图表
this.myChart.setOption(this.optionMap);
},
// 更新数据
updateData(data) {
this.setData(data); // 设置数据
this.$echarts.dispose(this.$refs.chart);
}
}
}
</script>
<style lang="less" scoped>
/* 宽高设置成100%，保证和父盒子的高度一致*/
.xxc-map {
width: 100%;
height: 100%;
}
</style>