例子来源: Make A Pie - 上海居民活动点分布可视化
效果图：
md_abb102af.png
npm安装：
npm install echarts
npm install echarts-gl
引入方式：
import echart from "echarts";
或者index.html里面：
<!-- maptalks 的 CSS 文件 -->
<link type="text/css" rel="stylesheet" href="https://cdn.jsdelivr.net/npm/maptalks/dist/maptalks.css">
<!-- maptalks 的 js 文件 -->
<script type="text/javascript" src="https://unpkg.com/maptalks/dist/maptalks.min.js"></script>
<!--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>
<!-- 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.数据结构
var data1=[
{
name:"wnm",//柱状图名字
value:[
121.25354625637668, //经度
31.12640542845193, //纬度
30000 //数值
]
}]
2.option配置
var option = {
visualMap: {
show:false,
max:30000,
inRange: {
color: ['#313695', '#4575b4', '#74add1', '#abd9e9', '#e0f3f8', '#ffffbf', '#fee090', '#fdae61', '#f46d43', '#d73027', '#a50026']
},
},
tooltip:{
},
//创建maptalks3D地图
maptalks3D: {
center: [121.4693, 31.213070],
zoom: 10,
pitch: 40,
urlTemplate: 'http://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}.png',
// altitudeScale: 1,
postEffect: {
enable: true,
FXAA: {
enable: true
}
},
light: {
main: {
intensity: 1,
shadow: true,
shadowQuality: 'high'
},
ambient: {
intensity: 0.
},
ambientCubemap: {
// texture: 'data-1491838644249-ry33I7YTe.hdr',
exposure: 1,
diffuseIntensity: 0.5,
specularIntensity: 2
}
}
},
series: [
{
type: 'bar3D',
shading: 'realistic',
coordinateSystem: 'maptalks3D',
barSize: 0.4,
silent: true,
data:data1
}]
}
3.源码
<!DOCTYPE html>
<html style="height: 100%">
<head>
<meta charset="utf-8">
</head>
<body style="height: 100%; margin: 0">
<div id="container" style="height: 100%"></div>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts-gl/dist/echarts-gl.min.js"></script>
<--!引入maptalks地图-->
<link type="text/css" rel="stylesheet" href="https://cdn.jsdelivr.net/npm/maptalks/dist/maptalks.css">
<script type="text/javascript" src="https://unpkg.com/maptalks/dist/maptalks.min.js"></script>
<script type="text/javascript">
var dom = document.getElementById("container");
var myChart = echarts.init(dom);
var data1=[{name:"wnm",value:[121.25354625637668, 31.12640542845193, 30000]}];
// https://gallerybox.echartsjs.com
//读取MapboxStyle数据
var option = {
visualMap: {
show:false,
max:30000,
inRange: {
color: ['#313695', '#4575b4', '#74add1', '#abd9e9', '#e0f3f8', '#ffffbf', '#fee090', '#fdae61', '#f46d43', '#d73027', '#a50026']
},
},
tooltip:{
},
maptalks3D: {
center: [121.4693, 31.213070],
zoom: 10,
pitch: 40,
urlTemplate: 'http://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}.png',
// altitudeScale: 1,
postEffect: {
enable: true,
FXAA: {
enable: true
}
},
light: {
main: {
intensity: 1,
shadow: true,
shadowQuality: 'high'
},
ambient: {
intensity: 0.
},
ambientCubemap: {
// texture: 'data-1491838644249-ry33I7YTe.hdr',
exposure: 1,
diffuseIntensity: 0.5,
specularIntensity: 2
}
}
},
series: [{
type: 'bar3D',
shading: 'realistic',
coordinateSystem: 'maptalks3D',
barSize: 0.4,
silent: true,
data:data1
}]
}
if (option && typeof option === "object") {
myChart.setOption(option, true);
}
</script>
</body>
</html>
遇到什么问题，可留言，看到会尽快回复。
