echarts社区例子:ECharts Gallery - 3d地图画线1 (makeapie.com)
效果图:
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@4/dist/echarts.min.js"></script>
<!--echarts-gl js文件 -->
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts-gl@1/dist/echarts-gl.min.js"></script>
<!-- bmap、china、world 的 js 文件 -->
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@4/dist/extension/bmap.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@4/map/js/china.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@4/map/js/world.js"></script>
<!-- ecStat 的 js 文件 -->
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts-stat@1/dist/ecStat.min.js"></script>
<!-- dataTool 的 js 文件 -->
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@4/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.bPoint,this.sPoint);
},
// 绘制柱状图函数 geo底图
async drawBarChartGeo(name, bData,sData) {
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.源码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>基于geo的3D柱状图</title>
<style>
html, body, #app{
width: 100%;
height: 100%;
margin: 0;
padding: 0;
position: absolute;
background: black;
}
#map {
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<div id="app">
<div id="map"></div>
</div>
</body>
<!-- 引入 Vue -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<!-- 引入 axios -->
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<!--echarts js文件 -->
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@4/dist/echarts.min.js"></script>
<!--echarts-gl js文件 -->
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts-gl@1/dist/echarts-gl.min.js"></script>
<!-- bmap、china、world 的 js 文件 -->
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@4/dist/extension/bmap.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@4/map/js/china.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@4/map/js/world.js"></script>
<!-- ecStat 的 js 文件 -->
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts-stat@1/dist/ecStat.min.js"></script>
<!-- dataTool 的 js 文件 -->
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@4/dist/extension/dataTool.min.js"></script>
<script>
new Vue({
el: '#app',
data() {
return {
bPoint: [
{
name: "名字",
value:[105.93318,37.981425,2399]
}],
sPoint: [
{
name: "名字",
value:[106.576627,38.159436,4887]
}],
drawer: false,
direction: 'rtl'
};
},
mounted() {
this.getMapData();
},
methods: {
// 请求数据的函数
getMapData() {
// 绘制柱状图函数 geo底图
this.drawBarChartGeo("map", this.bPoint, this.sPoint);
},
// 绘制柱状图函数 geo底图
async drawBarChartGeo(name, bData, sData) {
const { data: geoJSON } = await axios.get(
"https://geo.datav.aliyun.com/areas/bound/geojson?code=100000_full"
);
// 初始化
const myChart = echarts.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>
</html>
4.geojson数据来自:
通过axios请求:https://geo.datav.aliyun.com/areas/bound/geojson?code=100000_full 获取geojson数据
遇到什么问题,可留言,看到会尽快回复。