一、基础概念
Echarts 是由百度开源的一个数据可视化库，可以通过简单的配置实现动态可交互的数据展示。 Vue-Echarts 是 对 Echarts 的封装，使得在 Vue 项目中更加方便地使用 Echarts。
地图是 Echarts 中的一个重要模块，而中国地图是其中一个经典的实例。在 Vue 中使用中国地图需要引入 Vue-Echarts 和中国地图相关的 Javascript 文件。
二、配置基本选项
在 Vue 中使用 Echarts，需要在 vue 模板中引入 vue-echarts 组件，并传入 options 配置项，该配置项将对图表进行基础设置。可以在 options 中设置图表的主题、颜色、标题、图例等信息。
<template>
<div class="map-container">
<vue-echarts
:options="options"
:autoresize="true"
:notMerge="true"
:lazyUpdate="true"
/>
</div>
</template>
<script>
import * as echarts from 'echarts';
import china from 'echarts/map/json/province/shanghai.json';
import 'echarts/map/js/china.js';
import 'echarts/extension/bmap/bmap.js';
import 'echarts-gl';
import i18n from '@/locale';
export default {
name: 'Map',
components: {
'chart': ()=>import('echarts')
},
data: () => ({
options: {
title: {
text: i18n.t('map_title'),
left: 'center',
top: '2%',
textStyle: {
color: '#fff',
fontSize: 18,
fontWeight: '400',
fontFamily: 'MicrosoftYaHei',
lineHeight: 1.2
}
},
geo: {
map: 'china',
roam: true,
selectedMode: 'single',
label: {
emphasis: {
show: true
}
},
itemStyle: {
normal: {
areaColor: '#323c48',
borderColor: '#566f8a'
},
emphasis: {
areaColor: '#2a333d',
borderColor: '#566f8a'
}
}
},
series: [{
type: 'map',
map: 'china',
roam: false,
name: '',
data: []
}]
}
}),
mounted() {
echarts.registerMap('china', china);
}
};
</script>
三、设置地图数据
在 Vue 中使用 Vue-Echarts 进行地图数据设置，需要引入 echarts 的数据格式。下面为例子中传入的数据格式，使用数组形式表示不同省份的数据值：
{
name: '北京',
value: 0
},
{
name: '天津',
value: 0
},
{
name: '上海',
value: 0
},
{
name: '重庆',
value: 0
},
{
name: '河北',
value: 0
},
{
name: '河南',
value: 0
}
// etc.
四、使用自定义样式
在 Echarts 中设置样式可以使用 itemStyle 来进行设置，这可以帮助我们实现地图的个性化定制，比如调整颜色、边框、阴影等。下面是一个例子，设置了不同省份的颜色、边框、标签等样式。
{
name: '北京',
value: 0,
itemStyle: {
areaColor: '#2a7bff',
borderColor: '#fff',
borderWidth: 1,
shadowColor: '#fff',
shadowBlur: 10,
label: {
show: true,
textStyle: {
color: '#fff'
}
}
}
},
{
name: '河北',
value: 0,
itemStyle: {
areaColor: '#e24f48',
borderColor: '#fff',
borderWidth: 1,
shadowColor: '#fff',
shadowBlur: 10,
label: {
show: true,
textStyle: {
color: '#fff'
}
}
}
},
{
name: '河南',
value: 0,
itemStyle: {
areaColor: '#8dc63f',
borderColor: '#fff',
borderWidth: 1,
shadowColor: '#fff',
shadowBlur: 10,
label: {
show: true,
textStyle: {
color: '#fff'
}
}
}
}
五、实现点击事件
在使用 Vue-Echarts 时，可以通过自定义事件来实现地图的点击事件。下面是一个例子，当用户点击某个省份时，把该省份的数据传给后端，并进行页面跳转。
mounted() {
const chart = this.$refs.chart.echartsInstance;
const self = this;
chart.on('click', (params) => {
self.$router.push({ name: 'province', params: { provinceName: params.name } });
});
}
六、实现省市联动
在中国地图中，每个省份下可能有多个城市，需要通过省市的联动来展示每个省份的具体数据。可以在 Echarts 中使用 series 属性，来设置多个不同的 series 来呈现不同的数据。下面是一个例子，展示了浙江省的所有城市。
{
name: '杭州市',
value: 0
},
{
name: '宁波市',
value: 0
},
{
name: '温州市',
value: 0
},
{
name: '嘉兴市',
value: 0
},
{
name: '湖州市',
value: 0
},
{
name: '绍兴市',
value: 0
},
{
name: '金华市',
value: 0
},
{
name: '衢州市',
value: 0
},
{
name: '舟山市',
value: 0
},
{
name: '台州市',
value: 0
},
{
name: '丽水市',
value: 0
}
七、设置地图背景图
Echarts 中使用 BMap 进行地图渲染，可以使用 BMap 组件来设置百度地图的背景图片。下面是一个设置地图背景图的例子，使用了在百度坐标系统下的 x、y 坐标信息。
bmap: {
center: [120.13066322374, 30.240018034923],
zoom: 14,
roam: true,
mapStyle: {
styleJson: [
{
'featureType': 'land',
'elementType': 'geometry',
'stylers': {
'color': '#212121'
}
},
// ...
]
},
scaleControl: {
'show': false
}
},
