echarts:城市地图的实现

首先，到datav下载自己需要的城市json文件，datav地址如下：

阿里云 DataV - 数据可视化平台

<template><div id="map_chart" style="width: 100%;height: 600px;"></div>
</template><script>export default {name: 'CityMap',props: {msg: String},data() {return {}},// 绘制地图mounted() {this.drawMapLine()},methods: {drawMapLine() {let geoCoordMap = require('../assets/data-level.json')const convertData = function(data) {const res = []if (data[0]) {for (let i = 0; i < data.length; i++) {let geoCoord = data[i].nameif (geoCoord) {res.push({name: data[i].name,value: data[i].local.concat(data[i].code)})}}}return res}//  地图开始let Chart3 = this.$echarts.init(document.getElementById('map_chart'))const mapData = require('../assets/xiangyang.json')const name = '襄阳'this.$echarts.registerMap(name, mapData)Chart3.setOption({geo: {zoom: 1.1,map: name,aspectScale: 0.75,roam: true,label: {show: true,color: 'rgba(255, 255, 255, 0.6)',fontSize: 14},scaleLimit: {min: 1,max: 8},emphasis: {label: {color: '#fff',show: true}},itemStyle: {normal: {borderColor: 'rgba(0,0,0,0.18)',borderWidth: 1,areaColor: '#333354',shadowColor: 'rgba(0,0,0,0.13)',shadowOffsetX: 0,shadowOffsetY: 25,label: {show: true,fontWeight: 'bold',opacity: 0.54,color: 'rgba(255, 255, 255, 0.6)',letterSpacing: '12.3px',textAlign: 'right'}},emphasis: {areaColor: '#353555',borderColor: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1,[{offset: 0,color: '#f78879'},{offset: 0.5,color: '#6af651'},{offset: 1,color: '#51b3f6'}]),borderWidth: 2,label: {color: '#fff',show: false}}}},tooltip: {formatter: function(e) {// return e.data.displayname;return e.name}},series: [{type: 'scatter',showEffectOn: 'render',zoom: 1.1,symbol: 'pin',coordinateSystem: 'geo',data: convertData(geoCoordMap),symbolSize: 50,hoverAnimation: true,rippleEffect: {period: 15,scale: 4,brushType: 'fill'}}]})setTimeout(function() {window.onresize = function() {Chart3.resize();}Chart3.resize();}, 200)}}}
</script><!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped></style>

效果图：

echarts:城市地图的实现相关推荐

地图统计_博客城市访问量统计并且通过Echarts+百度地图展示
本篇讲解一下如何在Vue 中使用 Echarts + 百度地图统计博客访问量并且通过QQWry 解析 ip 地址利用Echarts 展示出来效果图如下: 1.纯真Ip地址库 QQWry 这 ...
java echarts 散点图,echarts在地图上绘制散点图（任意点）
项目需求:在省份地图上绘制散点图,散点位置不一定是哪个城市或哪个区县,即任意点通过查询官网文档,找到一个与需求类似的Demo:https://www.echartsjs.com/gallery/ed ...
数据视化Echarts+百度地图API实现市县区级下钻
开始这两天公司有个页面需要做数据可视化的展示,数据视化采用的是Echarts+百度地图API做展示,需要用到县级区级下钻的一个联动效果发现网上关于Echarts做到县区级下钻的资料很少,有的话也不是 ...
Vue+Echarts+百度地图小例子
刚学完Echarts后,看到一些官方例子,粘贴代码下来却实现不了相应的效果,经过一番了解,发现还要引入百度地图,记录详细过程如下. 1.安装echarts(使用3.x,4.x) npm install ...
获取省市区geoJson数据（精确到县、镇）用于echarts实现地图数据可视化
写在前面本文着重介绍关于获取数据的部分,如果数据处理好了,不会使用echarts将地图绘制出来,可以参考echarts的官方文档,或去搜寻大佬们的教程,或者另外问我,我再写一份我自己理解的关于ech ...
基于Echarts+百度地图+Three.js的数据可视化系统
上周重构项目数据统计部分写了几篇echarts相关的文章,重构的后台前端框架改用Vue,关于Vue中引用Echarts及可能遇到的问题的文章如下所示: VUE中使用Echarts图表 VUE父组件异步 ...
ECharts中国地图模板
2019独角兽企业重金招聘Python工程师标准>>> // 城市地图 function chinaMap() {require(['echarts','echarts/chart/ ...
pyecharts从入门到精通-地图专题Map-世界地图和中国城市地图
文章目录参考安装与查看pyecharts 地图实现-Geo 数据集查看读取数据生成中文国家名称国家中文和英文名称字典: 根据字典,生成国家中文名查看没有转换成功的国家中文有哪些过滤包含中 ...
echarts实现地图【河南】
echarts实现地图文章以河南省为例一.先下载eacherts相关js文件(echarts.min.js)和echarts使用到的地图插件(map) ecarts.min.js在echarts官 ...
Vue+Echarts+百度地图API
Vue+Echarts+百度地图API 不容易啊,又注册了一个地图账户使用npm安装方式去百度地图官网申请key,也就是地图API密钥AK 在vue项目的public文件夹中的index.html ...

echarts:城市地图的实现

echarts:城市地图的实现相关推荐

最新文章

热门文章