echarts如何画地图
发布时间：2023-03-31 14:30
前情提要
用echarts画地图的方式有两种
- 通过真实的地图来画（百度地图、google地图、或者其它某种地图软件）
- 去拿到某块区域的json文件来画
第一种方式，可以前往 https://blog.csdn.net/glorydx/article/details/127656301查看具体如何实现
echarts 获取json文件来画地图
如何获取某一区域的json文件
通过npm 安装echarts的包里面，有自带的中国国内省级地图和中国地图，世界地图
![\"在这里插入图片描述\"](\"https://img-blog.csdnimg.cn/64385dcb42214418a297e2a68d2304ba.png\")
如果想获得外国的国家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);
实际效果
![\"在这里插入图片描述\"](\"https://img-blog.csdnimg.cn/a38b5bf5b794465db1fc892cce1245c5.png\")
样式不太好看，这里只是举例子，大家可以在options里面配置需要的样式和地图的具体功能
这里展示一些地图常用的样式修改api
{
// 默认的颜色数组 （如果不明确设置每个数据项的颜色，则会采用默认的数组
// 此处的颜色为十六进制表示，也可以使用rgb来表示。简单地理解就是一串字符就代表一个颜色，挑选喜欢的颜色可以自行搜索颜色
color: ['yellow', 'orangered'],
// 用来分配数值于颜色的关系，以及颜色分布展示 https://echarts.apache.org/zh/option.html#visualMap
visualMap: {
min: 0,
max: 500,
text: ['High', 'Low'],
realtime: false,
calculable: true,
inRange: {
color: ['skyblue', 'blue'],
},
},
// 缩放平移是否开启 https://echarts.apache.org/zh/option.html#series-map.roam
roam: 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,
// }, // 因为世界地图比较大，所以最小设置为2
nameMap: this.nameMap, // 将地图json提供的名称，对应换成中文，后面data提供的name也应该换成中文
colorBy: 'series', // series 或者 data 是按照上面的color来配色还是按照data里面的颜色来配色
label: {
show: true, // 是否显示每一个块区域的名称，因为是世界地图，名字太多，就设置为false
color: '#fff', // 每块区域标签的颜色
position: 'inside', //标签所在的位置 https://echarts.apache.org/zh/option.html#series-map.label.position
formatter: '{b}', // 对label的内容进行定义 https://echarts.apache.org/zh/option.html#series-map.label.formatter
fontWeight: 'normal', // 文字字体的粗细。https://echarts.apache.org/zh/option.html#series-map.label.fontWeight
fontFamily: '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.borderType
opacity: 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或者单选single
mapType: 'world', // 地图类型为 世界地图
zlevel: 1, //当你有多组数据需要渲染的时候，这个值越大，会被渲染到上方，相当于z-index
z: 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.markArea
slient: 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,
},
};
修改样式之后
![\"在这里插入图片描述\"](\"https://img-blog.csdnimg.cn/291053f2e0e345fcb3e323e923720444.png\")
样式api文档：https://echarts.apache.org/zh/option.html#series-map.type