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

news2025/1/6 19:03:03

在这里插入图片描述

一、实现效果
  • 使用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";
  • 准备数据数据

后面这些数据是通过接口来获取的，本示例写的是静态测试数据

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、示例代码已上传，去顶部可下载

附全部代码

<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>
9、效果图

在这里插入图片描述

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/1277275.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

振南技术干货集：各大平台串口调试软件大赏（6）

振南技术干货集：各大平台串口调试软件大赏（6）

注解目录 &#xff08;串口的重要性不言而喻。为什么很多平台把串口称为 tty&#xff0c;比如 Linux、MacOS 等等&#xff0c;振南告诉你。&#xff09; 1、各平台上的串口调试软件 1.1Windows 1.1.1 STCISP &#xff08;感谢 STC 姚老板设计出 STCISP 这个软件。&#xf…
阅读更多...
安科瑞ASCP200系列 DS 型电气防火限流式保护器 充电桩配套用限流式保护 -安科瑞 蒋静

安科瑞ASCP200系列 DS 型电气防火限流式保护器 充电桩配套用限流式保护 -安科瑞 蒋静

1 概述 电气防火限流式保护器可有效克服传统断路器、空气开关和监控设备存在的短路电流大、切断短路电流 时间长、短路时产生的电弧火花大&#xff0c;以及使用寿命短等弊端&#xff0c;发生短路故障时&#xff0c;能以微秒级速度快速限制短 路电流以实现灭弧保护&#xff0…
阅读更多...
Python 重要数据类型

Python 重要数据类型

目录 列表 序列操作 列表内置方法 列表推到式 字典 声明字典 字典基本操作 列表内置方法 字典进阶使用 字典生成式 附录 列表 在实际开发中&#xff0c;经常需要将一组&#xff08;不只一个&#xff09;数据存储起来&#xff0c;以便后边的代码使用。列表就是这样的…
阅读更多...
python之logo编程

python之logo编程

Logo标志是一种视觉符号&#xff0c;代表着一个品牌、企业或组织的形象。它通常采用图形、字母或字形来代表一个公司或品牌&#xff0c;起到对徽标拥有公司的识别和推广的作用。Logo的设计需要考虑多种因素&#xff0c;例如颜色搭配、字体选择和构图等&#xff0c;以创造出独特…
阅读更多...
C#中GDI+图形图像绘制(直线、矩形、圆、椭圆、圆弧、扇形、多边形）

C#中GDI+图形图像绘制(直线、矩形、圆、椭圆、圆弧、扇形、多边形）

目录 一、直线 二、矩形 三、椭圆 四、圆 五、圆弧 六、扇形 七、多边形 八、示例源码 一、直线 调用Graphics类中的DrawLine()方法&#xff0c;结合Pen对象可以绘制直线。DrawLine()方法有以下两种构造函数。 第一种用于绘制一条连接两个Point结构的线。当参数pt1的值…
阅读更多...
Spring---更简单的存储和读取对象

Spring---更简单的存储和读取对象

文章目录 存储Bean对象配置扫描路径添加注解存储Bean对象使用类注解为什么需要五个类注解呢&#xff1f;Bean命名规则 使用方法注解重命名Bean 读取Bean对象属性注入Setter注入构造方法注入注入多个相同类型的BeanAutowired vs Resource 存储Bean对象 配置扫描路径 注&#xf…
阅读更多...
计算机网络TCP篇①

计算机网络TCP篇①

目录 一、TCP 基本信息 1.1、TCP 的头格式 1.2、什么是 TCP 1.3、什么是 TCP 连接 1.4、TCP 与 UDP 的区别 1.2、TCP 连接建立 1.2.1、TCP 三次握手的过程 1.2.2、为什么是三次握手&#xff1f;不是两次&#xff1f;四次&#xff1f;&#xff08;这个问题真是典中典&am…
阅读更多...
python自动化第二篇——合并ppt

python自动化第二篇——合并ppt

简述 python合并ppt的方法有很多&#xff0c;但网上常说的python-pptx的方法&#xff0c;我用不了&#xff0c;这里我用了一个python-office的库。但又两个缺点&#xff0c;第一个生成的文档在你的用户名下的文档里&#xff0c;第二个是名字随机。 import office import os im…
阅读更多...
2023_Spark_实验二十四：SparkStreaming读取Kafka数据源：使用Direct方式

2023_Spark_实验二十四：SparkStreaming读取Kafka数据源：使用Direct方式

SparkStreaming读取Kafka数据源&#xff1a;使用Direct方式 一、前提工作 安装了zookeeper 安装了Kafka 实验环境&#xff1a;kafka zookeeper spark 实验流程 二、实验内容 实验要求&#xff1a;实现的从kafka读取实现wordcount程序 启动zookeeper zk.sh start# zk.sh…
阅读更多...
西南科技大学模拟电子技术实验三（BJT单管共射放大电路测试）预习报告

