如何用ecahrts去开发一个区域地图

我叫汪枫

于 2024-02-28 13:49:01 发布

阅读量265

点赞数 1

文章标签：前端 vue html5 echarts vue.js

本文链接：https://blog.csdn.net/weixin_47121832/article/details/136344352

版权

本文详细介绍了如何使用Echarts开发一个包含区域地图和涟漪散点图的动态示例，包括地图配置、数据处理和实时更新的代码实现。

摘要由CSDN通过智能技术生成

手把手教你用Ecahrts去开发一个区域地图

功能介绍：

涟漪图的渲染

涟漪图他是需要有多个的在series中
区域地图的渲染
地图的个性化配置

功能展示：
在这里插入图片描述

地图数据：

去我的github中取数据太大了我一放上来就特别卡

如果显示Unable to render code block 就把我的项目拉下来copy里面的数据

https://github.com/Wnagfeng/EchartsScreen/blob/main/src/components/testMap/juangshumapdata.json

源代码：

<template>
    <div class="Map" id="map">
    </div>
</template>

<script setup >
import { onMounted, onUnmounted, ref } from 'vue'
import * as echarts from 'echarts'
import data from './juangshumapdata.json'//引入我们需要渲染的数据
import cloneDeep from 'loadsh/cloneDeep'
const center = []
const OPSTION = ref({})
data.features.forEach((item) => {
    if (item.properties) {
        center.push({
            key: item.properties.name,
            value: item.properties.center
        })
    }
})
let Charts = null
const isSHowMap = () => {
    // 想要绘制一个地图我们需要使用echarts中的geo组件去绘制地图
    Charts = echarts.init(document.getElementById("map"), null, {
        renderer: 'canvas',
        useDirtyRect: false
    })
    // 第二步创建配置项
    OPSTION.value = {
        geo: [{
            map: "jiangshumap",
            zoom: 1,//初始大小
            roam: true,//是否可以放大
            scaleLimit: {//放大最大多少最小多少
                min: 0,
                max: 3
            },
            itemStyle: {//地图样式自定义
                areaColor: "#013c62",//地图填充背景
                shadowColor: "#013c62",//阴影颜色
                shadowBlur: 20,//阴影长度
                shadowOffsetX: -5,//阴影偏移
                shadowOffsetY: -5,//阴影偏移
            }
        }],
        series: [
            {
                type: "map",
                mapType: "jiangshumap",
                zoom: 1,
                roam: true,//是否可以放大
                label: {//设置地区颜色
                    show: true,
                    color: "#fff",
                    emphasis: {//鼠标移入颜色
                        color: "#fff",
                        show: true//为false就会鼠标移入不展示
                    }
                },
                itemStyle: {//板块自定义 这里的设置会覆盖geo中设置的样式
                    normal: {//鼠标不移入板块自定义
                        borderColor: "#2980b9",//板块边框颜色
                        borderWidth: 1,
                        areaColor: "#12235c"
                    },
                    emphasis: {//鼠标移入板块后自定义
                        areaColor: "#fas8c16",//板块边框颜色
                        borderWidth: 0,
                        areaColor: "green"
                    }

                },
                // 开始自定义人口数据模拟一下
                data: center.map(item => {
                    return {
                        name: item.key,
                        value: Math.random() * 100//随机生成人口数据(百万人)
                    }
                })
            },
            // 添加涟漪散点图配置
            /* 
            effectScatter
            带有涟漪特效动画的散点（气泡）图。利用动画特效可以将某些想要突出的数据进行视觉突出。
             */

            {
                /* 
               geo
               使用地理坐标系，通过 geoIndex 指定相应的地理坐标系组件。
               通过坐标去绘制一个散点图
                */
                coordinateSystem: "geo",
                type: "effectScatter",
                data: [],
                // 修改散点图配置样式
                itemStyle: {
                    color: "red"
                },
                symbolSize: 18,//修改散点大小
                label: {

                    // 鼠标不移入的展示
                    normal: {
                        show: true,//开始展示
                        position: "top",

                        formatter: function (parmas) {
                            // 这里的数据你需要在你的data中传入就ok
                            return `{title|${parmas.data.city}}\n{content|${'发生了xxx事件'}}`
                        },
                        backgroundColor: "rgba(254,174,33,.8)",
                        padding: [0, 0],
                        borderRadius: 3,
                        lineHeight: 32,
                        color: "#f7fa66",
                        /*
                      在 rich 里面，可以自定义富文本样式。利用富文本样式，可以在标签中做出非常丰富的效果。
                      https://echarts.apache.org/zh/option.html#title.textStyle.rich 
                       */
                        rich: {
                            title: {
                                padding: [0, 10, 10, 10],
                                color: "black"
                            },
                            content: {
                                padding: [10, 10, 10, 10],
                                color: "black"
                            }
                        }
                    },
                    // 鼠标移入的展示
                    emphasis: {
                        show: true,//开始展示

                    }
                }
                // 添加散点图上面的展示框

            },
            {
                /* 
               geo
               使用地理坐标系，通过 geoIndex 指定相应的地理坐标系组件。
               通过坐标去绘制一个散点图
                */
                coordinateSystem: "geo",
                type: "effectScatter",
                data: [],
                // 修改散点图配置样式
                itemStyle: {
                    color: "black"
                },
                symbolSize: 10,//修改散点大小
                label: {

                    // 鼠标不移入的展示
                    normal: {
                        show: true,//开始展示
                        position: "top",

                        formatter: function (parmas) {
                            // 这里的数据你需要在你的data中传入就ok
                            return `{title|${parmas.data.city}}\n{content|${'发生了xxx事件'}}`
                        },
                        backgroundColor: "rgba(196,174,33,.8)",
                        padding: [0, 0],
                        borderRadius: 3,
                        lineHeight: 32,
                        color: "#f7fa66",
                        /*
                      在 rich 里面，可以自定义富文本样式。利用富文本样式，可以在标签中做出非常丰富的效果。
                      https://echarts.apache.org/zh/option.html#title.textStyle.rich 
                       */
                        rich: {
                            title: {
                                padding: [0, 10, 10, 10],
                                color: "black"
                            },
                            content: {
                                padding: [10, 10, 10, 10],
                                color: "black"
                            }
                        }
                    },
                    // 鼠标移入的展示
                    emphasis: {
                        show: true,//开始展示

                    }
                }
                // 添加散点图上面的展示框

            },
            {
                /* 
               geo
               使用地理坐标系，通过 geoIndex 指定相应的地理坐标系组件。
               通过坐标去绘制一个散点图
                */
                coordinateSystem: "geo",
                type: "effectScatter",
                data: [],
                // 修改散点图配置样式
                itemStyle: {
                    color: "red"
                },
                symbolSize: 10,//修改散点大小
                label: {

                    // 鼠标不移入的展示
                    normal: {
                        show: true,//开始展示
                        position: "top",

                        formatter: function (parmas) {
                            // 这里的数据你需要在你的data中传入就ok
                            return `{title|${parmas.data.city}}\n{content|${'发生了xxx事件'}}`
                        },
                        backgroundColor: "rgba(254,19,99,.8)",
                        padding: [0, 0],
                        borderRadius: 3,
                        lineHeight: 32,
                        color: "#f7fa66",
                        /*
                      在 rich 里面，可以自定义富文本样式。利用富文本样式，可以在标签中做出非常丰富的效果。
                      https://echarts.apache.org/zh/option.html#title.textStyle.rich 
                       */
                        rich: {
                            title: {
                                padding: [0, 10, 10, 10],
                                color: "black"
                            },
                            content: {
                                padding: [10, 10, 10, 10],
                                color: "black"
                            }
                        }
                    },
                    // 鼠标移入的展示
                    emphasis: {
                        show: true,//开始展示

                    }
                }
                // 添加散点图上面的展示框

            },
        ],
        visualMap: {
            show: true,//默认就是展示
            max: 100,//标尺最大值
            seriesIndex: [0],//当我们的series中有多个数据的时候就会用到他展示多个series中的某一个数据
            inRange: {
                color: ["#bfa", "#ff6700"]//设置色块的取值范围 max 和min
            }
        }
    }
    Charts.setOption(OPSTION.value)
}
let timer = setInterval(() => {

    // 拷贝配置项
    const opstion = cloneDeep(OPSTION.value)
    for (let i = 1; i < 4; i++) {
        // 将散点中的data设置为空
        opstion.series[i].data = []
    }
    // 获取到城市数
    const cityLenght = center.length
    const randomINdex = Math.floor(Math.random() * cityLenght)
    const SeriesIndex = Math.floor(Math.random() * 3) + 1;
    opstion.series[SeriesIndex].data = [
        {
            city: center[randomINdex].key,
            value: center[randomINdex].value
        }
    ]
    OPSTION.value = opstion
    Charts.setOption(OPSTION.value)
}, 2000);
onUnmounted(() => {
    clearTimeout(timer)
})
onMounted(() => {
    echarts.registerMap("jiangshumap", data)
    isSHowMap()
})
</script>

<style scoped lang="scss">
.Map {
    width: 100%;
    height: 100%;
    background-color: aliceblue;
}
</style>