vue中使用echarts实现省市地图绘制，根据数据在地图上显示柱状图信息，增加涟漪特效动画效果

一、实现效果

• 使用echarts实现省市地图绘制
• 根据数据在地图显示柱状图
• 根据数据显示数据，涟漪效果

二、实现方法

1、安装echarts插件

npm install echarts --save

2、获取省市json数据

https://datav.aliyun.com/portal/school/atlas/area_selector

通过 阿里旗下的高德地图提供的api ，可以获取到中国各个省份/区级/县级的json数据，但是区级和县级，并没有包含街道和乡镇的数据。

3、本例中data 数据

本文以吉林省地图为例，来实现吉林省下所有市的柱状图显示效果。
你也可以显示中国地图或其他身份地图。原理是一样的哦。

• 定义一个容器map

• 导入插件及吉林省数据

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]
        }
    })
},

8、示例代码已上传，去顶部可下载

附全部代码

9、效果图