🍅 作者主頁：Java李楊勇
🍅 簡介：Java領域優質創作者🏆、Java李楊勇公號作者? 簡歷模板、學習資料、面試題庫、技識訓助【關注我，都給你】
🍅 歡迎點贊 👍 收藏 ?留言 📝
動圖演示： 文末獲取原始碼
代碼目錄：
主要代碼實作：
主頁HTML布局：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>新能源車聯網綜合大資料平臺</title>
<script src="js/jquery-2.1.1.min.js"></script>
<script>
$(window).load(function(){
$(".loading").fadeOut()
})
</script>
<link rel="stylesheet" href="css/common.css">
<link rel="stylesheet" href="css/map.css">
</head>
<body>
<div class="loading">
<div class="loadbox"> <img src="picture/loading.gif"> 頁面加載中... </div>
</div>
<div class="data">
<div class="data-title">
<div class="title-center ">資料概覽演示案例</div>
</div>
<div class="data-content">
<div class="con-left fl">
<div class="left-top">
<div class="info boxstyle">
<div class="title">實時統計</div>
<div class="info-main">
<ul>
<li><img src="picture/info-img-1.png" alt=""><span>車輛總數(輛)</span><p>12,457</p></li>
<li><img src="picture/info-img-2.png" alt=""><span>當前在線數(輛)</span><p>12,457</p></li>
<li><img src="picture/info-img-3.png" alt=""><span>今榷訓躍數(輛)</span><p>12,457</p></li>
<li><img src="picture/info-img-4.png" alt=""><span>今榷訓躍率(%)</span><p>74%</p></li>
</ul>
</div>
</div>
<div class="top-bottom boxstyle">
<div class="title">行業分類</div>
<div id="echarts_1" class="charts"></div>
</div>
</div>
<div class="left-bottom boxstyle">
<div class="title">車型分類</div>
<div id="echarts_2" class="charts"></div>
</div>
</div>
<div class="con-center fl">
<div class="map-num">
<p>實時行駛車輛(輛)</p>
<div class="num">
<span>1</span>
<span>5</span>
<span>4</span>
<span>9</span>
<span>2</span>
<span>6</span>
<span>8</span>
</div>
</div>
<div class="cen-top map" id="map"></div>
<div class="cen-bottom boxstyle">
<div class="title">車輛充電高峰時間</div>
<div id="echarts_3" class="charts"></div>
</div>
</div>
<div class="con-right fr">
<div class="right-top boxstyle">
<div class="title">本月行駛里程TOP5</div>
<div id="echarts_4" class="charts"></div>
</div>
<div class="right-center boxstyle">
<div class="title">報警車輛TOP5</div>
<div id="echarts_5" class="charts"></div>
</div>
<div class="right-bottom boxstyle">
<div class="title">電池報警車輛TOP10</div>
<div id="echarts_6" class="charts"></div>
</div>
</div>
</div>
</div>
</body>
<script src="js/echarts.min.js"></script>
<script src="js/china.js"></script>
<script src="js/echarts.js"></script>
</html>echarts.js實作：
$(function () {
function echarts_1() {
// 基于準備好的dom，初始化echarts實體
var myChart = echarts.init(document.getElementById('echarts_1'));
var data = [
{value: 42,name: '行業一'},
{value: 23,name: '行業二'},
{value: 70,name: '行業三'},
];
option = {
backgroundColor: 'rgba(0,0,0,0)',
tooltip: {
trigger: 'item',
formatter: "{b}: <br/>{c} ({d}%)"
},
color: [ '#20b9cf', '#2089cf', '#205bcf'],
legend: { //圖例組件，顏色和名字
x: '70%',
y: 'center',
orient: 'vertical',
itemGap: 12, //圖例每項之間的間隔
itemWidth: 10,
itemHeight: 10,
icon: 'rect',
data: ['行業一', '行業二', '行業三'],
textStyle: {
color: [],
fontStyle: 'normal',
fontFamily: '微軟雅黑',
fontSize: 12,
}
},
series: [{
name: '行業占比',
type: 'pie',
clockwise: false, //餅圖的扇區是否是順時針排布
minAngle: 20, //最小的扇區角度（0 ~ 360）
center: ['35%', '50%'], //餅圖的中心（圓心）坐標
radius: [40, 60], //餅圖的半徑
// avoidLabelOverlap: true, 是否啟用防止標簽重疊
itemStyle: { //圖形樣式
normal: {
borderColor: 'transparent',
borderWidth: 2,
},
},
}, {
name: '',
type: 'pie',
clockwise: false,
silent: true,
minAngle: 20, //最小的扇區角度（0 ~ 360）
center: ['35%', '50%'], //餅圖的中心（圓心）坐標
radius: [0, 40], //餅圖的半徑
itemStyle: { //圖形樣式
normal: {
borderColor: '#1e2239',
borderWidth: 1.5,
opacity: 0.21,
}
},
label: { //標簽的位置
normal: {
show: false,
}
},
data: data
}]
};
// 使用剛指定的配置項和資料顯示圖表，
myChart.setOption(option);
window.addEventListener("resize",function(){
myChart.resize();
});
}
function map() {
// 基于準備好的dom，初始化echarts實體
var myChart = echarts.init(document.getElementById('map'));
var data = [
{name: '海門', value: 9},
{name: '鄂爾多斯', value: 12},
{name: '招遠', value: 12},
{name: '舟山', value: 12},
{name: '齊齊哈爾', value: 14},
{name: '鹽城', value: 15},
{name: '赤峰', value: 16},
{name: '青島', value: 18},
{name: '宜賓', value: 58},
{name: '呼和浩特', value: 58},
{name: '哈爾濱', value: 114},
{name: '聊城', value: 116},
{name: '蕪湖', value: 117},
{name: '唐山', value: 119},
{name: '平頂山', value: 119},
{name: '邢臺', value: 119},
{name: '德州', value: 120},
{name: '濟寧', value: 120},
{name: '荊州', value: 127},
{name: '宜昌', value: 130},
{name: '義烏', value: 132},
{name: '麗水', value: 133},
{name: '洛陽', value: 134},
{name: '秦皇島', value: 136},
{name: '株洲', value: 143},
{name: '石家莊', value: 147},
{name: '萊蕪', value: 148},
{name: '常德', value: 152},
{name: '保定', value: 153},
{name: '湘潭', value: 154},
{name: '金華', value: 157},
{name: '岳陽', value: 169},
{name: '長沙', value: 175},
{name: '衢州', value: 177},
{name: '廊坊', value: 193},
{name: '菏澤', value: 194},
{name: '合肥', value: 229},
{name: '武漢', value: 273},
{name: '大慶', value: 279}
];
var geoCoordMap = {
'海門':[121.15,31.89],
'鄂爾多斯':[109.781327,39.608266],
'招遠':[120.38,37.35],
'舟山':[122.207216,29.985295],
'齊齊哈爾':[123.97,47.33],
'鹽城':[120.13,33.38],
'赤峰':[118.87,42.28],
'青島':[120.33,36.07],
'乳山':[121.52,36.89],
'金昌':[102.188043,38.520089],
'泉州':[118.58,24.93],
'萊西':[120.53,36.86],
'日照':[119.46,35.42],
'膠南':[119.97,35.88],
'南通':[121.05,32.08],
'拉薩':[91.11,29.97],
'云浮':[112.02,22.93],
'梅州':[116.1,24.55],
'文登':[122.05,37.2],
'上海':[121.48,31.22],
'攀枝花':[101.718637,26.582347],
'威海':[122.1,37.5],
'承德':[117.93,40.97],
'廈門':[118.1,24.46],
'汕尾':[115.375279,22.786211],
'潮州':[116.63,23.68],
'丹東':[124.37,40.13],
'太倉':[121.1,31.45],
'曲靖':[103.79,25.51],
'煙臺':[121.39,37.52],
'福州':[119.3,26.08],
'瓦房店':[121.979603,39.627114],
'即墨':[120.45,36.38],
'撫順':[123.97,41.97],
'玉溪':[102.52,24.35],
'清遠':[113.01,23.7],
'中山':[113.38,22.52],
'昆明':[102.73,25.04],
'壽光':[118.73,36.86],
'盤錦':[122.070714,41.119997],
'長治':[113.08,36.18],
'深圳':[114.07,22.62],
'珠海':[113.52,22.3],
'宿遷':[118.3,33.96],
'咸陽':[108.72,34.36],
'銅川':[109.11,35.09],
'平度':[119.97,36.77],
'佛山':[113.11,23.05],
'海口':[110.35,20.02],
'江門':[113.06,22.61],
'章丘':[117.53,36.72],
'肇慶':[112.44,23.05],
'大連':[121.62,38.92],
'臨汾':[111.5,36.08],
'吳江':[120.63,31.16],
'石嘴山':[106.39,39.04],
'沈陽':[123.38,41.8],
'蘇州':[120.62,31.32],
'茂名':[110.88,21.68],
'嘉興':[120.76,30.77],
'長春':[125.35,43.88],
'膠州':[120.03336,36.264622],
'銀川':[106.27,38.47],
'張家港':[120.555821,31.875428],
'三門峽':[111.19,34.76],
'錦州':[121.15,41.13],
'南昌':[115.89,28.68],
'柳州':[109.4,24.33],
'三亞':[109.511909,18.252847],
'自貢':[104.778442,29.33903],
'吉林':[126.57,43.87],
'陽江':[111.95,21.85],
'瀘州':[105.39,28.91],
'西寧':[101.74,36.56],
'宜賓':[104.56,29.77],
'呼和浩特':[111.65,40.82],
'武漢':[114.31,30.52],
'大慶':[125.03,46.58]
};
上面的圖片檔案以及js檔案等需要引入進來
原始碼獲取
大家點贊、收藏、關注、評論啦 、查看👇🏻👇🏻👇🏻微信公眾號獲取👇🏻👇🏻👇🏻
打卡 文章 更新 58/ 100天
專欄推薦閱讀：
ECharts+HTML5大資料模板《100套》
HTML5大作業實戰案例《100套》
Java畢設專案精品實戰案例《100套》
轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/301470.html
標籤：其他