vue引入echarts map地图

1.找到该市区的json文件并下载到本地

DataV.GeoAtlas地理小工具系列

2.引入echarts依赖

import * as echarts from 'echarts'

3.初始化echarts

    initMap() {var myChart = echarts.init(document.getElementById('map_1'))var data = [{ name: '高铁站', value: 155000 },   //这里的值与后面series.symbolSize属性的值有关联{ name: '中伙', value: 120000 },{ name: '火车站', value: 140000 },]var geoCoordMap = {高铁站: [113.930405, 29.726476],  //地点坐标可以在百度地图上查询中伙: [113.998687, 29.776476],火车站: [113.999176, 29.786476],}var convertData = function (data) {var res = []for (var i = 0; i < data.length; i++) {var geoCoord = geoCoordMap[data[i].name]if (geoCoord) {res.push({name: data[i].name,value: geoCoord.concat(data[i].value),})}}return res}var option = {tooltip: {trigger: 'item',//自定义修改显示formatter: function (data) {return '
电量：' + data.value[2] + '
'},},geo: {map: 'china',label: {emphasis: {show: false,},},roam: false, //禁止其放大缩小itemStyle: {normal: {areaColor: '#4c60ff',borderColor: '#002097',},emphasis: {areaColor: '#293fff',},},},series: [{name: '人流量',type: 'scatter',coordinateSystem: 'geo',data: convertData(data),symbolSize: function (val) {return val[2] / 10000},label: {normal: {position: 'outside', // 设置标签向外formatter: '{b}', // 设置标签格式position: 'right',show: true,},emphasis: {show: true,},},itemStyle: {normal: {color: '#ffeb7b',},},},],}const appData = require('./js/chibishi.json')  //本地json路径echarts.registerMap('chibishi', appData) //注册option.geo.map = 'chibishi'myChart.setOption(option)window.addEventListener('resize', function () {myChart.resize()})},

4.示意图

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！