echarts中国地图及经纬度json

经纬度json地址下载

echarts简单图表使用地址

获取经纬度方法

// 查询城市经纬度
let cityMsg = {}
export function getCitySite(cityList, name='上海') {for (const item of cityList) {let flag = item.name == name;if(flag){console.log('item', item)cityMsg = item}else{if (item.children) {getCitySite(item.children, name);}}}return cityMsg
}

<template><div ref="chart" :style="{width: '100%', height: '100%'}"></div>
</template>

<script>
import * as echarts from 'echart5/core'
import china from '@/utils/china.json'
import { VisualMapComponent, GeoComponent, TooltipComponent, LegendComponent } from 'echart5/components'
import { MapChart, LinesChart, EffectScatterChart } from 'echart5/charts'
import { LabelLayout } from 'echart5/features'
import { CanvasRenderer } from 'echart5/renderers'
import cityLogLat from '@/utils/cityLogLat.json'
import {getCitySite} from '@/utils/utils'
export default {name: 'homeHeadMap',data() {return {airData: [// { name: '北京', value: 1, value1: 20, value2: 40 },  // name-省份名不可以换别的字段，value-小区数、value1-房屋数、value2-入户数字段可以换],city: [{name: '上海',    //name城市名不可以换value1: 10,     //value1-小区数字段可以换value2: 30,     //value2-房屋数字段可以换value3: 40,     //value3-入户数字段可以换},{name: '拉萨',value1: 10,value2: 30,value3: 40,}],cityData: []}},created() {echarts.use([VisualMapComponent,TooltipComponent,GeoComponent,LegendComponent,MapChart,LinesChart,EffectScatterChart,CanvasRenderer,LabelLayout])},mounted() {this.cityData = this.city.map(x=>{return {...x,value: [getCitySite(cityLogLat, x.name).log,getCitySite(cityLogLat, x.name).lat]}})this.loadChart()},methods: {loadChart(){let myChart = echarts.init(this.$refs['chart'])const option = {// 提示浮窗样式tooltip: {show: true,padding: 0,borderWidth: 1,borderColor: '#fff',backgroundColor: '#fff',textStyle: {color: '#000000',fontSize: 12,decoration: 'none',overflow: 'break'},transitionDuration: 0,trigger: 'item', //坐标轴触发，主要在柱状图，折线图等会使用类目轴的图表中使用axisPointer: {// 坐标轴指示器，坐标轴触发有效type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'},alwaysShowContent: false,triggerOn: 'mousemove',enterable: true, //鼠标是否可进入提示框浮层中formatter: function(e) {let data = e.dataif(e.componentSubType=="map"){ //判断是地图的弹框还是选重点的弹框if (data) {let context = `<div style="min-width: 180px;"><div style=" background: rgba(205,225,252,0.14);padding: 10px 19px;"><p style="color: #666;font-size:14px;line-height: 30px;">${data.name}小区数<span style="font-size: 24px;font-weight: bold;color: #FA5151;margin-left: 3px;"> ${data.value} </span>个</p></div><div style="margin: 7px 0 10px;padding: 0 19px;"><p style="color: #757575;font-size: 12px;line-height: 17px;">房屋总数(个)：<span style="font-size: 14px;color: #07B9B9;font-weight: bold;">${data.value1}</span></p><p style="color: #757575;font-size: 12px;line-height: 17px;">房屋入住(个)：<span style="font-size: 14px;color: #07B9B9;font-weight: bold;">${data.value2}</span></p></div></div>`return context}}else if(e.componentSubType=='effectScatter'){if (data) {let context = `<div style="min-width: 180px;"><div style=" background: rgba(205,225,252,0.14);padding: 10px 19px;"><p style="color: #666;font-size:14px;line-height: 30px;">${data.name}小区数<span style="font-size: 24px;font-weight: bold;color: #FA5151;margin-left: 3px;"> ${data.value1} </span>个</p></div><div style="margin: 7px 0 10px;padding: 0 19px;"><p style="color: #757575;font-size: 12px;line-height: 17px;">房屋总数(个)：<span style="font-size: 14px;color: #07B9B9;font-weight: bold;">${data.value2}</span></p><p style="color: #757575;font-size: 12px;line-height: 17px;">房屋入住(个)：<span style="font-size: 14px;color: #07B9B9;font-weight: bold;">${data.value3}</span></p></div></div>`return context}}}},//视觉映射组件(左下角)visualMap: { //分段型视觉映射组件show: false,type: 'piecewise',left: 50,bottom: 50,showLabel: true,// 是否显示拖拽用的手柄（手柄能拖拽调整选中范围）calculable: false,// 拖拽时，是否实时更新realtime: true,align: 'left',itemWidth: 10,itemHeight: 10,inverse: true,min: 0,      //最小值max: 10,     //最大值seriesIndex: [0],color: ['red', 'skyblue'],    //最小值与最大值对应的颜色//各颜色代表的区域 lt:小于; lte:小于等于; gt:大于; gte:大于等于;pieces: [{lt: 30,label: '<1个',color: '#A1DBFF'},{gt: 30,label: '>1个',color: '#3AA1FF'}]},// 地图配置geo: {//使用 registerMap 注册的地图名称map: 'china',layoutSize: '100%',aspectScale: 0.6, //长宽比,0.75的含义为宽是高的0.75,假如高为100,宽就只有75;0.5的含义就是宽只有高的一半,假如高为100,宽就只有50zoom: 1.25, //视觉比例大小,1.2即为原有大小的1.2倍//滚轮缩放的极限控制scaleLimit: {min: 1, //最小1倍max: 3 //最大3倍},roam: true, //开启缩放或者平移，可以设置成 'scale' 或者 'move'。top: '10%',label: {// 图形上的文本标签normal: {show: true,textStyle: {color: '#fff'},fontSize: '8'},// 鼠标放上去的样式emphasis: {textStyle: {color: '#fff'}}},// 地图区域的样式设置itemStyle: {normal: {borderColor: '#fff',areaColor: '#AFE0FF',borderWidth: 1},// 鼠标放上去高亮的样式emphasis: {areaColor: '#f98333',shadowOffsetX: 0,shadowOffsetY: 0,shadowBlur: 10,borderWidth: 0,shadowColor: 'rgba(0, 93, 255, 0.2)'}},//右下角小地图regions: [{name: '南海诸岛',itemStyle: {normal: {areaColor: '#AFE0FF',borderColor: '#AFE0FF',borderWidth: 1,opacity: 1,label: {show: true,color: '#009cc9'}}},label: {show: true,color: '#fff',fontSize: 12}}]},series: [{selectedMode: false, //取消地图区域点击事件geoIndex: 0,  //将数据和第0个geo配置关联在一起type: 'map',roam: true,data: this.airData,label: {show: true}},//  选重点{type: 'effectScatter',     //系列为涟漪类coordinateSystem: 'geo',showEffectOn: 'render',  //涟漪特效的触发的方式 'render'直接显示  'emphasis'hover的时候显示symbolSize: 10,    //标记的大小// rippleEffect: {    //涟漪的相关配置//   brushType: 'stroke',   //涟漪的类型 stroke填充 fill//   scale: 5,   //波纹的最大的缩放比例//   period: 4   //涟漪的扩散周期// },emphasis: {scale: false},label: {   //标签的配置normal: {formatter: '{b}',show: true,position: 'bottom',color: '#333',fontSize: 10,offset: [0, 10]   //文字偏移 [上，下]},textStyle: {color: '#757575'}},//每个点的配置itemStyle: {color: '#07B9B9'},data: this.cityData},{type: 'lines',coordinateSystem: 'geo'}]}// 地图注册，第一个参数的名字必须和option.geo.map一致echarts.registerMap('china', china)option && myChart.setOption(option)myChart.on('mouseover', function() { //取消鼠标移入地图区域高亮myChart.dispatchAction({type: 'legendUnSelect'})})}}
}
</script>

echarts中国地图及经纬度json相关推荐

【资源分享】Echarts中国地图、世界地图JSON数据（包括省市、经纬度、世界地图国家名称中英对照）
之前做数据可视化需求时需要用到中国地图和世界地图的数据,但苦于网上的资源参差不齐(谷歌和百度都一样),"历尽磨难"终于收集到了合适的资源,特地分享出来(毕竟CSDN很多免费资源居然 ...
echarts 中国地图世界地图
最近项目中用到了echarts 中国地图世界地图,特在这记录一下. world.js 下载链接(world_new.js带有中国地区名称,另一个只是用来显示中国地图) 链接:https://pan. ...
【echarts 中国地图射线版本】vue实现中国地图航线动画效果，地图上添加散点效果【详细注释，通俗易懂】
先上效果图前置条件,必看首先你需要安装echarts并引入然后你需要下载china.json文件并注册引入,不然不生效当然很多新手可能不知道china.json在哪里下载,因为官方已经没有了, ...
Echarts中国地图三级钻取
前些天发现了一个巨牛的人工智能学习网站,通俗易懂,风趣幽默,忍不住分享一下给大家.点击跳转到网站:https://www.captainai.net/dongkelun 前言最近其实一直在用Echa ...
【echarts 中国地图增加南海九段线】
echarts 中国地图增加南海九段线最近在开发echarts 中国地图时,客户提出中国地图要完整,需要增加南海九段线. 这是个政治任务,但是echarts里面的文档没有关于南海诸岛九段线的相关配置 ...
echarts 中国地图散点图渲染
准备 echarts 中国地图的json(在最后) GitHub的demo地址,可以直接拉下来先注册地图 import * as echarts from 'echarts'; import { d ...
前端jq/vue echarts中国地图的实现
一.jquery项目实现echarts中国地图 1.引入相关资源文件 jquery.echarts 等 <script src="https://cdn.bootcdn.net/aja ...
Echarts中国地图各省份区域设置不同的颜色
摘要: 接着<Echarts引入中国地图>续写,我们的项目需求是要求地图的背景颜色要各省份不同.看了文档同时也看了相关官网例子,写出来总结下吧,以便以后需要. 实现: 1.在series中 ...
Echarts中国地图背景颜色渐变
摘要:关于Echarts地图的问题,在第一篇就说过引入等相关问题(如还有疑惑请先看之前的文章传送门).地图的背景颜色如何实现渐变呢?主要利用的是Echarts中的geo和visualMap结合实现.v ...
VUE 中实现echarts中国地图人口迁徙
VUE 中实现echarts中国地图人口迁徙效果图: 安装Echarts依赖要在vue中使用Echarts 需要先安装依赖 npm install echarts --save 这是我的Echa ...

echarts中国地图及经纬度json

echarts中国地图及经纬度json相关推荐

最新文章

热门文章