echarts如何画地图

前情提要

用echarts画地图的方式有两种

通过真实的地图来画（百度地图、google地图、或者其它某种地图软件）
去拿到某块区域的json文件来画

第一种方式，可以前往 https://blog.csdn.net/glorydx/article/details/127656301查看具体如何实现

echarts 获取json文件来画地图

如何获取某一区域的json文件
通过npm 安装echarts的包里面，有自带的中国国内省级地图和中国地图，世界地图

如果想获得外国的国家json，需要另外找资源，并引入使用。

import world from '../../../common/map/world.json';

引入json后需要注册地图，vue示例

import world from '../../../common/map/world';
export default {mounted() {// 我之前直接将echarts挂载到vue原型上了，所以可以这样用this.$echarts.registerMap('world', world);}
}

main.js将echarts挂载到vue原型

import Vue from 'vue';
import echarts from 'echarts';
Vue.prototype.$echarts = echarts;
new Vue({router,store,render: (h) => h(App),
}).$mount('#app');

this.options构建地图所需要的数据和样式，比如

import world from '../../../common/map/world';
export default {data: () => {return {options: {},chart: undefined}},mounted() {// 我之前直接将echarts挂载到vue原型上了，所以可以这样用this.$echarts.registerMap('world', world);this.options = {// 默认的颜色数组 （如果不明确设置每个数据项的颜色，则会采用默认的数组// 此处的颜色为十六进制表示，也可以使用rgb来表示。简单地理解就是一串字符就代表一个颜色，挑选喜欢的颜色可以自行搜索颜色color: ['#ac6767', '#1d953f', '#6950a1', '#918597'],// visualMap: {//   inRang: {//     // color: ['#ac6767', '#1d953f', '#6950a1', '#918597', '#ff2d52'],//   },// },series: [{// 图标类型为 地图type: 'map',name: 'test',label: {show: false,position: 'top',margin: 8,},mapType: 'world', // 地图类型为 世界地图 需要和registerMap注册的名称一致// data里的每一个{}中，是一项数据整体，标明了该项数据的名称，值，以及颜色等参数。注意：此处的字符串需要加双引号""(输入法切换至英文状态)data: [{// ItemStyle 中设置每一个数据项的颜色name: 'United States',value: 43,itemStyle: { color: '#ff2d52' },},{name: 'Japan',value: 17, // 注意项与项之间的逗号itemStyle: { color: '#CD8500' },},{name: 'France',value: 7,itemStyle: { color: '#EE2C2C' },},{name: 'Italy',value: 6,itemStyle: { color: '#918597' },},{name: 'Canada',value: 5,itemStyle: { color: '#bda29a' },},{name: 'United Kingdom',value: 4,itemStyle: { color: '#6950a1' },},{name: 'Spain',value: 4,itemStyle: { color: '#1d953f' },},{name: 'Holland',value: 4,itemStyle: { color: '#2f4554' },},{name: 'Belgium',value: 3,itemStyle: { color: '#EEAD0E' },},{name: 'Germany',value: 2,itemStyle: { color: '#607B8B' },},{name: 'Austria',value: 2,itemStyle: { color: '#5CACEE' },},{name: 'Switzerland',value: 1,itemStyle: { color: '#4EEE94' },},{name: 'Poland',value: 1,itemStyle: { color: '#8DEEEE' },},{name: 'Chile',value: 1,itemStyle: { color: '#B23AEE' },},],roam: true,zoom: 1,// 去除各个国家上的小红点// showLegendSymbol: false,},],// 鼠标悬浮，单击产生的效果（在网页上可以动态显示）tooltip: {show: true,trigger: 'item',triggerOn: 'mousemove|click',axisPointer: {type: 'line',},textStyle: {fontSize: 14,},borderWidth: 0,},};}
}

我们在mounted函数中将这些东西赋值给echarts

 this.$echarts.registerMap('world', world);this.options = {.....}this.chart = this.$echarts.init( 某个dom );this.chart.setOption(this.options, true);

实际效果

样式不太好看，这里只是举例子，大家可以在options里面配置需要的样式和地图的具体功能

这里展示一些地图常用的样式修改api

{// 默认的颜色数组 （如果不明确设置每个数据项的颜色，则会采用默认的数组// 此处的颜色为十六进制表示，也可以使用rgb来表示。简单地理解就是一串字符就代表一个颜色，挑选喜欢的颜色可以自行搜索颜色color: ['yellow', 'orangered'],// 用来分配数值于颜色的关系，以及颜色分布展示 https://echarts.apache.org/zh/option.html#visualMapvisualMap: {min: 0,max: 500,text: ['High', 'Low'],realtime: false,calculable: true,inRange: {color: ['skyblue', 'blue'],},},// 缩放平移是否开启 https://echarts.apache.org/zh/option.html#series-map.roamroam: true,// 设置整个地图的背景色backgroundColor: `rgba(0,0,0,0)`,// 整个地图的阴影，其实是在底下再画一个地图出来，要求与上面的地图同步，看上下有阴影的效果，但是不能缩放，缩放会出问题// geo: {//   type: 'map',//   roam: true,//   name: 'test',//   zoom: 2,//   zlevel: 0,//   map: 'world',//   label: {//   },//   itemStyle: {//     // areaColor: 'red',//     emphasis: {//       show: false,//     },//     shadowColor: '#ff2d52', // 区域之间的阴影，可以让区域之间更立体//     shadowBlur: 10, // 阴影模糊度//     shadowOffsetX: 10, // 阴影偏移//     shadowOffsetY: 10, // 阴影偏移//   },//   layoutCenter: ['70%', '70%'],//   // offset: [10, 10],// },series: [{// 图标类型为 地图type: 'map',name: 'test',zoom: 2, // 初始的缩放程度// scaleLimit: {//   max: 6,//   min: 2,// }, // 因为世界地图比较大，所以最小设置为2nameMap: this.nameMap, // 将地图json提供的名称，对应换成中文，后面data提供的name也应该换成中文colorBy: 'series', // series 或者 data 是按照上面的color来配色还是按照data里面的颜色来配色label: {show: true, // 是否显示每一个块区域的名称，因为是世界地图，名字太多，就设置为falsecolor: '#fff', // 每块区域标签的颜色position: 'inside', //标签所在的位置 https://echarts.apache.org/zh/option.html#series-map.label.positionformatter: '{b}', // 对label的内容进行定义 https://echarts.apache.org/zh/option.html#series-map.label.formatterfontWeight: 'normal', // 文字字体的粗细。https://echarts.apache.org/zh/option.html#series-map.label.fontWeightfontFamily: 'Microsoft YaHei',fontSize: 14,align: 'center',overflow: 'truncate',ellipsis: '...',// rich: {} 可以更加自由的定义label的内容及样式 https://echarts.apache.org/zh/option.html#series-map.label.rich},itemStyle: {areaColor: 'skyblue', // 没有数据时的区域颜色borderColor: 'white', // 区域边界线的颜色borderWidth: 1, // 边界的宽度，为0时无边界borderType: 'dashed', // 边界的类型 https://echarts.apache.org/zh/option.html#series-map.itemStyle.borderTypeopacity: 1, // 地图整体的透明度shadowColor: 'rgba(255, 255, 255, 0.5)', // 区域之间的阴影，可以让区域之间更立体shadowBlur: 10, // 阴影模糊度shadowOffsetX: 0, // 阴影偏移shadowOffsetY: 0, // 阴影偏移},// 鼠标移入区块时的样式emphasis: {disabled: false, // 是否禁止高亮状态// laebl: {...},同上属性// itemStyle: {...},同上属性},// 选中区块(鼠标点击区块)的样式,selectedMode属性被开启时有效select: {disabled: true, // 是否禁止高亮状态// laebl: {...},同上属性// itemStyle: {...},同上属性},selectedMode: 'multiple', // 是否支持多选multiple或者单选singlemapType: 'world', // 地图类型为 世界地图zlevel: 1, //当你有多组数据需要渲染的时候，这个值越大，会被渲染到上方，相当于z-indexz: 2, // 与zlevel相似，但不会创建新的canvas// 内容距离容器的边距// left: 'auto',// top: 'auto',// right: 'auto',// bottom: 'auto',// 在地图上做特殊标记markPoint: {symbol: 'pin',symbolSize: 50, // 标记的大小symbolKeepAspect: false,symbolOffset: [10, 10],silent: false,itemStyle: {color: 'skyblue',},data: [{name: '美国',value: 43,x: 200, //标记的位置，相对于canvas的位置 一旦平移或者缩放，会出问题y: 100, //标记的位置，相对于canvas的位置 一旦平移或者缩放，会出问题label: {color: '#fff', // 标记的颜色},},],},// markLine: {...}, 在地图上划线，一般很少用 https://echarts.apache.org/zh/option.html#series-map.markLine// markArea: {...}, 在地图上划一块儿区域，一般很少用 https://echarts.apache.org/zh/option.html#series-map.markAreaslient: true,// 用来控制地图最初渲染的位置，配合layoutSize使用layoutCenter: ['70%', '70%'],// 会影响地图的放大缩小，慎用// layoutSize: 1000,// data里的每一个{}中，是一项数据整体，标明了该项数据的名称，值，以及颜色等参数。注意：此处的字符串需要加双引号""(输入法切换至英文状态)data: [{// ItemStyle 中设置每一个数据项的颜色name: '美国',value: 43,// itemStyle:{...} // 对某个单独的数据比如美国设置单独的样式，同上方的itemStyle配置一致// select: {...} // 同全局的select属性一致// tooltip: {...} // 同全局的tooltip属性一致label: {// 对某个单独的数据比如美国设置单独的样式，同上方的itemStyle配置一致position: 'insideBottomRight',offset: [-200, 0], // 通过offset可以控制label的位置,但地图缩放位置会发生变化，并不是很好用，除非禁止缩放color: 'skyblue',},labelLine: {// 全局也有labelline属性配置，但在地图中，一般不适用，某个区域因为地方太小，反而需要这样的折线show: true,showAbove: true,length2: 12, // line是一条折线，分为两段，相对来说第二段的长度，为0时就是一条直线lineStyle: {color: 'skyblue', // 折线的颜色width: 1, // 折线宽度type: 'dashed', // 折线的类型 https://echarts.apache.org/zh/option.html#series-map.data.labelLine.lineStyle.type},}, //label的引导线 https://echarts.apache.org/zh/option.html#series-map.data.labelLine},{name: '日本',value: 17, // 注意项与项之间的逗号},{name: '法国',value: 7,},{name: '意大利',value: 6,},{name: '加拿大',value: 5,},{name: '西班牙',value: 40,},],},],// 鼠标悬浮，单击产生的效果（在网页上可以动态显示）tooltip: {show: true,trigger: 'item',triggerOn: 'mousemove|click',axisPointer: {type: 'line',},textStyle: {fontSize: 14,},borderWidth: 0,},};

修改样式之后

样式api文档：https://echarts.apache.org/zh/option.html#series-map.type

echarts如何画地图相关推荐

在vue中使用echarts,echarts-map:echarts画地图
1.首先安装:cnpm install echarts --save 2.然后main.js引入(也可以组件内引入) // 引入ECharts图表公共组件 import echarts from 'e ...
echarts geo地图示例_python小白的画地图合集（使用pyecharts)
经过今晚的小摸索,终于可以画出世界地图.省级地图以及全国的热力图.所以特此决定出一个小的合集,建议先去阅读上一篇写的画中国地图,可能那样子你会很快速了解到画图的精髓. 画世界地图依旧是上次的套路: ...
Echarts定制一个地图
制作地图 1.准备制作网站 2.echarts导入 3.开始制作地图 3.json代码放到js里 4.在html代码里显示 1.准备制作网站制作地图的网站:点击选择地图的轮廓:点击我们需要用第二 ...
详解python 利用 pyecharts 画地图(热力图)(世界地图，省市地图，区县地图)、动态流向图
转载: 详解python 利用echarts画地图(热力图)(世界地图,省市地图,区县地图) Pyecharts绘制全球流向图 pyecharts中文教程官网目录安装对应的python模块世界 ...
分享一次自己使用 pyecharts 模块画地图，一路踩坑和填坑的经历
pyecharts是一个百度做的数据可视化模块,做好的echarts图可以存为html\svg等多种格式,具有极好的交互性和展示性. 文档很详细,先把官网中文文档放上来:http://pyechart ...
『Python学习笔记』使用pycharts包画地图！
使用pycharts包画地图! 文章目录一. 环境包的安装二. 画中国地图三. 参考文献一. 环境包的安装 pyecharts的下载参考此文章(选择0.1.9.4版本):https://zhu ...
Echarts实现中国地图多级钻取-可实现四级
Echarts实现中国地图多级钻取-可实现四级项目git地址 https://gitee.com/fuyanghulin/thermalMap 说明:上述项目只保留了浙江的geo地图(第四级无街道) ...
vue集成echarts，vue+echarts实现中国地图和河南省地图
安装echarts npm install echarts -D 配置echarts 在项目src目录下main.js文件中加入配置: import echarts from 'echarts'Vue ...
使用Pyecharts进行全国水质TDS地图可视化全过程7：使用pyecharts画地图总述
目录一.什么是pyecharts? 二.安装pyecharts? 三.pyecharts使用文档四.pyecharts画地图五.需要注意的事项六.地图的下钻本文为总述.后面几篇文章再详细的拿 ...
Echarts结合百度地图API绘制热力图
最近项目中需要使用echarts与百度地图API结合来绘制事故发生热力图,在将其与百度地图结合的过程中遇到了一些问题,现将其过程与解决方案记录下,以供日后参考.echarts中结合百度地图API的热力 ...

echarts如何画地图

前情提要

echarts 获取json文件来画地图

实际效果

echarts如何画地图相关推荐

最新文章

热门文章