一 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 homenumTravelersTourism: [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);
二 效果示意图
