當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

基于Echarts实现可视化数据大屏大数据看板

發布時間：2023/12/8 编程问答 34 豆豆

生活随笔收集整理的這篇文章主要介紹了基于Echarts实现可视化数据大屏大数据看板小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

前言

🚀 基于 Echarts 實現可視化數據大屏響應式展示效果的源碼,，基于html+css+javascript+echarts制作，可以在此基礎上重新開發。

本項目中使用的是echarts圖表庫，ECharts 提供了常規的折線圖、柱狀圖、散點圖、餅圖、K線圖，用于統計的盒形圖，用于地理數據可視化的地圖、熱力圖、線圖，用于關系數據可視化的關系圖、treemap、旭日圖，多維數據可視化的平行坐標，還有用于 BI 的漏斗圖，儀表盤，并且支持圖與圖之間的混搭。

?精彩專欄推薦👇🏻👇🏻👇🏻

? 【作者主頁——🔥獲取更多優質源碼】

? 【1000套畢設項目精品實戰案例】

? 【 20套 VUE+Echarts 大數據可視化源碼】

? 【150套 HTML+ Echarts大數據可視化源碼】

文章目錄

前言
一、Echart是什么
二、ECharts入門教程
三、作品演示
四、代碼實現
- 1.HTML
- 2.CSS
- 3.JavaScript
五、更多干貨

一、Echart是什么

ECharts是一個使用 JavaScript 實現的開源可視化庫，可以流暢的運行在 PC 和移動設備上，兼容當前絕大部分瀏覽器（IE8/9/10/11，Chrome，Firefox，Safari等），底層依賴矢量圖形庫 ZRender，提供直觀，交互豐富，可高度個性化定制的數據可視化圖表。

二、ECharts入門教程

5 分鐘上手ECharts

三、作品演示

四、代碼實現

1.HTML

<!DOCTYPE html> <html><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=Edge，chrome=1"><meta name="renderer" content="webkit"><title>理工云</title><link rel="stylesheet" href="https://www.jq22.com/jquery/bootstrap-3.3.4.css"><link rel="stylesheet" href="css/index.css" /><script type="text/javascript" src="js/jquery.js"></script> </head><body><div class="main clearfix"><div class="main-left"><div class="border-container containertop"><h5 class="name-title tile-size-color">設備狀態</h5><div id="radar"><div class="radarkong"><p class="tile-size-color">設備總數 :<span class="Totalequipment">660個</span> 統計時間 :<span>2019.03.26 15:28</span></p></div><div class="pie-chart" id="pie-chart"></div><ul class="SiteStatusList"><li><i class="Statusnormal Statussame"></i> 正常：<span>556</span></li><li><i class="Statusemergency Statussame"></i> 告警：<span>40</span></li><li><i class="StatusOffline Statussame"></i> 離線：<span>30</span></li></ul></div></div><div class="border-container containerbottom"><div class="name-title tile-size-color">設備類型分布</div><div class="graduateyear"><div class="bar-chart" id="bar-chart"></div><ul class="SiteStatusList"><li>本周數據</li><li class="DataSwitch"><i class="ThisweekData Datasame" onclick="DataSwitch(this,1)"></i><i class="ThisweekData" onclick="DataSwitch(this,2)"></i></li><li class="Defaultgray">本月數據</li></ul></div></div></div><div class="main-middle"><div class="border-container containertop"><div class="name-title tile-size-color">故障設備區域分布情況</div><div id="mapadd"><div class="mapleft"><div class="progress2-chart" id="progress2-chart"></div><a href="###" class="progressMore">更多></a></div><div class="map-chart" id="map-chart"></div><ul class="Devicestatus-List"><li class="Online2">65.5% <span class="DevicestatusName">在線</span></li><li class="Online2">10.5% <span class="DevicestatusName">離線</span></li><li class="Online2">10.5% <span class="DevicestatusName">維護</span></li><li class="Online2">9.5% <span class="DevicestatusName">故障</span></li></ul></div></div><div class="border-container containerbottom borderno-container"><ul class="teacher-pie clearfix"><li class="teacherList"><div class="name-title tile-size-color">故障時段分布</div><div id="courserate"><div class="line-chart" id="line-chart"></div><ul class="SiteStatusList"><li><i class="Statusnormal Statussame"></i> 合計故障次數 <span>556</span></li></ul></div></li><li class="teacherList"><div class="name-title tile-size-color">故障類型分布</div><div class="bars-chart" id="bars-chart"></div></li></ul></div></div><div class="main-right"><div class="border-container containertop"><div class="name-title tile-size-color">優秀區域排名</div><div class="progress1-chart" id="progress1-chart"></div></div><div class="border-container containerbottom"><div class="name-title tile-size-color">故障類型分布</div><div id="radar-chart" class="radar-chart"></div></div></div></div><script src="https://www.jq22.com/jquery/echarts-4.2.1.min.js"></script><script type="text/javascript" src="js/new_file.js"></script><script type="text/javascript" src="js/maps.js"></script><script type="text/javascript">var s = `/*********************/更多大數據模板源碼微信：h521520ssQQ：1453653837點擊確定關閉提示，刷新頁面重新顯示/*********************/`console.log(s);</script> </body></html>

