【Echarts大屏】大客户银行可视化大屏(附源码一键复制)

简介: 【Echarts大屏】大客户银行可视化大屏(附源码一键复制)

主题:数字化银行大屏

开发技术:

   Echarts+html+css+js

支持平台:

   dw,vscode,webstorm,idea,Hbuilderx等

源码:文末附

如需定制开发大屏,可在公众号内联系作者


部分js代码


</div>
        <div id="lo_8">
            <div style="height: 10%;">
                <button
                    onclick="async_echart_china('container_8', 'map_china_map/map_china_map.json', 'confirmAdd')">新增金额</button>
                <button
                    onclick="async_echart_china('container_8', 'map_china_map/map_china_map.json', 'confirm')">累计金额</button>
                <button
                    onclick="async_echart_china('container_8', 'map_china_map/map_china_map.json', 'nowConfirm')">现有金额</button>
            </div>
            <div id="container_8" style="height: 90%;"></div>
        </div>
        <div id="lo_9">9</div>
        <div id="lo_10">10</div>
    </div>
<!--    <ul id="right_menu" style="width: 200px;">-->
<!--        <li><img src="img/drop-down.png"> 主题列表</li>-->
<!--        <li>infographic</li>-->
<!--        <li>macarons</li>-->
<!--        <li>roma</li>-->
<!--        <li>shine</li>-->
<!--        <li>walden</li>-->
<!--        <li>westeros</li>-->
</body>
<!-- 用户自定义函数依赖 -->
<script type="text/javascript" src="js/udf/base.js"></script>

<!-- 鼠标右键切换主题 theme [2/2] -->
<script type="text/javascript" src="theme/js/switch_theme.js"></script>
<script type="text/javascript" src="pie_source/loader.js"></script>
<script type="text/javascript" src="line_visualMap/loader.js"></script>
<script type="text/javascript" src="line_area_chart/loader.js"></script>
<script type="text/javascript" src="map_china_map/loader.js"></script>
<script type="text/javascript" src="bar_stacked/loader.js"></script>
<script type="text/javascript" src="funnel/loader.js"></script>
<script type="text/javascript" src="bar_markLine/loader.js"></script>
<script type="text/javascript" src="pie_source_rose/loader.js"></script>
<script type="text/javascript" src="bar_ROA/loader.js"></script>
<script type="text/javascript" src="bar_horizontal/loader.js"></script>

</html>

部分CSS代码


::-moz-focus-inner {  padding: 0;  border-style: none;}
textarea {  resize: vertical;}
fieldset {  min-width: 0;  padding: 0;  margin: 0;  border: 0;}
legend {  float: left;  width: 100%;  padding: 0;  margin-bottom: 0.5rem;  font-size: calc(1.275rem + 0.3vw);
  line-height: inherit;}
@media (min-width: 1200px) {  legend {    font-size: 1.5rem;  }}
legend + * {  clear: left;}
::-webkit-datetime-edit-fields-wrapper,
::-webkit-datetime-edit-text,
::-webkit-datetime-edit-minute,
::-webkit-datetime-edit-hour-field,
::-webkit-datetime-edit-day-field,
::-webkit-datetime-edit-month-field,
::-webkit-datetime-edit-year-field {  padding: 0;}

::-webkit-inner-spin-button {  height: auto;}

[type=search] {  outline-offset: -2px;  -webkit-appearance: textfield;}

想要源码的小伙伴们,请关注公众号Echarts技术专家,点击获取资源。

目录
打赏
0
0
0
0
13
分享
相关文章
|
5月前
|
echarts根据上级元素的大小自动更新echarts(element-resize-detector)配合防抖解决大屏页面卡顿的问题
如何在Vue中使用`element-resize-detector`库来自动更新ECharts图表的大小,以适应其上级元素大小的变化,并结合使用防抖技术来解决大屏页面上的卡顿问题。
223 5
微信小程序图表制作利器:ECharts组件的使用与技巧
微信小程序图表制作利器:ECharts组件的使用与技巧
154 1
Echart的使用初体验,Echarts的基本使用及语法格式,简单图表绘制和使用及图例添加【学习笔记】
本文介绍了ECharts的基本使用和语法格式,包括如何引入ECharts、创建容器、初始化echarts实例对象、配置option参数和一些基础图表的绘制方法。文章还提供了简单图表绘制和使用图例添加的示例代码,以及对ECharts特性和优势的概述。
Echart的使用初体验,Echarts的基本使用及语法格式,简单图表绘制和使用及图例添加【学习笔记】
微信小程序使用echarts图表(ec-canvas)
这篇文章介绍了在微信小程序中使用`ec-canvas`集成echarts图表的方法,包括解决加载时报错的问题、配置图表组件、以及在小程序页面中引入和使用这些图表组件的步骤。
616 1
微信小程序使用echarts图表(ec-canvas)
|
4月前
|
vue中使用echarts绘制双Y轴图表时,刻度没有对齐的两种解决方法
vue中使用echarts绘制双Y轴图表时,刻度没有对齐的两种解决方法
889 0
|
6月前
Echarts——如何默认选中图表并显示tooltip
Echarts——如何默认选中图表并显示tooltip
139 1

热门文章

最新文章

AI助理

你好,我是AI助理

可以解答问题、推荐解决方案等