echarts社区例子：[Make A Pie - 3d地图画线1](https://www.makeapie.com/editor.html?c=xSy3KhFV4M)
效果图：
# npm安装：
```JavaScript
npm install echarts
npm install echarts-gl
```
引入方式：
```JavaScript
import echart from "echarts";
import "echarts-gl";
import "echarts/map/js/china";
```
或者index.html cdn引入
```java
<!--echarts js文件 -->
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
<!--echarts-gl js文件 -->
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts-gl/dist/echarts-gl.min.js"></script>
<!-- bmap、china、world 的 js 文件 -->
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/dist/extension/bmap.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/map/js/china.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/map/js/world.js"></script>
<!-- ecStat 的 js 文件 -->
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts-stat/dist/ecStat.min.js"></script>
<!-- dataTool 的 js 文件 -->
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/dist/extension/dataTool.min.js"></script>
```
# 1.数据结构
```JavaScript
bPoint=[
{
name: "名字",//名字
value:[105.93318,//经度
37.981425,//纬度
2399//数值
]
}],
```
# 2.option配置
```JavaScript
<script>
import echart from "echarts";
import "echarts-gl";
import "echarts/map/js/china";
export default {
data() {
return {
bPoint: [
{
name: "名字",
value:[105.93318,37.981425,2399]
}],
sPoint: [
{
name: "名字",
value:[106.576627,38.159436,4887]
}],
};
},
mounted() {
this.getMapData();
},
methods: {
getMapData() {
// 绘制柱状图函数 geo底图
this.drawBarChartGeo("map", this.buyerPoint,this.sellerPoint);
},
// 绘制柱状图函数 geo底图
async drawBarChartGeo(name, buyerData,sellerData) {
const { data: geoJSON } = await this.$http.get(
"https://geo.datav.aliyun.com/areas/bound/geojson?code=100000_full"
);
// echart.registerMap('geoJSON', geoJSON);
// 初始化
const myChart = echart.init(document.getElementById(name));
let option = {
geo3D: {
map: 'china',
roam: true,
itemStyle: {
color: '#475368',
opacity: 1,
borderWidth: 0.4,
borderColor: '#212429'
},
label: {
show: true,
textStyle: {
color: '#fff', //地图初始化区域字体颜色
fontSize: 10,
opacity: 1,
backgroundColor: 'rgba(0,23,11,0)'
}
},
shading: 'lambert',
light: { //光照阴影
main: {
color: '#ffffff', //光照颜色
intensity: 1.2, //光照强度
// shadowQuality: 'high', //阴影亮度
shadow: true, //是否显示阴影
alpha: 55,
beta: 10
},
ambient: {
intensity: 0.3
}
}
},
series: [
//柱状图
{
name: "买家的柱状图",
type: "bar3D",
coordinateSystem: "geo3D",
barSize: 0.4, //柱子粗细
shading: "lambert",
bevelSize: 0.3,
minHeight:1,
itemStyle: {
color:"#3678fc",
opacity: 1,
},
label: {
show: false,
formatter: (record) => {
return `${record.name}\n重量：${record.value[2].toFixed(2)}吨`;
},
},
data: bData,
},
//柱状图
{
name: "卖家家的柱状图",
type: "bar3D",
coordinateSystem: "geo3D",
barSize: 0.4, //柱子粗细
shading: "lambert",
bevelSize: 0.3,
minHeight:1,
itemStyle: {
color:"#ffb526",
opacity: 1,
},
label: {
show: false,
formatter: (record) => {
return `${record.name}\n重量：${record.value[2].toFixed(2)}吨`;
},
},
data: sData,
},
],
};
myChart.setOption(option);
//地图点击事件
// myChart.getZr().on('click', function (params) {});
}
}
}
</script>
```
# 3.源码
```JavaScript
<template>
<div>
<div id="map"></div>
</div>
</template>
<script>
import echart from "echarts";
import "echarts-gl";
import "echarts/map/js/china";
export default {
data() {
return {
bPoint: [
{
name: "名字",
value:[105.93318,37.981425,2399]
}],
sPoint: [
{
name: "名字",
value:[106.576627,38.159436,4887]
}],
drawer: false,
direction: 'rtl'
};
},
created() {
// this.getMapData();
},
mounted() {
this.getMapData();
},
methods: {
// 请求数据的函数
getMapData() {
// 绘制柱状图函数 geo底图
this.drawBarChartGeo("map", this.buyerPoint, this.sellerPoint);
},
// 绘制柱状图函数 geo底图
async drawBarChartGeo(name, buyerData,sellerData) {
const { data: geoJSON } = await this.$http.get(
"https://geo.datav.aliyun.com/areas/bound/geojson?code=100000_full"
);
// 初始化
const myChart = echart.init(document.getElementById(name));
let option = {
geo3D: {
map: 'china',
roam: true,
itemStyle: {
color: '#475368',
opacity: 1,
borderWidth: 0.4,
borderColor: '#212429'
},
label: {
show: true,
textStyle: {
color: '#fff', //地图初始化区域字体颜色
fontSize: 10,
opacity: 1,
backgroundColor: 'rgba(0,23,11,0)'
}
},
shading: 'lambert',
light: { //光照阴影
main: {
color: '#ffffff', //光照颜色
intensity: 1.2, //光照强度
// shadowQuality: 'high', //阴影亮度
shadow: true, //是否显示阴影
alpha: 55,
beta: 10
},
ambient: {
intensity: 0.3
}
}
},
series: [
//柱状图
{
name: "买家的柱状图",
type: "bar3D",
coordinateSystem: "geo3D",
barSize: 0.4, //柱子粗细
shading: "lambert",
bevelSize: 0.3,
minHeight:1,
itemStyle: {
color:"#3678fc",
opacity: 1,
},
label: {
show: false,
formatter: (record) => {
return `${record.name}\n重量：${record.value[2].toFixed(2)}吨`;
},
},
data: bData,
},
//柱状图
{
name: "卖家家的柱状图",
type: "bar3D",
coordinateSystem: "geo3D",
barSize: 0.4, //柱子粗细
shading: "lambert",
bevelSize: 0.3,
minHeight:1,
itemStyle: {
color:"#ffb526",
opacity: 1,
},
label: {
show: false,
formatter: (record) => {
return `${record.name}\n重量：${record.value[2].toFixed(2)}吨`;
},
},
data: sData,
},
],
};
myChart.setOption(option);
//地图点击事件
// myChart.getZr().on('click', function (params) {});
}
}
}
</script>
<style lang="less" scoped>
#map {
width: 1403px;
height: 864px;
}
</style>
```
# 4.geojson数据来自：
[地图选择器 (aliyun.com)](http://datav.aliyun.com/tools/atlas/index.html)
通过axios请求：[获取geojson数据](https://geo.datav.aliyun.com/areas/bound/geojson?code=100000_full)
遇到什么问题，可留言，看到会尽快回复。
