一、实现效果
- 使用echarts实现省市地图绘制
- 根据数据显示省下市的天气图标
- 根据数据显示省下市的温度信息
二、实现方法
1、安装echarts插件
npm install echarts --save
2、获取省市json数据
https://datav.aliyun.com/portal/school/atlas/area_selector
通过 阿里旗下的高德地图提供的api ，可以获取到中国各个省份/区级/县级的json数据，但是区级和县级，并没有包含街道和乡镇的数据。
3、本例中data 数据
本文以吉林省地图为例，来实现吉林省下所有市的天气显示效果。
你也可以显示中国地图或其他省份地图。原理是一样的哦。
- 定义一个容器map
<template> <div class="map" id="map"></div> </template>
- 导入插件及吉林省数据
import * as echarts from "echarts"; import jilin from "./json/jilin.json";
- 准备天气图标图片，吉林省下所有市的天气数据
天气的图标你可以自行准备，本例仅做演示，只准备了9个图标，你可以准备更多更全的天气哦。
export default { data() { return { //天气图标图片 weatherMap: { "qing": require('@/assets/tq__1.jpg'), "qingZhuanDuoyun": require('@/assets/tq__2.jpg'), "zhongyu": require('@/assets/tq__3.jpg'), "qingZhuanZhongyu": require('@/assets/tq__4.jpg'), "zhongxue": require('@/assets/tq__5.jpg'), "leidian": require('@/assets/tq__6.jpg'), "yin": require('@/assets/tq__7.jpg'), "daxue": require('@/assets/tq__8.jpg'), "qingZhuanYin": require('@/assets/tq__9.jpg'), }, //吉林省下所有市的天气数据 testData: [ { name: '长春市', value: 'qing', min: '10', max: '20', weather: '晴' }, { name: '吉林市', value: 'qingZhuanDuoyun', min: '11', max: '15', weather: '晴转多云' }, { name: '通化市', value: 'zhongyu', min: '8', max: '12', weather: '中雨' }, { name: '四平市', value: 'qingZhuanZhongyu', min: '9', max: '19', weather: '晴转中雨' }, { name: '白山市', value: 'zhongxue', min: '-15', max: '-5', weather: '中雪' }, { name: '辽源市', value: 'leidian', min: '13', max: '17', weather: '雷电' }, { name: '白城市', value: 'yin', min: '4', max: '7', weather: '阴' }, { name: '延边朝鲜族自治州', value: 'daxue', min: '-22', max: '-12', weather: '大雪' }, { name: '松原市', value: 'qingZhuanYin', min: '10', max: '20', weather: '晴转多云' } ] }; }, }
4、自定义标签样式
主要是通过label里面的formatter和rich来自定义样式的，本例中的样式仅供参考，你可以自行定义自己想要的样式。
在 rich 里面，可以自定义富文本样式。利用富文本样式，可以在标签中做出非常丰富的效果。
label: { // 在文本中，可以对部分文本采用 rich 中定义样式。 // 这里需要在文本中使用标记符号： // `{styleName|text content text content}` 标记样式名。 // 注意，换行仍是使用 '\n'。 formatter: [ '{a|这段文本采用样式a}', '{b|这段文本采用样式b}这段用默认样式{x|这段用样式x}' ].join('\n'), rich: { a: { color: 'red', lineHeight: 10 }, b: { backgroundColor: { image: 'xxx/xxx.jpg' }, height: 40 }, x: { fontSize: 18, fontFamily: 'Microsoft YaHei', borderColor: '#449933', borderRadius: 4 }, } }
formatter介绍：
- 标签内容格式器，支持字符串模板和回调函数两种形式，字符串模板与回调函数返回的字符串均支持用 \n 换行。
- 字符串模板 模板变量有：{a}：系列名。{b}：数据名。{c}：数据值。
- 回调函数格式：(params: Object|Array) => string。参数 params 是 formatter 需要的单个数据集。
rich属性说明：
- color：文字的颜色。
- backgroundColo：文字块背景色。可以使用颜色值，例如：‘#123234’, ‘red’, ‘rgba(0,23,11,0.3)’；也可以直接使用图片，当使用图片的时候，可以使用 width 或 height 指定高宽，也可以不指定自适应。
- width：文字块的宽度。一般不用指定，不指定则自动是文字的宽度。
- height：文字块的高度。一般不用指定，不指定则自动是文字的高度。
- borderWidth：文字块边框宽度。
- borderColor：文字块边框颜色。
- borderRadius：文字块边框的圆角。
- padding：文字块的内边距。padding: [3, 4, 5, 6]：表示 [上, 右, 下, 左] 的边距。padding: 4：表示 padding: [4, 4, 4, 4]。padding: [3, 4]：表示 padding: [3, 4, 3, 4]。
5、动态定义天气图片样式
根据接口数据，来定义不同天气的图标样式
const weatherMap = this.weatherMap let tempData = this.testData tempData.forEach(item => { item.weatherImg = weatherMap[item.value] rich[item.value] = { height: 26, width: 26, backgroundColor: { image: weatherMap[item.value] } } })
6、设置标签样式
这里使用formatter回调函数的形式来定义标签的显示样式
label: { show: true, formatter: function (params) { return `{${params.data.value}|} {min|${params.data.min}℃} {max|${params.data.max}℃}\n{name|${params.name}}` }, rich: rich },
7、渲染吉林省地图
根据接口数据，显示地图
series: [ { type: 'map', zoom: 1.2, map: 'jilin', data: tempData }, ]
三、示例代码已上传，去顶部可下载
附全部代码
<template> <div class="map" id="map"></div> </template> <script> import * as echarts from "echarts"; import jilin from "./json/jilin.json"; export default { data() { return { weatherMap: { "qing": require('@/assets/tq__1.jpg'), "qingZhuanDuoyun": require('@/assets/tq__2.jpg'), "zhongyu": require('@/assets/tq__3.jpg'), "qingZhuanZhongyu": require('@/assets/tq__4.jpg'), "zhongxue": require('@/assets/tq__5.jpg'), "leidian": require('@/assets/tq__6.jpg'), "yin": require('@/assets/tq__7.jpg'), "daxue": require('@/assets/tq__8.jpg'), "qingZhuanYin": require('@/assets/tq__9.jpg'), }, testData: [ { name: '长春市', value: 'qing', min: '10', max: '20', weather: '晴' }, { name: '吉林市', value: 'qingZhuanDuoyun', min: '11', max: '15', weather: '晴转多云' }, { name: '通化市', value: 'zhongyu', min: '8', max: '12', weather: '中雨' }, { name: '四平市', value: 'qingZhuanZhongyu', min: '9', max: '19', weather: '晴转中雨' }, { name: '白山市', value: 'zhongxue', min: '-15', max: '-5', weather: '中雪' }, { name: '辽源市', value: 'leidian', min: '13', max: '17', weather: '雷电' }, { name: '白城市', value: 'yin', min: '4', max: '7', weather: '阴' }, { name: '延边朝鲜族自治州', value: 'daxue', min: '-22', max: '-12', weather: '大雪' }, { name: '松原市', value: 'qingZhuanYin', min: '10', max: '20', weather: '晴转多云' } ] }; }, created() { }, mounted() { this.drawMap() }, methods: { drawMap() { // 判断地图是否渲染 let myChart = echarts.getInstanceByDom(document.getElementById("map")) // 如果渲染则清空地图 if (myChart != null) { myChart.dispose() } // 初始化地图 myChart = echarts.init(document.getElementById("map")); echarts.registerMap("jilin", jilin) let rich = { max: { color: '#fff', backgroundColor: '#E6A23C', width: 44, height: 26, }, min: { color: '#fff', backgroundColor: '#67C23A', width: 44, height: 26, }, name: { color: '#F56C6C', height: 32 }, } const weatherMap = this.weatherMap let tempData = this.testData tempData.forEach(item => { item.weatherImg = weatherMap[item.value] rich[item.value] = { height: 26, width: 26, backgroundColor: { image: weatherMap[item.value] } } }) var option = { series: [ { type: 'map', zoom: 1.2, map: 'jilin', label: { show: true, formatter: function (params) { return `{${params.data.value}|} {min|${params.data.min}℃} {max|${params.data.max}℃}\n{name|${params.name}}` }, rich: rich }, data: tempData }, ] } myChart.setOption(option) }, }, } </script> <style scoped> .map { width: 800px; height: 600px; position: relative; } </style>
四、效果展示
