Echarts地图的基本使用方法
echarts使用地图的基本使用方法
引入echarts
第一步：引入js文件
下载的最新完整版本 echarts.min.js 即可
<script src="echarts.min.js"> </script>
第二步：指定DOM元素作为图表容器
创建一个DOM来作为绘制图表的容器
<div id="main" ref="main" style="width=100%; height = 400px"></div>
使用echarts进行初始化
var myChart = echarts.init(document.getElementById('main'));
var myChart = echarts.init(this.$refs.main);
第三步：配置参数
option={...}//配置项
myChart.setOption(option) // 使用刚指定的配置项和数据显示图表。
引入地图底图
echarts现支持使用geoJSON及svg的形式引入
1、GeoJSON引入
导入标准的GeoJSON 格式的数据
//GeoJSON格式
{"type": "Feature","geometry": {"type": "MultiPolygon","coordinates": [[[[112.52172,22.607262],[112.515742,22.626617],....]]]},"properties": {"name": "Dinagat Islands",.... //其他字段}
}
获取途径：
获取GeoJSON数据
可以获得2种JSON数据，xxx.json和xxx_full.json。
区别在于xxx.json只有当前行政区的轮廓数据，xxx_full.json包含子行政区的数据。
China_full.json China.json自定义GeoJSON数据教程 通过修改地图的GeoJSON数据来自定义地图底图
引入方法：
echarts.registerMap('china', {geoJSON: geoJson}); //注册可用的地图，只在 geo 组件或者 map 图表类型中使用。
option={ series: [{name: '中国地图',type: 'map',mapType: 'china', // 自定义扩展图表类型}]
}
2、SVG 引入（从 v5.1.0 开始）
echarts.registerMap('svgName', {svg: svg});
3、使用百度/高德 其他地图
除了自定义的地图底图，还可使用线上的地图。
可参考示例
- 引入方式
<script type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&ak=你的AK"></script>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/extension/bmap.min.js"></script>
//如果是在vue下载了echarts组件 也可以通过require引入 插件会自动注册相应的组件。
require('echarts');
require('echarts/extension/bmap/bmap');
- 使用
option={// 加载 bmap 组件bmap: {center: [120.13066322374, 30.240018034923], // 百度地图中心经纬度zoom: 14, // 百度地图缩放roam: true, // 是否开启拖拽缩放，可以只设置 'scale' 或者 'move'mapStyle: {} // 百度地图的自定义样式，见 http://developer.baidu.com/map/jsdevelop-11.htm},series:[{type: 'line',coordinateSystem: 'bmap', // 使用百度地图坐标系// 数据格式跟在 geo 坐标系上一样，每一项都是 [经度，纬度，数值大小，其它维度...]data: [ [120, 30, 1] ]....}]
}// 获取百度地图实例，使用百度地图自带的控件
var bmap = chart.getModel().getComponent('bmap').getBMap();
bmap.addControl(new BMap.MapTypeControl());
地图展示
1、点特效
- 打点 参考配置
series : [{name: '打点',type: 'effectScatter',coordinateSystem: 'bmap',data: [{name: '海门', value: [121.15, 31.89, 9]},{name: '鄂尔多斯', value:[109.781327, 39.608266, 12]}],encode: { //用哪个纬度的数据项value: 2},// ECharts 提供的标记类型包括: 'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow', 'none' 可以通过 'image://url' 设置为图片，其中 URL 为图片的链接，或者 dataURI。symbol: 'image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7',symbolSize: function (val) {return val[2] / 10;},//配置何时显示特效。可选：'render' 绘制完成后显示特效。'emphasis' 高亮（hover）的时候显示特效。showEffectOn: 'emphasis',//涟漪特效相关配置。rippleEffect: {brushType: 'stroke'},hoverAnimation: true,label: {formatter: '{b}',position: 'right',show: true},itemStyle: {color: '#f4e925',shadowBlur: 10,shadowColor: '#333'},zlevel: 1
}]
- 其他方法
在series:[]里面注入label标签，设定样式（包含引入图片）；
series : [{label: {normal: {show: true,formatter:function(val){var area_content ='{b|'+val.name+'}'+'-'+'{a|'+val.value+'}';return area_content.split("-").join("\n");},itemStyle:{emphasis:{label:{show:true}},normal: {borderColor: 'rgba(151, 168, 151, 1)',areaColor: 'rgba(151, 168, 151, 1)',borderWidth: 2,},},rich: {a: {color: '#333',padding: 0,},b: {height: 32,color: '#fff',align:"center",fontSize: 13,padding: [0, 0, -3, 6],backgroundColor: {image:'https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=3395977486,1425992975&fm=26&gp=0.jpg'},},},},},
}]
2、线特效
参考配置
var busLines=[{coords:[[116.397128, 39.916527],[121.48941, 31.40527]],lineStyle:{normal: {color: "#f1f313"}}},{coords:[[116.397128, 39.916527],[111.00189, 34.2198944]],lineStyle:{normal: {color: "#f1f313"}}}]option = {bmap: {center: [116.46, 39.92],zoom:5,roam: true, },series: [{type: 'lines',coordinateSystem: 'bmap',polyline:false,// polyline: true,data: busLines,silent: true,lineStyle: {// color: '#c23531',// color: 'rgb(200, 35, 45)',opacity: 0.5,width: 2,curveness :0.2},progressiveThreshold: 500,progressive: 200}, {type: 'lines',coordinateSystem: 'bmap',polyline: false,data: busLines,lineStyle: {width: 0,curveness :0.2},effect: {constantSpeed: 50,show: true,trailLength: 0.7,symbolSize: [3, 10],color :'rgb(255, 255, 255)'},zlevel: 1}]});3、聚合打点
如果要用echart实现地图聚合打点，需结合在线地图，然后对每次的放大缩小事件都请求数据回来，再打点到地图上。（示例）
4、地图下钻
原理：其实就是每次点击后切换另一个地图
点击 --> 加载响应的json数据以及data数据 --> 注册新的地图，修改option --> setOption应用配置项
this.initEcharts(GdGeoJson,'440000',[])//给地图添加监听事件
this.myChart.on('click', params => {let clickRegionCode = params.data.cityCode;this.getGeoJson(clickRegionCode).then(regionGeoJson => this.initEcharts(regionGeoJson.data, params.data.cityCode)).catch(err => {this.getGeoJson('440000').then(GdGeoJson=>this.initEcharts(GdGeoJson.data, '440000'))})
})
},initEcharts(geoJson, name) {this.$echarts.registerMap(name, geoJson);//修改optionoption.series[0].mapType=nameoption.series[0].data=this.mapDatathis.myChart.setOption(option)
},//获取地图json数据
async getGeoJson(jsonName) {return await this.$axios.get("/geoJson/" + jsonName + ".json")
},
5、多个geo同步进行缩放拖曳
myChart.on('georoam', function (params) {var option = myChart.getOption();if (params.zoom != null && params.zoom != undefined) { //捕捉到缩放时option.geo[1].zoom = option.geo[0].zoom;option.geo[1].center = option.geo[0].center;} else {//捕捉到拖曳时option.geo[1].center = option.geo[0].center;}myChart.dispatchAction({type: 'restore'})myChart.setOption(option);//设置option});
超级彩蛋
Echarts地图的基本使用方法相关推荐
- Echarts实现省级地图的两种方法（以浙江省为例）
Echarts实现省级地图的两种方法(以浙江省为例) 在echarts调用地图时,我们往往会使用GeoJson格式的数据,根据网上的资料,会发现官网会提供世界.中国以及各省的数据.但是,访问下载最新的 ...
- Echarts地图 绘制自定义区域 - geojson.io使用方法
Echarts地图 绘制自定义区域 & 解决区域点击无效 1. 绘制地图自定义区域 需求:绘制带高新区的河源市地图,目前百度地图json还没有此新区.需手动绘制. STEP1:获取市区json ...
- Echarts 地图隐藏右下角 “南海诸岛” 的方法
1.需求: Echarts 地图右下角 "南海诸岛" 在项目中有点多余,需要隐藏 2.查询 Echarts 官网配置项,发现修改属性 "geo.regions" ...
- html海南地图插件,Echarts 地图（map）插件之 鼠标HOVER和tooltip自定义数据
在项目开发中,有需要用到地图的地方,百度的echarts地图插件就是个不错的选择, 这里总结一下地图自定义鼠标HOVER时的事件和自定义tooltip数据: 一.鼠标HOVER时的事件: 参照官方文档 ...
- Vue+Echarts地图消失（高度变成0）的完美解决方案
地图消失了! 最近项目突然发现了一个奇怪的问题,当且到别的页面之后停留一会(20min+),首页的Echarts地图就会消失掉,而且还不一定复现,好不容易复现了一次,查看元素发现地图的容器.svg元素 ...
- Echarts地图自定义图标Symbol同时动态更改图标进行切换显示
Echarts地图自定义图标Symbol同时动态更改图标进行切换显示 文章目录 0.前言 1.引用模块 2.界面设计 3.数据准备 4.实例地图 5.动态修改气泡图标 6.结束语 0.前言 实现的效果 ...
- Vue 使用echarts 地图自定义图标和修改图标样式，点击切换图标
效果图:如下 注意事项: 1.使用echarts最好看官方文档,官方文档(链接如下) https://echarts.apache.org/examples/zh/index.html#chart-t ...
- ECharts地图使用
ECharts地图使用 最近项目开发中用到了ECharts地图,感觉ECharts地图美观炫酷,所 ...
- echarts地图学习（使用geoJson数据绘制地图）
参考文档 使用echarts完成中国省市区县镇地图展示 echarts地图(中国地图展示各省数据) echarts实现中国地图区域分布图 vue + echarts 利用echarts中的map地图中 ...
- Echarts 地图使用，以及tooltip轮播使用
一,首先下载Echarts npm install echarts --save 二,引入Echarts 全局引入main.js中 // echarts-4.0 import echarts from ...
最新文章
- 华为魔术手机拆机图解_华为P40 Pro上手体验
- 2020年人工神经网络第二次作业-参考答案第三题
- faiss简介及示例
- html5 canvas画进度条
- dos拼接字符串以及截取字符串
- nginx rewrite规则和参考
- codesys 串口通讯实例_常见的PLC程序实例，车库自动门的PLC控制！
- 前端学习：Vue.js基本使用
- socket python udp_python-socket UDP
- C# WPD PortableDeviceApiLib获取便携设备列表
- Android程序开发初级教程(一)
- 当滚动条滚动到页面底部自动加载增加内容 ajax,Selenium-完整的ajax加载自动滚动到页面底部...
- 对特殊字符编码js与c#中的处理方法
- python3的字符串操作
- 纯干货，PSI 原理解析与应用
- w ndows7与windows10区别,windows7和10区别
- input主动获取焦点
- sqoop 导出hive数据到MySQL数据库当中
- JAVA守护线程 非守护线程
- Flutter之extension