前言
🚀 基于 Echarts 实现可视化数据大屏响应式展示效果的源码,，基于html+css+javascript+echarts制作， 可以在此基础上重新开发。
本项目中使用的是echarts图表库，ECharts 提供了常规的折线图、柱状图、散点图、饼图、K线图，用于统计的盒形图，用于地理数据可视化的地图、热力图、线图，用于关系数据可视化的关系图、treemap、旭日图，多维数据可视化的平行坐标，还有用于 BI 的漏斗图，仪表盘，并且支持图与图之间的混搭。
⚽精彩专栏推荐👇🏻👇🏻👇🏻
❤ 【作者主页——🔥获取更多优质源码】
❤ 【1000套 毕设项目精品实战案例】
❤ 【 20套 VUE+Echarts 大数据可视化源码】
❤ 【150套 HTML+ Echarts大数据可视化源码 】
文章目录
一、Echart是什么
ECharts是一个使用 JavaScript 实现的开源可视化库，可以流畅的运行在 PC 和移动设备上，兼容当前绝大部分浏览器（IE8/9/10/11，Chrome，Firefox，Safari等），底层依赖矢量图形库 ZRender，提供直观，交互丰富，可高度个性化定制的数据可视化图表。
二、ECharts入门教程
5 分钟上手ECharts
三、作品演示
四、代码实现
1.HTML
<!DOCTYPEhtml><html><head><metacharset="UTF-8"/><metaname="viewport"content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"/><title>树图 - 基于ECharts V4.2</title><linkrel="stylesheet"type="text/css"href="css/app.css"/></head><body><divid="container"><divclass="chart-div"id="treeChart"><divclass="chart-loader"><divclass="loader"></div></div></div></div><scriptsrc="https://www.jq22.com/jquery/jquery-1.10.2.js"></script><scriptsrc="https://www.jq22.com/jquery/echarts-4.2.1.min.js"></script><scripttype="text/javascript"src="js/echarts-theme-shine.js"></script><scripttype="text/javascript">$(function(){//初始化报表对象并指定其风格const treeChart = echarts.init(document.getElementById("treeChart"),'shine');//虚拟数据const treeData1 ={name:'董事会结构',symbolSize:10,itemStyle:{color:'#d4237a'},label:{fontSize:14},children:[{name:'董事会独立性',symbolSize:8,itemStyle:{color:'#d4237a'},children:[{name:'董事会总人数',itemStyle:{color:'#d4237a'}},{name:'行业内董事会规模人数均值',itemStyle:{color:'#d4237a'}},{name:'独立董事人数',itemStyle:{color:'#d4237a'}},{name:'执行董事人数',itemStyle:{color:'#d4237a'}},{name:'董事长是否兼任其他高管',itemStyle:{color:'#d4237a'}},{name:'董事长是否来自大股东',itemStyle:{color:'#d4237a'}},{name:'兼任经理层的董事人数',itemStyle:{color:'#d4237a'}},{name:'是否含有党员董事',itemStyle:{color:'#d4237a'}}]},{name:'董事会专业性',symbolSize:8,itemStyle:{color:'#d4237a'},children:[{name:'委员会主任是否独董担任',itemStyle:{color:'#d4237a'}},{name:'专业独立董事人数',itemStyle:{color:'#d4237a'}},{name:'董事变更时间',itemStyle:{color:'#d4237a'}},{name:'战略决策委员会',itemStyle:{color:'#d4237a'}},{name:'提名委员会',itemStyle:{color:'#d4237a'}},{name:'薪酬委员会',itemStyle:{color:'#d4237a'}},{name:'审计委员会',itemStyle:{color:'#d4237a'}}]}]};const treeData2 ={name:'董事会行为',symbolSize:10,itemStyle:{color:'#e6b600'},label:{fontSize:14},children:[{name:'专门委员会会议',symbolSize:8,itemStyle:{color:'#e6b600'},children:[{name:'召开次数',itemStyle:{color:'#e6b600'}},{name:'独董出席比率',itemStyle:{color:'#e6b600'}},{name:'提交董事会议题数',itemStyle:{color:'#e6b600'}},{name:'董事会采纳议题数',itemStyle:{color:'#e6b600'}}]},{name:'董事会会议',symbolSize:8,itemStyle:{color:'#e6b600'},children:[{name:'召开次数',itemStyle:{color:'#e6b600'}},{name:'通讯会议次数',itemStyle:{color:'#e6b600'}},{name:'会议议题数',itemStyle:{color:'#e6b600'}},{name:'表决反对票数',itemStyle:{color:'#e6b600'}},{name:'独董出席比率',itemStyle:{color:'#e6b600'}},{name:'独董独立发表反对意见数',itemStyle:{color:'#e6b600'}}]},{name:'股东大会',symbolSize:8,itemStyle:{color:'#e6b600'},children:[{name:'股东大会的董事出席率',itemStyle:{color:'#e6b600'}},{name:'股东大会是否采用累积投票制',itemStyle:{color:'#e6b600'}},{name:'股东大会决议事项投票率',itemStyle:{color:'#e6b600'}},{name:'董事会决议事项反对率',itemStyle:{color:'#e6b600'}}]},{name:'与党委的关系',symbolSize:8,itemStyle:{color:'#e6b600'},children:[{name:'党建条款是否进入公司章程',itemStyle:{color:'#e6b600'}},{name:'党委与董事会成员是否双向进入、交叉任职',itemStyle:{color:'#e6b600'}},{name:'决策程序上是否党委会前置',itemStyle:{color:'#e6b600'}},{name:'是否披露党委会等党组织参与治理情况',itemStyle:{color:'#e6b600'}}]}]};const treeData3 ={name:'社会责任',symbolSize:10,itemStyle:{color:'#005eaa'},label:{fontSize:14},children:[{name:'社会',symbolSize:8,itemStyle:{color:'#005eaa'},children:[{name:'每股社会责任值',itemStyle:{color:'#005eaa'}},{name:'纳税总额',itemStyle:{color:'#005eaa'}},{name:'就业人数',itemStyle:{color:'#005eaa'}},{name:'环保、扶贫和慈善投入',itemStyle:{color:'#005eaa'}}]},{name:'股东',symbolSize:8,itemStyle:{color:'#005eaa'},children:[{name:'净资产收益率',itemStyle:{color:'#005eaa'}},{name:'市值增值率',itemStyle:{color:'#005eaa'}},{name:'股息率',itemStyle:{color:'#005eaa'}}]},{name:'员工',symbolSize:8,itemStyle:{color:'#005eaa'},children:[{name:'员工收入增幅',itemStyle:{color:'#005eaa'}},{name:'公司人均薪酬',itemStyle:{color:'#005eaa'}},{name:'行业平均人均薪酬',itemStyle:{color:'#005eaa'}},{name:'是否员工持股',itemStyle:{color:'#005eaa'}}]},{name:'客户',symbolSize:8,itemStyle:{color:'#005eaa'},children:[{name:'研发占比',itemStyle:{color:'#005eaa'}},{name:'市场份额',itemStyle:{color:'#005eaa'}},{name:'毛利率',itemStyle:{color:'#005eaa'}}]},{name:'外部评价',symbolSize:8,itemStyle:{color:'#005eaa'},children:[{name:'是否入选上市公司“金圆桌奖”',itemStyle:{color:'#005eaa'}},{name:'是否进入明晟指数',itemStyle:{color:'#005eaa'}},{name:'是否上证180治理',itemStyle:{color:'#005eaa'}},{name:'负面新闻报道转载数',itemStyle:{color:'#005eaa'}}]}]};const treeData4 ={name:'信息披露',symbolSize:10,itemStyle:{color:'#339ca8'},label:{fontSize:14},children:[{name:'披露日期',symbolSize:8,itemStyle:{color:'#339ca8'},children:[{name:'年报披露日期距1月1日的天数',itemStyle:{color:'#339ca8'}},{name:'半年报披露日期距7月1日的天数',itemStyle:{color:'#339ca8'}},{name:'一季报披露日期距4月1日的天数',itemStyle:{color:'#339ca8'}},{name:'三季报披露日期距10月1日的天数',itemStyle:{color:'#339ca8'}},]},{name:'披露一致性',symbolSize:8,itemStyle:{color:'#339ca8'},children:[{name:'信息披露、定期报告披露后的更正数量',itemStyle:{color:'#339ca8'}},{name:'业绩预告与正式公告是否一致',itemStyle:{color:'#339ca8'}}]},{name:'内部控制',symbolSize:8,itemStyle:{color:'#339ca8'},children:[{name:'内部控制文件累计数量（个）',itemStyle:{color:'#339ca8'}},{name:'是否披露内部控制评价',itemStyle:{color:'#339ca8'}},{name:'是否披露内部控制缺陷',itemStyle:{color:'#339ca8'}},{name:'是否有效实施内部控制缺陷整改',itemStyle:{color:'#339ca8'}}]},{name:'当初审计报告意见',itemStyle:{color:'#339ca8'},symbolSize:8,children:[{name:'标准无保留',itemStyle:{color:'#339ca8'}},{name:'拒绝发表意见',itemStyle:{color:'#339ca8'}},{name:'否定意见',itemStyle:{color:'#339ca8'}}]}]};const treeData5 ={name:'董事薪酬、激励及约束',symbolSize:10,itemStyle:{color:'#7760f6'},label:{fontSize:14},children:[{name:'非独立董事薪酬与激励',symbolSize:8,itemStyle:{color:'#7760f6'},children:[{name:'董事本年薪酬',itemStyle:{color:'#7760f6'}},{name:'行业董事平均薪酬',itemStyle:{color:'#7760f6'}},{name:'董事持股人数',itemStyle:{color:'#7760f6'}},{name:'平均持股比例',itemStyle:{color:'#7760f6'}},{name:'董事增持次数',itemStyle:{color:'#7760f6'}},{name:'董事减持次数',itemStyle:{color:'#7760f6'}}]},{name:'独立董事津贴',symbolSize:8,itemStyle:{color:'#7760f6'},children:[{name:'独立董事本年津贴',itemStyle:{color:'#7760f6'}},{name:'行业独立董事平均津贴',itemStyle:{color:'#7760f6'}}]},{name:'董事责任',symbolSize:8,itemStyle:{color:'#7760f6'},children:[{name:'董事是否遭批评、谴责、禁入等处罚',itemStyle:{color:'#7760f6'}},{name:'诉讼金额',itemStyle:{color:'#7760f6'}},{name:'赔偿金额',itemStyle:{color:'#7760f6'}}]}]};const treeData ={name:'董事会指标体系',symbolSize:12,label:{fontSize:16},children:[
treeData1,
treeData2,
treeData3,
treeData4,
treeData5
]};const treeChartOpt ={title:{text:"董事会指标体系层级结构",subtext:"纯属虚构",textStyle:{color:"#fff"},subtextStyle:{fontSize:12},left:15,top:15},series:[{name:'董事会指标体系',type:'tree',left:'5%',right:'20%',top:'1%',bottom:'1%',orient:'LR',//方向initialTreeDepth:0,//深度symbol:'circle',itemStyle:{color:'#ab2042',borderColor:'#9aa8d4'},lineStyle:{width:1,curveness:.9},label:{color:'#9aa8d4',position:'bottom'},leaves:{label:{position:'right'}},data:[treeData]}]};
treeChart.setOption(treeChartOpt);//动态逐层级显示let deep =1;let intervalId = window.setInterval(function(){
treeChart.setOption({series:[{name:'董事会指标体系',initialTreeDepth: deep++}]});if(deep >3){
window.clearInterval(intervalId);}},1000);//浏览器窗口发生变化时，重置报表大小$(window).resize(function(){
treeChart.resize();});});</script></body></html>
2.CSS
@charset"utf-8";*{margin: 0;padding: 0;box-sizing: border-box
}html,
body{width: 100%;height: 100%;min-width: 1200px;min-height: 600px;overflow: hidden
}body{position: relative;font-family: microsoft yahei, Arial, sans-serif;background-color: #0a0f2e
}#header{position: relative;height: 64px;background-repeat: no-repeat;background-position: 0 0/100% 100% no-repeat;background-color: #030c3b;overflow: hidden
}#header .title{line-height: 64px;text-align: center;font-size: 32px;font-weight: 400;color: #fff
}#container{position: absolute;top: 0;bottom: 0;left: 0;right: 0
}.chart-div{width: 100%;height: 100%
}@media(max-width:1900px){#header{height: 36px
}#header .title{line-height: 36px;font-size: 18px
}#container{top: 0
}}.chart-loader{position: absolute;top: 0;left: 0;z-index: 99;width: 100%;height: 100%;background: transparent;transition: all .8s
}.chart-loader .loader{position: absolute;left: 50%;top: 50%;width: 60px;height: 60px;margin: -30px 0 0 -30px;border: 3px solid transparent;border-top-color: #3498db;border-radius: 50% !important;-webkit-animation: spin 2s linear infinite;animation: spin 2s linear infinite
}.chart-loader .loader:before{content:"";position: absolute;top: 3px;left: 5px;right: 5px;bottom: 5px;border: 3px solid transparent;border-top-color: #e74c3c;border-radius: 50% !important;-webkit-animation: spin 3s linear infinite;animation: spin 3s linear infinite
}.chart-loader .loader:after{content:"";position: absolute;top: 9px;left: 10px;right: 10px;bottom: 10px;border: 3px solid transparent;border-top-color: #f9c922;border-radius: 50% !important;-webkit-animation: spin 1.5s linear infinite;animation: spin 1.5s linear infinite
}.chart-done .chart-loader{display: none
}@-webkit-keyframes spin{0%{-webkit-transform:rotate(0deg);-ms-transform:rotate(0deg);transform:rotate(0deg)}100%{-webkit-transform:rotate(360deg);-ms-transform:rotate(360deg);transform:rotate(360deg)}}@keyframes spin{0%{-webkit-transform:rotate(0deg);-ms-transform:rotate(0deg);transform:rotate(0deg)}100%{-webkit-transform:rotate(360deg);-ms-transform:rotate(360deg);transform:rotate(360deg)}}
3.JavaScript
(function(root, factory){if(typeof define ==='function'&& define.amd){define(['exports','echarts'], factory);}elseif(typeof exports ==='object'&&typeof exports.nodeName !=='string'){factory(exports,require('echarts'));}else{factory({}, root.echarts);}}(this,function(exports, echarts){varlog=function(msg){if(typeof console !=='undefined'){
console && console.error && console.error(msg);}};if(!echarts){log('ECharts is not Loaded');return;}var colorPalette =['#c12e34','#e6b600','#0098d9','#2b821d','#005eaa','#339ca8','#cda819','#32a487'];var theme ={color: colorPalette,title:{textStyle:{fontWeight:'normal'}},visualMap:{color:['#1790cf','#a2d4e6']},toolbox:{iconStyle:{normal:{borderColor:'#06467c'}}},tooltip:{backgroundColor:'rgba(0,0,0,0.6)'},dataZoom:{dataBackgroundColor:'#dedede',fillerColor:'rgba(154,217,247,0.2)',handleColor:'#005eaa'},timeline:{lineStyle:{color:'#005eaa'},controlStyle:{normal:{color:'#005eaa',borderColor:'#005eaa'}}},candlestick:{itemStyle:{normal:{color:'#c12e34',color0:'#2b821d',lineStyle:{width:1,color:'#c12e34',color0:'#2b821d'}}}},graph:{color: colorPalette
},map:{label:{normal:{textStyle:{color:'#c12e34'}},emphasis:{textStyle:{color:'#c12e34'}}},itemStyle:{normal:{borderColor:'#eee',areaColor:'#ddd'},emphasis:{areaColor:'#e6b600'}}},gauge:{axisLine:{show:true,lineStyle:{color:[[0.2,'#2b821d'],[0.8,'#005eaa'],[1,'#c12e34']],width:5}},axisTick:{splitNumber:10,length:8,lineStyle:{color:'auto'}},axisLabel:{textStyle:{color:'auto'}},splitLine:{length:12,lineStyle:{color:'auto'}},pointer:{length:'90%',width:3,color:'auto'},title:{textStyle:{color:'#333'}},detail:{textStyle:{color:'auto'}}}};
echarts.registerTheme('shine', theme);}));
五、更多干货
1.如果我的博客对你有帮助、如果你喜欢我的博客内容，
请 “👍点赞” “✍️评论” “💙收藏”
一键三连哦！
带您学习各种前端插件、3D炫酷效果、图片展示、文字效果、以及整站模板 、大学生毕业HTML模板 、期末大作业模板 、Echarts大数据可视化, 等! 「一起探讨 web前端 ,Node ,Java 知识，互相学习」！【👇🏻👇🏻👇🏻关注我| 获取更多源码 | 优质文章】
3.以上内容技术相关问题😈欢迎一起交流学习👇🏻👇🏻👇🏻🔥
本文转载自: https://blog.csdn.net/bigwhiteshark/article/details/126344374
版权归原作者 IT-司马青衫 所有， 如有侵权，请联系我们删除。
版权归原作者 IT-司马青衫 所有， 如有侵权，请联系我们删除。