主题:新能源汽车大屏
开发技术:
Echarts+html+css+js
支持平台:
dw,vscode,webstorm,idea,Hbuilderx等
源码:文末附
如需定制开发大屏,可在公众号内联系作者
整体效果
部分js代码
<body style="font-size: 12px;"> <header> <h1>新能源汽车数量统计</h1> <div class="showTime"><span>2023-12-23 15:35:43</span></div> </header> <section class="mainbox"> <div class="column"> <div class="panel pie"> <h2>各类型新能源汽车上牌数</h2> <div class="chart" _echarts_instance_="ec_1703316923334" style="user-select: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); position: relative;"><div style="position: relative; width: 438px; height: 318px; padding: 0px; margin: 0px; border-width: 0px; cursor: default;"><canvas data-zr-dom-id="zr_0" width="438" height="318" style="position: absolute; left: 0px; top: 0px; width: 438px; height: 318px; user-select: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); padding: 0px; margin: 0px; border-width: 0px;"></canvas></div><div class=""></div></div> <div class="panel-footer"></div> </div> <div class="panel pie1"> <h2>新能源汽车不同价格的占比</h2> <div class="chart" _echarts_instance_="ec_1703316923335" style="user-select: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); position: relative;"><div style="position: relative; width: 438px; height: 318px; padding: 0px; margin: 0px; border-width: 0px;"><canvas data-zr-dom-id="zr_0" width="438" height="318" style="position: absolute; left: 0px; top: 0px; width: 438px; height: 318px; user-select: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); padding: 0px; margin: 0px; border-width: 0px;"></canvas></div><div class=""></div></div> <div class="panel-footer"></div> </div> </div> <div class="column"> <div class="no"> <div class="panel words"> <h2>用户评论</h2> <div class="chart" _echarts_instance_="ec_1703316923336" style="user-select: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0);"><div style="position: relative; width: 429px; height: 318px; padding: 0px; margin: 0px; border-width: 0px; cursor: default;"><canvas data-zr-dom-id="zr_0" width="429" height="318" style="position: absolute; left: 0px; top: 0px; width: 429px; height: 318px; user-select: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); padding: 0px; margin: 0px; border-width: 0px;"></canvas></div></div> <div class="panel-footer"></div> </div>
部分css代码
body {font-family: Arial, Helvetica, sans-serif;margin: 0;padding: 0;background-repeat: no-repeat; background-color: #06164A;background-size: cover;/* 行高是字体1.15倍 */line-height: 1.15; width: 100%;height: 100%;} header {position: relative;width: 100%;height: 1rem;background: url(../images/head_bg.png) no-repeat top center; background-size: 100% 100%;} header h1 {font-size: 0.475rem;color: #81E7ED;text-align: center;line-height: 1rem;} header .showTime {position: absolute;top: 0;right: 0.375rem;line-height: 0.9375rem; font-size: 0.25rem;color: #81E7ED;font-weight: 600;} .mainbox {width: 100%;height: calc(100% - 1.25rem);padding: 0.125rem;display: flex;} .mainbox .column {width: 25%;display: flex;justify-content: space-between;flex-direction: column;}
想要源码的小伙伴们，请关注公众号Echarts技术专家，点击获取资源。
