echarts社区例子：Make A Pie - 3d地图画线1
效果图：
npm安装：
npm install echarts
npm install echarts-gl
引入方式：
import echart from "echarts";
import "echarts-gl";
import "echarts/map/js/china";
或者index.html cdn引入
<!--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.数据结构
bPoint=[
{
name: "名字",//名字
value:[105.93318,//经度
37.981425,//纬度
2399//数值
]
}],
2.option配置
<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.源码
<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数据来自：
通过axios请求：获取geojson数据
遇到什么问题，可留言，看到会尽快回复。