flask和echarts百度地图多图层可运行代码
时间: 2023-06-25 10:04:17 浏览: 41
以下是一个使用 Flask 和 echarts 的百度地图多图层的示例代码:
```python
from flask import Flask, render_template
app = Flask(__name__)
@app.route("/")
def index():
return render_template("index.html")
if __name__ == "__main__":
app.run()
```
index.html:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ECharts</title>
<script src="https://cdn.bootcdn.net/ajax/libs/echarts/4.9.0/echarts.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<style>
/* 设置容器高度 */
#container {
height: 600px;
}
</style>
</head>
<body>
<!-- 为ECharts准备一个具备大小(宽高)的容器 -->
<div id="container"></div>
<script>
// 基于准备好的dom,初始化echarts实例
var myChart = echarts.init(document.getElementById('container'));
// 指定图表的配置项和数据
var option = {
bmap: {
center: [116.46, 39.92],
zoom: 10,
roam: true,
mapStyle: {
styleJson: [{
'featureType': 'water',
'elementType': 'all',
'stylers': {
'color': '#d1d1d1'
}
}, {
'featureType': 'land',
'elementType': 'all',
'stylers': {
'color': '#f3f3f3'
}
}, {
'featureType': 'railway',
'elementType': 'all',
'stylers': {
'visibility': 'off'
}
}, {
'featureType': 'highway',
'elementType': 'all',
'stylers': {
'color': '#fdfdfd'
}
}, {
'featureType': 'highway',
'elementType': 'labels',
'stylers': {
'visibility': 'off'
}
}, {
'featureType': 'arterial',
'elementType': 'geometry',
'stylers': {
'color': '#fefefe'
}
}, {
'featureType': 'arterial',
'elementType': 'geometry.fill',
'stylers': {
'color': '#fefefe'
}
}, {
'featureType': 'poi',
'elementType': 'all',
'stylers': {
'visibility': 'off'
}
}, {
'featureType': 'green',
'elementType': 'all',
'stylers': {
'visibility': 'off'
}
}, {
'featureType': 'subway',
'elementType': 'all',
'stylers': {
'visibility': 'off'
}
}, {
'featureType': 'manmade',
'elementType': 'all',
'stylers': {
'color': '#d1d1d1'
}
}, {
'featureType': 'local',
'elementType': 'all',
'stylers': {
'color': '#d1d1d1'
}
}, {
'featureType': 'arterial',
'elementType': 'labels',
'stylers': {
'visibility': 'off'
}
}, {
'featureType': 'boundary',
'elementType': 'all',
'stylers': {
'color': '#fefefe'
}
}, {
'featureType': 'building',
'elementType': 'all',
'stylers': {
'color': '#d1d1d1'
}
}, {
'featureType': 'label',
'elementType': 'labels.text.fill',
'stylers': {
'color': '#999999'
}
}]
}
},
series: [{
name: 'pm2.5',
type: 'scatter',
coordinateSystem: 'bmap',
data: [
[116.418261, 39.921984, 1],
[116.423332, 39.916532, 1],
[116.419787, 39.930658, 1],
[116.418455, 39.920921, 1],
[116.418843, 39.915516, 1],
[116.42546, 39.918503, 1],
[116.423289, 39.919989, 1],
[116.418162, 39.915051, 1],
[116.422039, 39.91782, 1],
[116.41387, 39.917253, 1]
],
symbolSize: function (val) {
return val[2] * 5;
},
label: {
formatter: '{b}',
position: 'right'
},
itemStyle: {
color: 'purple'
}
}, {
name: 'Top 5',
type: 'effectScatter',
coordinateSystem: 'bmap',
data: [
[116.418261, 39.921984, 1],
[116.423332, 39.916532, 1],
[116.419787, 39.930658, 1],
[116.418455, 39.920921, 1],
[116.418843, 39.915516, 1],
],
symbolSize: function (val) {
return val[2] * 5;
},
showEffectOn: 'render',
rippleEffect: {
brushType: 'stroke'
},
hoverAnimation: true,
label: {
formatter: '{b}',
position: 'right'
},
itemStyle: {
color: 'yellow',
shadowBlur: 10,
shadowColor: 'rgba(0, 0, 0, 0.5)'
},
zlevel: 1
}]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
</script>
</body>
</html>
```
这个示例使用了百度地图的 API,可以在地图上添加多个图层,其中 pm2.5 的散点图和 Top 5 的散点图是两个不同的图层。在 Flask 中,我们使用 `render_template` 函数来呈现 HTML 模板。