vue中使用echarts实现中国地图加城市定位功能

最新推荐文章于 2024-09-10 18:30:47 发布

橘哥哥

最新推荐文章于 2024-09-10 18:30:47 发布

阅读量2.6k

点赞数

分类专栏：前端文章标签： echarts 中国地图

本文链接：https://blog.csdn.net/ju__ju/article/details/104013877

版权

前端专栏收录该内容

50 篇文章 2 订阅

订阅专栏

在这里插入图片描述
首先这个是承接上个博客中创建的china.json,并在main.js的注册一下.

initCityDataPic () {
            let obj = dark
            this.$echarts.registerTheme('dark', obj)
            //上面的两段是我自己设置的暗色系主题，不需要可以注释掉
            let dom = this.$refs.cityDataPic
            let myChart = this.$echarts.init(dom, dark) //没有主题就把dark删掉
            // console.log(geo)
            myChart.setOption({
                geo: {     // 
                    map: 'china',    //此处的china就是之前博客中全局注册的china地图
                    itemStyle: { // 定义样式
                        normal: { // 普通状态下的样式
                            areaColor: '#2D4455',  //地图块的颜色
                            borderColor: '#243440'
                        },
                        emphasis: { // 高亮状态下的样式
                            areaColor: '#1DB47E',
                            shadowOffsetX: 0,
                            shadowOffsetY: 0,
                            shadowBlur: 20,
                            borderWidth: 0,
                            // shadowColor: 'rgba(0, 0, 0, 0.5)'
                            shadowColor: 'white'
                        }
                    }
                },
                tooltip: {},
                legend: {
                    orient: 'vertical',
                    left: 'left',
                    data: ['']
                },
                selectedMode: 'single',  //单选
                series: [
                    {
                        name: '',
                        type: 'scatter',    //散点系列
                        coordinateSystem: 'geo',    //表明坐标系
                        center: [115.97, 29.71],  /地图中心点
                        itemStyle: {
                            normal: {
                                color: '#1DB47E',
                                label: {
                                    show: false,
                                    formatter: '{b}',
                                    position: 'right',
                                    textStyle: {
                                        color: "#fff"
                                    }
                                }
                            },
                            emphasis: {
                                label: {
                                    show: true
                                }
                            }
                        },
                        label: {
                            show: false
                        },
                        data: [
                            { name: '北京', value: [116.46, 39.92, 666] },   //数据格式
                            { name: '天津', value: [117.19, 39.08, 123] },
                            { name: '上海', value: [121.47, 31.23, 333] },
                            { name: '武汉市', value: [114.3, 30.5, 321] },
                            { name: '唐山', value: [118.02, 39.63], }
                        ]
                    }
                ]
            })
        }