前言
🚀 基于 Echarts 实现可视化数据大屏响应式展示效果的源码,，基于html+css+javascript+echarts制作， 可以在此基础上重新开发。
本项目中使用的是echarts图表库，ECharts 提供了常规的折线图、柱状图、散点图、饼图、K线图，用于统计的盒形图，用于地理数据可视化的地图、热力图、线图，用于关系数据可视化的关系图、treemap、旭日图，多维数据可视化的平行坐标，还有用于 BI 的漏斗图，仪表盘，并且支持图与图之间的混搭。
⚽精彩专栏推荐👇🏻👇🏻👇🏻
❤ 【作者主页——🔥获取更多优质源码】
❤ 【1000套 毕设项目精品实战案例】
❤ 【 20套 VUE+Echarts 大数据可视化源码】
❤ 【150套 HTML+ Echarts大数据可视化源码 】
文章目录
前言一、Echart是什么二、ECharts入门教程三、作品演示四、代码实现1.HTML2.CSS3.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="/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>.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="/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} ({d}%)"},series: [{name: '访问来源',type: 'pie',selectedMode: 'single',radius: [0, '60%'],center: ["50%", "42%"],label: {normal: {position: 'outside',formatter: "{b}:{d}%"}},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: ['.11', '.12', '.01', '.02', '.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: '',value: [85, 65, 55, 90, 82],areaStyle: {normal: {opacity: 1}},symbolSize: 0,}, {name: '',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: ' 第一季度',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.以上内容技术相关问题😈欢迎一起交流学习👇🏻👇🏻👇🏻🔥
