基于Echarts+HTML5可视化数据大屏展示—新能源车联网综合大数据平台（二）
生活随笔
收集整理的這篇文章主要介紹了
基于Echarts+HTML5可视化数据大屏展示—新能源车联网综合大数据平台（二）
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
🍅 作者主頁：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: ": <br/>{c} (ozvdkddzhkzd%)"},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],'?？?#39;:[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套》
總結
以上是生活随笔為你收集整理的基于Echarts+HTML5可视化数据大屏展示—新能源车联网综合大数据平台（二）的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 《零基础》MySQL删除数据表(十)
- 下一篇： HTML+CSS+JS实现 ❤️透明的水