程序员经验分享-hwhale

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

2023-12-19

在这里插入图片描述

一、实现效果
  • 使用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、效果图

在这里插入图片描述

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

echarts

vue

vuejs

前端

柱状图

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

  • 如何以编程方式添加 Vue 3 组件？

    Vue 3 没有 Vue extend 方法 因此这里的示例不起作用 https css tricks com creating vue js component instances programmatically https css t

  • 如何隔离 Vuetify 全局样式

    我已经开始在旧的现有项目中将 Vue js 与 Vuetify 结合使用 所以我没有重写所有前端 我只是导入了Vue并替换了一些部分 然后我注意到一个非常意想不到的行为 Vuetify 具有常见类的全局样式 例如 title它不仅影响整个页

  • node.js、vue.js 和express.js 堆栈开发

    我正在尝试使用 Linux 上的 Visual Studio Code IDE 使用 vue js express js 和 node js 创建一个 Web 应用程序 根据网上的一些文档 我读到安装 vue js 后 可以创建一个vue

  • 如何修复套接字 io 中的 400 错误错误请求？

    我有一个前端应用程序 VUE JS 我有一个后端 Nest JS Vue JS 应用程序使用 vue socket io extended 库通过 websockets 从后端获取数据 当 Vue JS 应用程序启动时 我在浏览器中看到错误

  • VueJS - 访问已安装的存储数据

    我无法理解以下内容 我有一个store其中包含应用程序所需的变量 特别地 有一个globalCompanies哪些商店 globalCompanies current all currentName 在另一个组件中 我想执行以下操作 mou

  • 如何在Vue中获取输入字段值

    我是 Vue 新手 我需要一些帮助来从输入字段获取值 在我的表格中 我有

  • Vue.js 更改 {{ }} 标签

    我想改变 something by 在 Vue js 中 我怎样才能实现这一点 这可能吗 我在 AngularJS 中寻找的等效项 var app angular module app function interpolateProvide

  • npm run dev 和 npm run production 之间的区别

    我对 Laravel 和 vue js 很陌生 请让我知道它们之间有什么区别npm run dev and npm run production 这和环境有关系吗 npm run dev创建源映射并且不会缩小 js css 这使得调试和查找

  • 在新窗口中打开 VueJS 组件

    我有一个只有一页的基本 VueJS 应用程序 它不是 SPA 而且我不使用 vue router 我想实现一个按钮 单击该按钮时会使用我的 Vue 组件之一的内容执行 window open 函数 查看来自的文档window open ht

  • 从组件传递数据

    我对 Vue 相当陌生 我正在尝试将数据从组件传递到视图 我不确定我是否在使用props正确的 我有一个对话框 当我保存时 我想将数据插入数据库 我也想重复使用addCustomer function 这就是为什么我没有将该函数放置在组件中

  • VueJS 中数据无法正确显示

    我的 VueJS 代码有一个小问题 在 输出 压缩的 GS1 数字链接 URI 部分中 When there is no result it should have nothing display like this I have remo

  • Vue.js 中计算属性和普通数据的区别

    我观察到 当一个正常的财产来自data 和从它派生的计算属性通过事件传递 前者保持其反应性 而后者失去它 我为其设置了以下测试用例 也作为 JSFiddle https jsfiddle net christophfriedrich b27

  • 不知道如何预览我生成的 Nuxt3 应用程序

    我刚刚在静态模式下创建了一个 Nuxt3 但我不想每次都将其推送到 Netlify 进行预览 这是我的nuxt config js 没有改变 import defineNuxtConfig from nuxt export default

  • 在重复内容区域添加

    我有一个菜单组件 简单地说 它接受一个带有一系列选项的道具 并为每个选项在菜单中呈现一个项目 我希望能够根据用例自定义每个菜单项内的标记 因此我在菜单项元素内使用了占位符 你可以在这个中看到一个例子fiddle https jsfiddle

  • Vuejs 2：去抖动不适用于手表选项

    当我在 VueJs 中反跳此函数时 如果我提供毫秒数作为原语 它就可以正常工作 但是 如果我将其提供为对 prop 的引用 它会忽略它 这是道具的缩写版本 props debounce type Number default 500 这是不

  • Vue 和 Vuex：处理依赖的计算属性

    我的应用程序是一个使用 Vuex 在 Vue 中构建的精简电子表格 关键组件是TableCollection Table and Row The TableCollection有一个包含多个的数组Table对象 每个Table有一个包含多个

  • 将 CKEditor 5 与 nuxtjs 结合使用

    我正在尝试在我的 Nuxtjs 项目中导入 CKEditor 5 的自定义版本 并且我已经尝试了所有可能的方法来正确导入它 但没有一个对我有用 这是其中之一 let ClassicEditor let CKEditor if process

  • 如何在 Vue 2 中使用 Vue 路由器

    我正在学习 Vue 并开始于网页包模板 https github com vuejs templates webpack tree master template src 我想做的第一件事是添加对 Vue Router 的支持 但我现在已经

  • 如何解决【Vue warn】：使用数组语法时 props 必须是字符串？

    我的看法是这样的 div class col md 8 div

  • 如何获取 vuejs 组件单元测试中定义的“this”变量

    我正在尝试在 npm 脚本中使用 mocha webpack 来测试 vuejs 组件 我在测试中像这样嘲笑 vuex 商店 const vm new Vue template div div

随机推荐

热门标签