2.CSS

@charset "utf-8"; body, html, .main {height: 100%;width: 100% }body, ul, li, p, h1, h2, h3, h4, h5, h6, dl, dt, dd, ol {margin: 0;padding: 0 }ul, li, ol {list-style: none }a:link, a:visited, a:active {text-decoration: none }body {background: #040f3c }.main-left, .main-right {float: left;width: 28%;height: 100%;padding: 0 5px }.main-middle {float: left;width: 44%;height: 100%;padding: 0 5px }.border-container {position: relative;margin-top: 10px;border: 1px solid #24214e }.main-middle .borderno-container {border-top: none;border-bottom: none }.name-title {background: #4545e3;padding: 8px 14px;border-bottom-right-radius: 6px;border-bottom-left-radius: 6px;position: absolute;left: 5% }.tile-size-color {font-size: 12px;color: #fff }.containertop {height: 50% }.containerbottom {height: 47% }#radar, .graduateyear, .bar-chart, #courserate, .line-chart, .bars-chart, .radar-chart, .progress1-chart, #mapadd, .progress2-chart {height: 100% }#mapadd {position: relative }#radar .radarkong {height: 17%;position: relative }.Totalequipment {margin-right: 18px }#radar .radarkong p {position: absolute;bottom: 0;text-align: center;width: 100% }.SiteStatusList {position: absolute;bottom: 10%;color: #fff;font-size: 12px;width: 100%;display: flex;justify-content: center;flex-direction: row;align-items: center }.SiteStatusList li:first-child {margin-left: 22px }.SiteStatusList li {margin-right: 20px }.SiteStatusList .Statussame {float: left;padding: 5px;margin-top: 2px;margin-right: 5px }.SiteStatusList .Statusnormal {background: #4f8bf9 }.SiteStatusList .Statusemergency {background: #fea31e }.SiteStatusList .StatusOffline {background: #959595 }.SiteStatusList .ThisweekData, .SiteStatusList .ThisweekData {padding: 7px;border-radius: 50%;float: left;cursor: pointer }.SiteStatusList .Datasame {background: #39c1f5 }.SiteStatusList .Defaultgray {color: #959595 }.SiteStatusList .DataSwitch {background: #555474;border-radius: 10px }.teacher-pie, .teacher-pie .teacherList {height: 100% }.teacher-pie .teacherList {border: 1px solid #24214e;position: relative }.teacher-pie .teacherList:first-child {width: 50%;border-left: none;float: left }.teacher-pie .teacherList .name-title {padding-left: 10px }.teacher-pie .teacherList:last-child {width: 49%;border-right: none;float: right }.number-show {position: absolute;top: 20%;right: 5% }#mapadd .mapleft {width: 33%;height: 100%;float: left;position: relative }#mapadd .progressMore {color: #fff;font-size: 12px;position: absolute;right: 7%;top: 60%;text-decoration: underline }#mapadd .map-chart {width: 65%;height: 100%;float: left }#mapadd .Devicestatus-List {width: 50%;position: absolute;bottom: 12%;left: 4%;color: #fff }#mapadd .Devicestatus-List li {float: left;height: 35px;margin-right: 1%;line-height: 35px;position: relative }#mapadd .Devicestatus-List li:nth-of-type(1) {width: 65.5%;border: 1px solid #3ae034;background: rgba(58, 224, 52, .5) }#mapadd .Devicestatus-List li:nth-of-type(2) {width: 10.5%;border: 1px solid #778699;background: rgba(199, 134, 153, .5) }#mapadd .Devicestatus-List li:nth-of-type(3) {width: 10.5%;border: 1px solid #1b9fff;background: rgba(27, 159, 255, .5) }#mapadd .Devicestatus-List li:nth-of-type(4) {width: 9.5%;border: 1px solid #e77407;background: rgba(213, 116, 7, .5) }.Devicestatus-List .DevicestatusName {position: absolute;top: -35px;left: 0 }.pie-chart {width: 100%;height: 82% }

3.JavaScript

$(function() {pieChar();barChar([20, 60, 82, 60]);linchar();barschar();radarchar();progress1char();progress2char();mapchar(); }); window.onresize = function() {pieChart.resize();barChart.resize();linchart.resize();barschart.resize();radarchart.resize();progress1chart.resize();progress2chart.resize();mapchart.resize() } var pieChart = "";function pieChar() {pieChart = echarts.init(document.getElementById("pie-chart"));option = {color: ["#4f8bf9", "#fea31e", "#959595"],tooltip: {trigger: 'item',formatter: "{a} <br/>{b}: {c} (ozvdkddzhkzd%)"},series: [{name: '訪問來源',type: 'pie',selectedMode: 'single',radius: [0, '60%'],center: ["50%", "42%"],label: {normal: {position: 'outside',formatter: "{b}:ozvdkddzhkzd%"}},data: [{value: 556,name: '正常'}, {value: 100,name: '告警',selected: true}, {value: 30,name: '離線'}]}]};pieChart.setOption(option); } var barChart = "";function barChar(data) {barChart = echarts.init(document.getElementById("bar-chart"));option = {tooltip: {formatter: '{b}:{c}'},grid: {left: '15%',right: '15%',bottom: '20%',top: '20%',containLabel: true,z: 22},xAxis: {data: ["NHN", "TP", "NP", "COD"],axisLabel: {textStyle: {color: '#fff',fontSize: 12,}},axisLine: {lineStyle: {type: 'solid',color: '#24214e',width: '1 ',}},},yAxis: {name: "（數次）",nameTextStyle: {color: "#fff"},nameLocation: "center",nameGap: 30,nameRotate: -270,axisLabel: {textStyle: {color: '#fff',fontSize: 12,}},axisLine: {lineStyle: {type: 'solid',color: '#24214e',width: '1 ',}},splitLine: {lineStyle: {color: "#24214e",}}},series: [{type: 'bar',barWidth: 20,data: data,itemStyle: {normal: {color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{offset: 0,color: '#4f92fa'}, {offset: 0.5,color: '#565cf8'}, {offset: 1,color: '#5d29f7'}, ])}},}]};barChart.setOption(option) } var linchart = "";function linchar() {linchart = echarts.init(document.getElementById("line-chart"));option = {tooltip: {formatter: '{b}  {c}次'},grid: {left: '15%',right: '15%',bottom: '20%',top: '20%',containLabel: true,z: 22},xAxis: {data: ['00:00', '06:00', '12:00', '18:00', '24:00'],axisLabel: {textStyle: {color: '#fff',fontSize: 12,}},axisLine: {lineStyle: {type: 'solid',color: '#24214e',width: '1 ',}},},yAxis: {name: "（數次）",nameTextStyle: {color: "#fff"},nameLocation: "center",nameGap: 30,nameRotate: -270,axisLabel: {textStyle: {color: '#fff',fontSize: 12,}},axisLine: {lineStyle: {type: 'solid',color: '#24214e',width: '1 ',}},splitLine: {lineStyle: {color: "#24214e",}}},series: [{type: 'line',data: [40, 182, 191, 234, 290],itemStyle: {normal: {lineStyle: {width: 3,},color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{offset: 1,color: '#508ff6'}, {offset: 0,color: '#2c137a'}], false),opacity: 0.4}},}]};linchart.setOption(option) } var barschart = ""function barschar() {barschart = echarts.init(document.getElementById("bars-chart"));option = {color: ["#fd8f1e", "#7cb5ec", "#4280f1", "#957bde"],tooltip: {trigger: 'axis',axisPointer: {type: 'shadow'}},grid: {left: '10%',right: '15%',bottom: '20%',top: '20%',containLabel: true,z: 22},legend: {data: ['進樣異常', '缺試劑A', '缺試劑B', '消解異常'],textStyle: {fontSize: 12,color: "#fff"},icon: "rect",itemWidth: 10,itemHeight: 10,bottom: "9%"},xAxis: {name: '次數',nameTextStyle: {color: "#fff"},axisLabel: {textStyle: {color: '#fff',fontSize: 12,}},splitLine: {lineStyle: {color: "#24214e",}},axisLine: {lineStyle: {type: 'solid',color: '#24214e',width: '1 ',}}},yAxis: {data: ['2018.11', '2018.12', '2019.01', '2019.02', '2019.03'],axisLabel: {textStyle: {color: '#fff',fontSize: 12,}},axisLine: {lineStyle: {type: 'solid',color: '#24214e',width: '1 ',}},},series: [{name: '進樣異常',type: 'bar',stack: '總量',barWidth: 20,label: {normal: {show: false,position: 'insideRight'}},data: [6, 4, 10, 8, 7]}, {name: '缺試劑A',type: 'bar',barWidth: 20,stack: '總量',label: {normal: {show: false,position: 'insideRight'}},data: [8, 10, 4, 5, 6]}, {name: '缺試劑B',type: 'bar',stack: '總量',barWidth: 20,label: {normal: {show: false,position: 'insideRight'}},data: [6, 4, 10, 8, 7]}, {name: '消解異常',type: 'bar',stack: '總量',barWidth: 20,label: {normal: {show: false,position: 'insideRight'}},data: [6, 4, 10, 8, 7]}, ]};barschart.setOption(option) }; var radarchart = "";function radarchar() {radarchart = echarts.init(document.getElementById("radar-chart"));option = {color: ['#623ad1', '#3383fc'],tooltip: {},radar: [{indicator: [{text: '進樣異常',max: 100}, {text: '缺試劑A',max: 100}, {text: '消解異常',max: 100}, {text: '缺純水',max: 100}, {text: '缺試劑B',max: 100}],center: ['50%', '60%'],radius: '65%',startAngle: 90,name: {formatter: '{value}',textStyle: {fontSize: 12,color: '#FFF'}},splitArea: {show: true,areaStyle: {color: [],}},axisLine: {lineStyle: {color: '#24214e'}},splitLine: {lineStyle: {color: '#24214e',width: 1,}}}, ],series: [{name: '雷達圖',type: 'radar',data: [{name: '2016',value: [85, 65, 55, 90, 82],areaStyle: {normal: {opacity: 1}},symbolSize: 0,}, {name: '2017',value: [50, 80, 45, 30, 75],symbolSize: 0,areaStyle: {normal: {color: {type: 'linear',x: 0,y: 0,x2: 1,y2: 1,colorStops: [{offset: 0,color: '#3cd2f3'}, {offset: 1,color: '#306eff'}],globalCoord: false},opacity: 1}},}]}]};radarchart.setOption(option) } var progress1chart = "";function progress1char() {progress1chart = echarts.init(document.getElementById("progress1-chart"));var baifenbi = [0.333, 0.444, 0.555, 0.777, 0.888];var grayBar = [1, 1, 1, 1, 1, ];var paiming = [5, 4, 3, 2, 1];var xingm = ['寧波', '臺州', '焦作', '邢臺', '嘉興'];option = {title: {text: '2019年第一季度',left: '75%',top: "20",textStyle: {color: "#fff",fontSize: 12}},grid: {left: '15%',right: '15%',bottom: '5%',top: '20%',containLabel: true},xAxis: [{show: false,}, {show: false,}],yAxis: {type: 'category',axisLabel: {show: true,},axisTick: {show: false,},axisLine: {show: false,},},series: [{show: true,type: 'bar',barGap: '-100%',barWidth: '10%',itemStyle: {normal: {barBorderRadius: 50,color: 'rgba(41, 55, 94)'},},z: 1,data: grayBar,}, {show: true,type: 'bar',barGap: '-100%',barWidth: '10%',itemStyle: {normal: {barBorderRadius: 50,color: {colorStops: [{offset: 0,color: '#5d29f7'}, {offset: 1,color: '#5093fb'}],globalCoord: false,}},},max: 1,label: {normal: {show: true,textStyle: {color: '#fff',},position: [0, '-35'],rich: {yellow: {color: '#FEC735',}},formatter: function(data) {if (paiming[data.dataIndex] == 1 || paiming[data.dataIndex] == 2 || paiming[data.dataIndex] == 3) {return '{yellow|' + paiming[data.dataIndex] + ' ' + xingm[data.dataIndex] + '}';} else {return paiming[data.dataIndex] + ' ' + xingm[data.dataIndex]}},}},data: baifenbi,}, ]};progress1chart.setOption(option) }function DataSwitch(obj, num) {$(obj).removeClass("Datasame");$(obj).siblings().addClass("Datasame")if (num == 1) {$(obj).parent().prev().addClass("Defaultgray");$(obj).parent().next().removeClass("Defaultgray");barChar([100, 20, 60, 81])} else {barChar()$(obj).parent().prev().removeClass("Defaultgray");$(obj).parent().next().addClass("Defaultgray");barChar([10, 20, 50, 81])} }

五、更多干貨

1.如果我的博客對你有幫助、如果你喜歡我的博客內容，請 “👍點贊” “??評論” “💙收藏” 一鍵三連哦！

2.【👇🏻👇🏻👇🏻關注我| 獲取更多源碼 | 優質文章】帶您學習各種前端插件、3D炫酷效果、圖片展示、文字效果、以及整站模板、大學生畢業HTML模板、期末大作業模板、Echarts大數據可視化, 等! 「一起探討 web前端 ,Node ,Java 知識，互相學習」！

3.以上內容技術相關問題😈歡迎一起交流學習👇🏻👇🏻👇🏻🔥

總結

以上是生活随笔為你收集整理的基于Echarts实现可视化数据大屏大数据看板的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇： AlwaysOn3节点集群方案windo
下一篇： python人民币金额转汉字大写