程序员经验分享-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实现省市地图绘制，根据数据在地图上显示柱状图信息，增加涟漪特效动画效果 的相关文章

  • Prismic - 如何在不暴露访问令牌的情况下进行 API 调用

    我正在构建一个 vue js Web 应用程序 我想对我的 prismic 存储库进行相应的调用 但我不知道如何在不暴露我的访问令牌的情况下执行此操作 我正在使用所示的其余 api 方法here https prismic io docs

  • 如何在VueJS中将所有事件传递给父级

    传递道具 In VueJS如果你设置inheritAttrs to false并使用v bind attrs 您将组件中未声明的所有 props 传递给其子组件 是否有类似的方法将来自子级的所有事件传递给其父级VueJS 代码示例 Wrap

  • bootstrap-vue 与 b 表中的复选框相关的问题

    我在使复选框正常工作时遇到问题 为 选定 槽中的每一行呈现的复选框未绑定到正确的行 当您单击该复选框时 它将顶行的复选框设置为真 假位置 问题 1 如何将行复选框的真 假状态绑定到其行项目 我试图将其绑定到 data item select

  • 我需要从带有数据页的页面在组件中运行函数

    我有一个用于绘制图形或树的组件 并且我在页面中使用此组件 我的 axios 在页面上并提供数据 我需要将数据传递给组件的函数 然后从页面数据中绘制我的树 My Page

  • 在 Vue 的“选择”选项中显示来自服务器的对象列表

    我收到 grades 变量中格式正确的成绩列表 key gt value 如何使用此变量用 Vue 填充选择选项输入 我想我必须用 绑定 vue 变量 但我才刚刚开始使用 vue 我可以找到很少的基本示例

  • Vue cli 3项目，图像路径中的动态src不起作用

    我在 vue 组件中引用图像 url 例如 img alt Vue logo src statics reports logo png 这有效 但在尝试的同时 img alt Vue logo data return imgPath sta

  • VueJS 将类切换到表中的特定元素

    我似乎不知道如何在表中的特定项目上切换类 我使用 v for 循环数据并将其打印给用户 目标是当用户单击表内的特定元素时切换类 当我尝试添加 v bind class active isActive 时 它只是将该类添加到所有类中 而不是特

  • 在 docker 容器内运行 vite 开发服务器

    我有一个 Vue cli 应用程序 我正在尝试将其转换为 vite 我正在使用 Docker 来运行服务器 我看了几个教程 并让 vite 在开发模式下运行 没有错误 但是 浏览器无法访问该端口 也就是说 当我在 macbook 的命令行上

  • vue.js keyup, keydown 事件落后一个字符

    我正在使用 keydown keyup 事件 它调用一个 javascript 函数 该函数将输入框的值打印到控制台 以及事件的 currentTarget 字段的值 并且我注意到它晚了一个字符 例如 如果我输入hello进入输入框 我只看

  • Webpack 不包括 ProvidePlugins

    我正在开发一个小型试用 Web 应用程序 它使用 vue webpack 模板 https github com vuejs templates webpack https github com vuejs templates webpac

  • Vue 创建项目 - 找不到模块“vue-loader-v16/package.json”

    我通过命令全局安装了 vue clinpm install g vue cli我尝试通过命令创建新项目vue create examples vue 2一切都很好 直到我跑步npm run serve 这个命令给我一个错误找不到模块 vue

  • 媒体查询在 VueJS 样式标签中不起作用

    我正在尝试在 VueJS 组件的样式标签中使用 media media 中的样式始终有效 而不是使用宽度规则

  • 仅当内容超过两行时显示只读/隐藏按钮

    我正在创建一个评论部分 类似于 youtube 的东西 并且我希望能够在 content 有多行时显示阅读更多 隐藏按钮 这就是我到目前为止所做的 我的阅读更多 隐藏按钮可以工作 因为我添加了一个计算的线夹 使内容仅在存在多行时才显示两行

  • 覆盖 vuetify 中的 scss 变量

    为了增加 vuetify 的 v switch 的宽度 我想修改 vuetify 的 scss 变量的值 vuetify是通过vue cli配置的 开发的代码如下 src assets css overrides scss font siz

  • 如何在 Vue 中动态创建的组件上获取更新的 $refs？

    我的组件数量取决于数组数量 因此当我向数组添加新项目时 它应该创建新组件 当创建新组件时 我想获得它的参考 这就是我有误解的地方 最后添加的组件是undefined当我试图得到它时 但是 如果我在一段时间后尝试获取参考 它就会起作用 我猜这

  • Vuetify 默认轮播 CSS 选择器，用于减少过渡持续时间

    I need a transition that does not produce the dreaded image blinking for a v carousel item Ideally it s a smooth and qui

  • 使用 Vue.js 附加 HTML 元素

    所以我对此真的很陌生Vue js我想要实现的目标很简单 我试图附加这个结果Ajax请求进入我的列表 div div

  • 如何从特定索引渲染 v-for

    我想在 v for 中循环假设从数字 5 到 10 循环希望在 5 点开始并在 10 点结束 我试过这个 div div 但我想要更有效的循环方式 有谁知道如何让循环从 5 开始 对于你的例子来说是可能的 div some code her

  • vuejs 延迟加载组件，无需路由器

    vue 中的延迟加载组件使用 webpack 并不困难 https alligator io vuejs lazy loading vue cli 3 webpack https alligator io vuejs lazy loadin

  • Vuex store.watch 只接受 Vue routerguard 中的函数

    我正在尝试观察并等待 Vue 路由器防护从 Vuex 获取最终值 但它会抛出异常 vuex store watch 只接受一个函数 这是代码 const isAdmin get store getters user isAdmin unde

随机推荐

热门标签