一 echarts的使用
<script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
<div class="container">
<div class="t_header">
<span>端午节出行数据展示</span>
</div>
<div id="lineChart" class="chart top-left"></div>
<div id="pieChart" class="chart top-right"></div>
<div id="barChart" class="chart bottom-left"></div>
<div id="container" class="bottom-right"></div>
</div>
var lineChart = echarts.init(document.getElementById('lineChart'));
var pieChart = echarts.init(document.getElementById('pieChart'));
var barChart = echarts.init(document.getElementById('barChart'));
var lineOption = {
title: {
text: '日常出行数据统计',
left: 'center'
},
xAxis: {
type: 'category',
data: lineData.dates
},
yAxis: {
type: 'value'
},
tooltip: {
trigger: 'axis'
},
legend: {
orient: 'verticl',
left: 'right'
},
series: [
{
name: '返乡',
type: 'line',
data: lineData.numTravelersReturningHome
},
{
name: '旅游',
type: 'line',
data: lineData.numTravelersTourism
}
]
};
lineChart.setOption(lineOption);
pieChart.setOption(pieOption);
barChart.setOption(barOption);
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>端午节出行数据大屏</title>
<link rel="stylesheet" type="text/css" href="./css/index.css">
<script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
<script type="text/javascript"
src="http://api.map.baidu.com/api?v=3.0&ak=jvM6mGCndWbYcaelCSzvGhnKReqqfq8J"></script>
<body>
<div class="container">
<div class="t_header">
<span>端午节出行数据展示</span>
</div>
<div id="lineChart" class="chart top-left"></div>
<div id="pieChart" class="chart top-right"></div>
<div id="barChart" class="chart bottom-left"></div>
<div id="container" class="bottom-right"></div>
</div>
<script src="./js/index.js"></script>
</body>
</html>
html,
body {
height: 100%;
margin: 0;
padding: 0;
background-color: #f2f2f2;
/* 背景色 */
}
#container {
width: 48%;
height: 400px;
transform: scale(0.8);
transform-origin: center center;
}
/* Additional Styles */
.container {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
margin: 20px;
}
.chart {
width: 48%;
height: 400px;
margin-bottom: 20px;
}
h1 {
font-size: 28px;
color: #333;
text-align: center;
margin-top: 30px;
}
.top-left {
color: #fff;
float: left;
margin-right: 20px;
box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.039) inset;
}
.top-right {
color: #fff;
box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.039) inset;
float: right;
margin-left: 20px;
}
.bottom-left {
clear: both;
box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.039) inset;
}
.bottom-right {
box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.039) inset;
}
.t_header {
width: 100%;
height: 80px;
background: url(../images/linx.png) no-repeat;
background-size: 100% 80%;
position: relative;
}
.t_header span {
color: #fff;
font-size: 27px;
position: absolute;
top: 25%;
margin-top: -0.24rem;
left: 9%;
}
var map = new BMap.Map("container");
//开启鼠标滚轮缩放
map.enableScrollWheelZoom(true);
// 第七步 设置坐标点
var point = new BMap.Point(113.844656, 22.632231);
// 创建标注
var marker = new BMap.Marker(point);
//拖动标注,显示当前标注点所在的地理位置
marker.enableDragging();
//拖动坐标点并显示坐标点所在的位置
marker.addEventListener("dragend", function (e) {
alert("当前位置:" + e.point.lng + ", " + e.point.lat);
});
// 将标注添加到地图中
map.addOverlay(marker);
//标注点添加点击事件
marker.addEventListener("click", function () {
alert("您点击了标注");
});
// 第八步 初始化地图,设置中心点坐标和地图级别
map.centerAndZoom(point, 15);
// Initialize Echarts instances and set sizes
var lineChart = echarts.init(document.getElementById('lineChart'));
var pieChart = echarts.init(document.getElementById('pieChart'));
var barChart = echarts.init(document.getElementById('barChart'));
// Line chart data example
var lineData = {
dates: ['6月8日', '6月9日', '6月10日', '6月11日', '6月12日'],
numTravelersReturningHome: [15000, 25000, 20000, 23000, 18000], // Data for travelers returning home
numTravelersTourism: [5000, 5000, 5000, 5000, 17000] // Data for travelers going on trips
};
// Line chart options
var lineOption = {
title: {
text: '日常出行数据统计',
left: 'center'
},
xAxis: {
type: 'category',
data: lineData.dates
},
yAxis: {
type: 'value'
},
tooltip: {
trigger: 'axis'
},
legend: {
orient: 'verticl',
left: 'right'
},
series: [
{
name: '返乡',
type: 'line',
data: lineData.numTravelersReturningHome
},
{
name: '旅游',
type: 'line',
data: lineData.numTravelersTourism
}
]
};
var pieData = {
travelMode: ['火车', '大巴', '飞机'],
numTravelers: [2352, 1115, 3524]
};
// Pie chart options
var pieOption = {
title: {
text: '出行工具',
left: 'center'
},
tooltip: {
trigger: 'item'
},
legend: {
orient: 'verticl',
left: 'right'
},
series: [{
type: 'pie',
radius: '50%',
data: pieData.travelMode.map(function (mode, index) {
return { value: pieData.numTravelers[index], name: mode };
})
}]
};
// Bar chart data example
var barData = {
destinations: ['北京', '洛阳', '南京', '西安', '郑州'],
numTravelersReturningHome: [5000, 8000, 12000, 6000, 10000],
numTravelersTourism: [2220, 5000, 231, 25, 12000],
coordinates: [
{ lng: 116.407526, lat: 39.90403 }, // 北京的经纬度
{ lng: 112.434468, lat: 34.663041 }, // 洛阳的经纬度
{ lng: 118.796877, lat: 32.060255 }, // 南京的经纬度
{ lng: 108.940175, lat: 34.341568 }, // 西安的经纬度
{ lng: 113.625368, lat: 34.7466 } // 郑州的经纬度
]
};
var barOption = {
title: {
text: '城市情况统计',
left: 'center'
},
xAxis: {
type: 'category',
data: barData.destinations
},
yAxis: {
type: 'value'
},
tooltip: {
trigger: 'axis'
},
legend: {
orient: 'verticl',
left: 'right'
},
series: [
{
name: '返乡',
type: 'bar',
data: barData.numTravelersReturningHome
},
{
name: '旅游',
type: 'bar',
data: barData.numTravelersTourism
}
]
};
// 柱状图点击事件
barChart.on('click', function (params) {
var selectedCityIndex = params.dataIndex;
var selectedCityCoordinates = barData.coordinates[selectedCityIndex];
var selectedCityName = barData.destinations[selectedCityIndex];
// 将地图中心点设置为选定城市的经纬度
map.centerAndZoom(new BMap.Point(selectedCityCoordinates.lng, selectedCityCoordinates.lat), 15);
// 在选定城市的经纬度上创建新的标注点
var marker = new BMap.Marker(new BMap.Point(selectedCityCoordinates.lng, selectedCityCoordinates.lat));
map.clearOverlays(); // 清除之前的标注点
map.addOverlay(marker);
// 打开包含选定城市名称的信息窗口
var infoWindow = new BMap.InfoWindow(selectedCityName);
marker.openInfoWindow(infoWindow);
});
lineChart.setOption(lineOption);
pieChart.setOption(pieOption);
barChart.setOption(barOption);
二 效果示意图
![](https://img-blog.csdnimg.cn/direct/f8a9fb6ea5524579a550f47460f76570.png)