vue中使用echarts實作中國地圖加城市定位功能

首先這個是承接上個部落格中建立的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], }
                        ]
                    }
                ]
            })
        }