西南科技大学模拟电子技术实验三（BJT单管共射放大电路测试）预习报告

一、计算/设计过程 说明：本实验是验证性实验，计算预测验证结果。是设计性实验一定要从系统指标计算出元件参数过程，越详细越好。用公式输入法完成相关公式内容，不得贴手写图片。（注意：从抽象公式直接得出结果，不得分，页数可根据内容调整） 二、画出并填写实验指导书上…
阅读更多...
数据结构 - 堆：TOP-K问题

数据结构 - 堆：TOP-K问题

问题描述 TOP-K问题&#xff1a;即求数据结合中前K个最大的元素或者最小的元素&#xff0c;一般情况下数据量都比较大 比如&#xff1a;专业前10名、世界500强、富豪榜、游戏中前100的活跃玩家等 对于Top-K问题&#xff0c;能想到的最简单直接的方式就是排序&#xff0c;但是&…
阅读更多...
使用drawio图表，在团队中，做计划，设计和跟踪项目

使用drawio图表，在团队中，做计划，设计和跟踪项目

使用drawio图表&#xff0c;在团队中&#xff0c;做计划&#xff0c;设计和跟踪项目 drawio是一款强大的图表绘制软件&#xff0c;支持在线云端版本以及windows, macOS, linux安装版。 如果想在线直接使用&#xff0c;则直接输入网址draw.io或者使用drawon(桌案), drawon.cn内部…
阅读更多...
六、三台主机免密登录和时钟同步

六、三台主机免密登录和时钟同步

目录 1、免密登录 1.1 为什么要免密登录 1.2 免密 SSH 登录的原理
阅读更多...
Sass 同时导出JavaScript 和 CSS变量

Sass 同时导出JavaScript 和 CSS变量

Sass 官网 安装插件 注意 sass-loader 版本没设太高&#xff0c;否则会报错 Syntax Error: TypeError: this.getOptions is not a function npm i sass sass-loader10 -D创建 Sass 文件 variables.module.scss。注意这里是 module.scss&#xff1a; 否则报错 Cant find st…
阅读更多...
安卓小程序与编译抓包

安卓小程序与编译抓包

APK小程序渗透测试 查找bp的证书 在浏览器中打开bp代理&#xff0c;然后在网页中搜索hppps://burp 点击高级——接受风险并继续 拿到证书 将浏览器信任证书 打开设置 搜索证书——查看证书 点击导入——导入证书 证书验证成功后&#xff0c;访问网页&#xff08;吾爱破解&a…
阅读更多...
linux上编写进度条

linux上编写进度条

目录 一、预备的两个小知识1、缓冲区2、回车与换行 二、倒计时程序三、编写入门的进度条四、编写一个正式的五、模拟实现和下载速度相关的进度条 一、预备的两个小知识 1、缓冲区 首先认识一下缓冲区&#xff1a;先写一个.c文件如下&#xff1a; 我们执行一下这个程序时&…
阅读更多...
windows ce Remote Process Explorer定位程序崩溃地址

windows ce Remote Process Explorer定位程序崩溃地址

windows ce Remote Process Explorer定位程序崩溃地址 一&#xff1a;下载地址二&#xff1a;使用1&#xff09;找到程序基准地址2) 定位程序异常位置 一&#xff1a;下载地址 链接&#xff1a;https://pan.baidu.com/s/1fQVBpputtRmynqa95DaPrg 提取码&#xff1a;cx65 二&a…
阅读更多...
hdlbits系列verilog解答（真值表）-50

hdlbits系列verilog解答（真值表）-50

文章目录 一、问题描述二、verilog源码三、仿真结果一、问题描述 本节我们学习用真值表来描述组合逻辑的行为，通过真值表我们将组合逻辑的每一种输入和输出对应值都罗列出来。 对于一个N个输入的布尔函数，理论上有2的N次方输入组合。下表是一个3输入的例子。 假设现在我们来…
阅读更多...
Vue---Echarts

Vue---Echarts

项目需要用echarts来做数据展示&#xff0c;现记录vue3引入并使用echarts的过程。 1. 使用步骤 安装 ECharts&#xff1a;使用 npm 或 yarn 等包管理工具安装 ECharts。 npm install echarts 在 Vue 组件中引入 ECharts&#xff1a;在需要使用图表的 Vue 组件中&#xff0c;引入…
阅读更多...
探索数据之美：深入学习Plotly库的强大可视化

探索数据之美：深入学习Plotly库的强大可视化

1. 引言&#xff1a; Plotly 是一个交互性可视化库&#xff0c;可以用于创建各种漂亮的图表和仪表板。它支持多种编程语言&#xff0c;包括Python、R、JavaScript。在Python中&#xff0c;Plotly提供了Plotly Express和Graph Objects两个主要的绘图接口。 2. Plotly库简介&am…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023