做网站用模板,专题制作 wordpress,wordpress建站购买,苏州seo关键词排名#x1f345; 作者主页#xff1a;Java李杨勇 #x1f345; 简介#xff1a;Java领域优质创作者#x1f3c6;、Java李杨勇公号作者✌ 简历模板、学习资料、面试题库、技术互助【关注我#xff0c;都给你】 #x1f345; 欢迎点赞 #x1f44d; 收藏 ⭐留言 #x1f… 作者主页Java李杨勇  简介Java领域优质创作者、Java李杨勇公号作者✌  简历模板、学习资料、面试题库、技术互助【关注我都给你】 欢迎点赞 收藏 ⭐留言    动图演示 文末获取源码  代码目录 主要代码实现 主页HTML布局  !DOCTYPE html html langen headmeta charsetUTF-8title新能源车联网综合大数据平台/titlescript srcjs/jquery-2.1.1.min.js/scriptscript$(window).load(function(){ $(.loading).fadeOut()}) /scriptlink relstylesheet hrefcss/common.csslink relstylesheet hrefcss/map.css /head bodydiv classloadingdiv classloadbox img srcpicture/loading.gif 页面加载中... /div/div div classdatadiv classdata-titlediv classtitle-center 数据概览演示案例/div/divdiv classdata-contentdiv classcon-left fldiv classleft-topdiv classinfo boxstylediv classtitle实时统计/divdiv classinfo-mainulliimg srcpicture/info-img-1.png altspan车辆总数(辆)/spanp12,457/p/liliimg srcpicture/info-img-2.png altspan当前在线数(辆)/spanp12,457/p/liliimg srcpicture/info-img-3.png altspan今日活跃数(辆)/spanp12,457/p/liliimg srcpicture/info-img-4.png altspan今日活跃率(%)/spanp74%/p/li/ul/div/divdiv classtop-bottom boxstylediv classtitle行业分类/divdiv idecharts_1 classcharts/div/div/divdiv classleft-bottom boxstylediv classtitle车型分类/divdiv idecharts_2 classcharts/div/div/divdiv classcon-center fldiv classmap-nump实时行驶车辆(辆)/pdiv classnumspan1/spanspan5/spanspan4/spanspan9/spanspan2/spanspan6/spanspan8/span/div/divdiv classcen-top map idmap/divdiv classcen-bottom boxstylediv classtitle车辆充电高峰时间/divdiv idecharts_3 classcharts/div/div/divdiv classcon-right frdiv classright-top boxstylediv classtitle本月行驶里程TOP5/divdiv idecharts_4 classcharts/div/divdiv classright-center boxstylediv classtitle报警车辆TOP5/divdiv idecharts_5 classcharts/div/divdiv classright-bottom boxstylediv classtitle电池报警车辆TOP10/divdiv idecharts_6 classcharts/div/div/div/div /div /bodyscript srcjs/echarts.min.js/script script srcjs/china.js/script script srcjs/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 ~ 360center: [35%, 50%], //饼图的中心圆心坐标radius: [40, 60], //饼图的半径// avoidLabelOverlap: true, 是否启用防止标签重叠itemStyle: { //图形样式normal: {borderColor: transparent,borderWidth: 2,},},}, {name: ,type: pie,clockwise: false,silent: true,minAngle: 20, //最小的扇区角度0 ~ 360center: [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天 专栏推荐阅读 EChartsHTML5大数据模板《100套》 HTML5大作业实战案例《100套》 Java毕设项目精品实战案例《100套》