一、实现效果
- 使用echarts实现省市地图绘制，你也可以绘制全国地图。
- 根据数据在地图显示柱状图，根据经纬度实现定位。
- 根据数据显示数据，涟漪动态效果。
- 当然你也可以根据你自己的需求，增删效果哦。
二、实现方法
1、安装echarts插件
npm install echarts --save
2、获取省市json数据
https://datav.aliyun.com/portal/school/atlas/area_selector
通过 阿里旗下的高德地图提供的api ，可以获取到中国各个省份/区级/县级的json数据，但是区级和县级，并没有包含街道和乡镇的数据。
3、本例中data 数据
本文以吉林省地图为例，来实现吉林省下所有市的柱状图显示效果。
你也可以显示中国地图或其他身份地图。原理是一样的哦。
- 定义一个容器map，最好是定义一个是ID名字的
<template> <div class="map" id="map"></div> </template>
- 导入插件及吉林省数据，如果你是其他省份的，或全国的，一样的导入哦。
import * as echarts from "echarts"; import jilin from "./json/jilin.json";
- 准备数据数据
后面这些数据是通过接口来获取的，本示例写的是静态测试数据，我这里是前端提前查询号的。你也可以自己查询。
export default { data() { return { //城市坐标数据 geoCoordMap: { "长春市": [125.31787, 44.05534], "吉林市": [126.68595, 43.85034], "通化市": [125.76539, 41.68568], "四平市": [124.02419, 43.48220], "白山市": [127.15109, 42.00513], "辽源市": [125.15042, 42.89406], "白城市": [122.83774, 45.07098], "延边朝鲜族自治州": [129.01009, 42.79950], "松原市": [124.55833, 44.94686], }, //吉林省下所有市的测试数据 testData: [ { name: '长春市', value: '80', }, { name: '吉林市', value: '70', }, { name: '通化市', value: '60', }, { name: '四平市', value: '50', }, { name: '白山市', value: '90', }, { name: '辽源市', value: '30', }, { name: '白城市', value: '40', }, { name: '延边朝鲜族自治州', value: '30', }, { name: '松原市', value: '20', } ] }; }, }
4、吉林省地图的绘制
geo：地理坐标系组件。用于地图的绘制，支持在地理坐标系上绘制散点图，线集。geo 区域的颜色也可以被 map series 所控制。
ECharts 可以使用 GeoJSON 格式的数据作为地图的轮廓，你可以获取第三方的 GeoJSON 数据注册到 ECharts 中。
geo: [ { map: 'jilin', zoom: 1.2, // 默认显示级别 itemStyle: { //设置地图板块配置选项 normal: { // 图形的描边颜色 borderColor: '#55aaff', // 描边线宽。 borderWidth: 1, // 柱条的描边类型。 borderType: 'solid', areaColor: '#083D7E', }, // // 鼠标放上去后，样式改变 emphasis: { // 图形的描边颜色 borderColor: '#1DF9FC', borderWidth: '2', // 阴影色 areaColor: '#3099E2', }, }, label: { show: false, formatter: '', }, }, ],
geo属性说明：
- map：使用 registerMap 注册的地图名称。
- zoom：当前视角的缩放比例。
- itemStyle：地图区域的多边形 图形样式。
- emphasis：高亮状态下的多边形和标签样式。
- label：图形上的文本标签，可用于说明图形的一些数据信息，比如值，名称等。
5、柱状图样式
柱状图是利用3个样式层叠实现的。
1、顶部椭圆样式：type: ‘lines’
2、中部矩形样式：type: ‘scatter’
3、底部椭圆样式：type: ‘scatter’
type: 'lines', zlevel: 5, effect: { show: false, symbolSize: 5 // 图标大小 }, lineStyle: { width: 20, // 尾迹线条宽度 color: 'rgb(22,255,255, .6)', opacity: 1, // 尾迹线条透明度 curveness: 0 // 尾迹线条曲直度 },
6、设置柱状底部涟漪特效样式
带有涟漪特效动画的散点（气泡）图。利用动画特效可以将某些想要突出的数据进行视觉突出。
涟漪特效相关配置见下方代码注释。
type: 'effectScatter', rippleEffect: { //涟漪特效相关配置 period: 4, //动画的周期，秒数，值越小速度越快 brushType: "stroke", //波纹的绘制方式，可选 'stroke' 和 'fill' scale: 2, //动画中波纹的最大缩放比例，值越大波纹越大 4 color: 'rgb(22,255,255, 1)',//涟漪的颜色 number: 2//波纹的数量 },
7、数据处理
根据接口数据，及经纬度坐标处理数据。
- 动态计算柱形图的高度
lineMaxHeight() { const maxValue = Math.max(...this.testData.map(item => item.value)) return 0.9 / maxValue },
- 柱状体的主干数据
lineData() { let {testData,geoCoordMap} = this return testData.map((item) => { return { coords: [geoCoordMap[item.name], [geoCoordMap[item.name][0], geoCoordMap[item.name][1] + item.value * this.lineMaxHeight()]] } }) },
- 柱状体的顶部
scatterTopData() { let {testData,geoCoordMap} = this return testData.map((item) => { return [geoCoordMap[item.name][0], geoCoordMap[item.name][1] + item.value * this.lineMaxHeight(), item.value] }) },
- 柱状体的底部
scatterBottomData() { let {testData,geoCoordMap} = this return testData.map((item) => { return { name: item.name, value: geoCoordMap[item.name] } }) },
三、示例代码已上传，去顶部可下载
附全部代码
<template> <div class="map" id="map"></div> </template> <script> import * as echarts from "echarts"; import jilin from "@/json/jilin.json"; export default { data() { return { geoCoordMap: { "长春市": [125.31787, 44.05534], "吉林市": [126.68595, 43.85034], "通化市": [125.76539, 41.68568], "四平市": [124.02419, 43.48220], "白山市": [127.15109, 42.00513], "辽源市": [125.15042, 42.89406], "白城市": [122.83774, 45.07098], "延边朝鲜族自治州": [129.01009, 42.79950], "松原市": [124.55833, 44.94686], }, testData: [ { name: '长春市', value: '80', }, { name: '吉林市', value: '70', }, { name: '通化市', value: '60', }, { name: '四平市', value: '50', }, { name: '白山市', value: '90', }, { name: '辽源市', value: '30', }, { name: '白城市', value: '40', }, { name: '延边朝鲜族自治州', value: '30', }, { name: '松原市', value: '20', } ] }; }, 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) var option = { geo: [ { map: 'jilin', zoom: 1.2, // 默认显示级别 itemStyle: { //设置地图板块配置选项 normal: { // 图形的描边颜色 borderColor: '#55aaff', // 描边线宽。 borderWidth: 1, // 柱条的描边类型。 borderType: 'solid', areaColor: '#083D7E', }, // // 鼠标放上去后，样式改变 emphasis: { // 图形的描边颜色 borderColor: '#1DF9FC', borderWidth: '2', // 阴影色 areaColor: '#3099E2', }, }, label: { show: false, formatter: '', }, }, ], series: [ // 柱状体的主干 { type: 'lines', zlevel: 5, effect: { show: false, symbolSize: 5 // 图标大小 }, lineStyle: { width: 20, // 尾迹线条宽度 color: 'rgb(22,255,255, .6)', opacity: 1, // 尾迹线条透明度 curveness: 0 // 尾迹线条曲直度 }, silent: true, data: this.lineData() }, // 柱状体的顶部 { type: 'scatter', coordinateSystem: 'geo', geoIndex: 0, zlevel: 5, label: { show: true, formatter: function (e) { return `数值：${e.data[2]}` }, position: "top" }, symbol: 'circle', symbolSize: [20, 10], itemStyle: { color: 'rgb(22,255,255, 1)', opacity: 1 }, silent: true, data: this.scatterTopData() }, // 柱状体的底部 { type: 'scatter', coordinateSystem: 'geo', geoIndex: 0, zlevel: 4, label: { // 这儿是处理的 formatter: '{b}', position: 'bottom', color: '#fff', fontSize: 12, distance: 10, show: true }, symbol: 'circle', symbolSize: [20, 10], itemStyle: { // color: '#F7AF21', color: 'rgb(22,255,255, 1)', opacity: 1 }, silent: true, data: this.scatterBottomData() }, // 底部外框 { type: 'effectScatter', rippleEffect: { //涟漪特效相关配置 period: 4, //动画的周期，秒数，值越小速度越快 brushType: "stroke", //波纹的绘制方式，可选 'stroke' 和 'fill' scale: 2, //动画中波纹的最大缩放比例，值越大波纹越大 4 color: 'rgb(22,255,255, 1)',//涟漪的颜色 number: 2//波纹的数量 }, coordinateSystem: 'geo', geoIndex: 0, zlevel: 4, label: { show: false }, symbol: 'circle', symbolSize: [40, 20], itemStyle: { color: { type: 'radial', x: 0.5, y: 0.5, r: 0.5, colorStops: [ { offset: 0, color: 'rgb(22,255,255, 0)' // 0% 处的颜色 }, { offset: .74, color: 'rgb(22,255,255, 0)' // 100% 处的颜色 }, { offset: .75, color: 'rgb(22,255,255, 1)' // 100% 处的颜色 }, { offset: 1, color: 'rgb(22,255,255, 1)' // 100% 处的颜色 } ], }, }, data: this.scatterBottomData() } ] } myChart.setOption(option) }, // 动态计算柱形图的高度 lineMaxHeight() { const maxValue = Math.max(...this.testData.map(item => item.value)) return 0.9 / maxValue }, // 柱状体的主干 lineData() { let {testData,geoCoordMap} = this return testData.map((item) => { return { coords: [geoCoordMap[item.name], [geoCoordMap[item.name][0], geoCoordMap[item.name][1] + item.value * this.lineMaxHeight()]] } }) }, // 柱状体的顶部 scatterTopData() { let {testData,geoCoordMap} = this return testData.map((item) => { return [geoCoordMap[item.name][0], geoCoordMap[item.name][1] + item.value * this.lineMaxHeight(), item.value] }) }, // 柱状体的底部 scatterBottomData() { let {testData,geoCoordMap} = this return testData.map((item) => { return { name: item.name, value: geoCoordMap[item.name] } }) }, }, } </script> <style scoped> .map { width: 800px; height: 600px; position: relative; } </style>
四、效果展示
