网站大屏展示，使用echart展示数据_echart大屏下载资源-CSDN文库

共126个文件

png：89个

js：14个

css：10个

大屏展示

echart数据

1星需积分: 50 52 浏览量 2020-03-27 09:06:54 上传评论 1 收藏 5.2MB ZIP 举报

在构建现代化的网站时，数据可视化是至关重要的一个环节，尤其在大屏展示场景下，它能够有效地将复杂的信息转化为直观、生动的图形。本文将深入探讨如何利用ECharts库来实现网站大屏数据展示，并结合相关的动画效果和内服地图资源的使用。 ECharts是由百度开发的一个开源JavaScript图表库，支持丰富的图表类型，如柱状图、折线图、饼图、散点图等，同时也提供强大的交互功能和高度自定义的选项，非常适合于网站数据的可视化需求。在大屏展示场景中，ECharts可以创建出引人注目的视觉效果，使数据更加易于理解和分析。要开始使用ECharts，你需要在HTML文件中引入ECharts的JavaScript库。可以通过CDN链接或者下载到本地后引用。接下来，你需要为ECharts准备一个容器元素，通常是`<div>`，并为其设置合适的宽高。在使用ECharts展示数据之前，需要先初始化图表实例，例如： ```javascript var myChart = echarts.init(document.getElementById('main')); ``` 然后，你需要定义一个配置对象，包含图表的类型、数据、样式等信息。例如，创建一个柱状图： ```javascript var option = { title: { text: '数据展示' }, xAxis: { data: ['类别1', '类别2', '类别3'] }, yAxis: {}, series: [{ name: '数值', type: 'bar', data: [10, 20, 30] }] }; ``` 在配置完成后，调用`setOption`方法将配置应用到图表实例上： ```javascript myChart.setOption(option); ``` 在大屏展示中，动画效果可以增强视觉体验。ECharts提供了丰富的动画配置，例如在数据更新时平滑过渡，或者在图表加载时添加入场动画。你可以在`option`中设置`animation`属性为`true`开启默认动画，也可以自定义动画参数来实现特定效果。对于地图展示，ECharts支持GeoJSON格式的地图数据，并且内置了世界地图、中国地图等。若需使用特定地区的地图，例如省份或城市地图，你需要向地图提供商（如高德、百度等）申请地图Key，并通过ECharts的`geo`组件加载地图资源。地图的配置方式与普通图表类似，需要指定地图类型、数据源和样式。在实际项目中，你可能需要处理动态数据，例如从服务器获取的实时数据。这时可以监听`setOption`的`notMerge`参数，当数据变化时更新图表而不重新渲染整个图表，以提高性能。 ECharts为网站大屏展示提供了强大而灵活的工具，通过精心设计的图表和动画效果，能够将枯燥的数据转化为富有视觉吸引力的展示。同时，内服地图的集成使得地理位置数据的展示变得简单易行。只要掌握基本的ECharts使用方法，就能创造出富有创意和实用性的数据可视化作品。

资源推荐

资源详情

资源评论

收起资源包目录

网站大屏展示，使用echart展示数据（126个子文件）

zhzf.css 6KB

spfw.css 6KB

index.css 5KB

wgzl.css 4KB

dzyl.css 4KB

jjfz.css 3KB

page1.css 2KB

daolan.css 964B

style.css 895B

综合执法.html 15KB

首页.html 11KB

审批服务.html 11KB

经济发展.html 10KB

网格治理.html 9KB

党政引领.html 7KB

简介.html 6KB

导览.html 1KB

page1_img1.jpg 483KB

daolan_img1.jpg 320KB

page1_img2.jpg 310KB

login_code_img.jpg 6KB

echarts.min.js 727KB

echarts-gl.min.js 657KB

china.js 61KB

simplex.js 17KB

ecStat.min.js 10KB

jjfz_echart.js 9KB

zhzf_echart.js 7KB

dzyl_echart.js 7KB

dayjs.min.js 7KB

bmap.min.js 5KB

map.js 5KB

wgzl_echart.js 4KB

dataTool.min.js 4KB

spfw_echart.js 2KB

page1_img3.png 1.07MB

page1_img4.png 996KB

page1_img7.png 654KB

page1_img5.png 228KB

map.png 136KB

dzyl_img01.png 92KB

dzyl_img02.png 84KB

dzyl_img07.png 82KB

page1_img6.png 57KB

dzyl_img05.png 17KB

dzyl_img06.png 17KB

dzyl_img03.png 17KB

dzyl_img04.png 17KB

daolan_img2.png 15KB

daolan_img5.png 11KB

daolan_img6.png 10KB

daolan_img7.png 9KB

daolan_img4.png 9KB

dzyl_img08.png 9KB

index_title.png 8KB

daolan_img8.png 7KB

daolan_img9.png 6KB

daolan_img3.png 6KB

daolan_img10.png 6KB

dzyl_jjfz_img0.png 5KB

dzyl_jjfz_img1.png 5KB

wgzl_img1.png 5KB

dzyl_zhzf_img0.png 5KB

wgzl_img2.png 5KB

dzyl_zhzf_img1.png 5KB

index_zhzc.png 4KB

index_bxbl.png 4KB

index_ylj.png 4KB

dzyl_wgzl_img0.png 4KB

dzyl_tggl_img0.png 4KB

index_zdshbzjy.png 4KB

dzyl_tggl_img1.png 4KB

dzyl_wgzl_img1.png 4KB

dzyl_djyl_img0.png 4KB

index_lsshjz.png 4KB

dzyl_djyl_img1.png 4KB

index_tkrygy.png 4KB

dzyl_spfw_img0.png 4KB

index_zhzx.png 4KB

index_zlj.png 4KB

index_xjbx.png 4KB

dzyl_spfw_img1.png 4KB

zhzf_shuangsuiji.png 3KB

zhzf_jiankong.png 3KB

zhzf_diaodu.png 3KB

zhzf_liandong.png 3KB

zhzf_qiye.png 3KB

zhzf_qingchu.png 3KB

index_img3.png 2KB

index_img6.png 2KB

index_img1.png 2KB

index_img4.png 2KB

index_img2.png 2KB

index_img5.png 2KB

zhzf_liandong1.png 2KB

index_doc1.png 2KB

zhzf_jiankong1.png 2KB

index_doc2.png 2KB

共 126 条

<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>综合执法</title> <link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet"> <link href="css/style.css" rel="stylesheet"> <link href="css/zhzf.css" rel="stylesheet"> </head> <body> <div class="body_div"> <header></header> <section> <div class="left_div vflex"> <div class="sczz_div"> <div class="title_div">事件统计</div> <div class="anjt_num_div" style="margin-top: 20px;"> <div class="div1 hcenter"> <img src="img/zhzf_anjs.png" /> <span style="flex: 1;">案件接收</span> <label style="display:flex; align-items: baseline;"> <span style="font-size: 18px; margin-right: 2px;">500</span> <span style="font-size: 12px; color: #2CCEF6;">件</span> </label> </div> </div> <div class="anjt_num_div" style="margin-top: 20px;"> <div class="div1 hcenter"> <img src="img/zhzf_ajcl.png" /> <span style="flex: 1;">案件处理</span> <label style="display:flex; align-items: baseline;"> <span style="font-size: 18px; margin-right: 2px;">500</span> <span style="font-size: 12px; color: #2CCEF6;">件</span> </label> </div> </div> <div style="display: flex; align-items: center; margin-top: 25px;"> <div class="anjt_item hvcenter"> <div id="echart004" style="width: 100%; height: 4.2vw; position: absolute; top: 0; left: 0;"> </div> <span>25%</span> </div> <div class="anjt_item hvcenter"> <div id="echart005" style="width: 100%; height: 4.2vw; position: absolute; top: 0; left: 0;"> </div> <span>25%</span> </div> <div class="anjt_item hvcenter"> <div id="echart006" style="width: 100%; height: 4.2vw; position: absolute; top: 0; left: 0;"> </div> <span>25%</span> </div> <div class="anjt_item hvcenter"> <div id="echart007" style="width: 100%; height: 4.2vw; position: absolute; top: 0; left: 0;"> </div> <span>25%</span> </div> <div class="anjt_item hvcenter"> <div id="echart008" style="width: 100%; height: 4.2vw; position: absolute; top: 0; left: 0;"> </div> <span>25%</span> </div> </div> <div class="hcenter" style="font-size: 12px; color: #fff;"> <span style="flex: 1; text-align: center;">规划</span> <span style="flex: 1; text-align: center;">住建</span> <span style="flex: 1; text-align: center;">水利</span> <span style="flex: 1; text-align: center;">市场监督</span> <span style="flex: 1; text-align: center;">安监</span> </div> </div> <div class="ggyssr_div" style="margin-top: 30px;"> <div class="title_div">案件统计</div> <div id="echart001" style="height: 300px;"> </div> </div> <div class="ss_div" style="margin-top: 30px;"> <div class="title_div">执行案件列表</div> <div class="items_div"> <div class="items_title_div hcenter"> <span style="flex: 1; text-align: left;">执法对象</span> <span style="flex: 1;">立案日期</span> <span style="flex: 1;">执法结果</span> <span style="flex: 1; text-align: right;">信息来源</span> </div> <div id="zxaj_list_div" style="height: 330px; overflow: hidden; padding: 5px 0;"> <div class="item_div hcenter"> <span style="flex: 1; text-align: left;">执法对象</span> <span style="flex: 1;">立案日期</span> <span style="flex: 1;">执法结果</span> <span style="flex: 1; text-align: right;">信息来源</span> </div> <div class="item_div hcenter"> <span style="flex: 1; text-align: left;">执法对象</span> <span style="flex: 1;">立案日期</span> <span style="flex: 1;">执法结果</span> <span style="flex: 1; text-align: right;">信息来源</span> </div> <div class="item_div hcenter"> <span style="flex: 1; text-align: left;">执法对象</span> <span style="flex: 1;">立案日期</span> <span style="flex: 1;">执法结果</span> <span style="flex: 1; text-align: right;">信息来源</span> </div> <div class="item_div hcenter"> <span style="flex: 1; text-align: left;">执法对象</span> <span style="flex: 1;">立案日期</span> <span style="flex: 1;">执法结果</span> <span style="flex: 1; text-align: right;">信息来源</span> </div> </div> </div> </div> </div> <div class="center_div"> <div class="menu_div"> <img style="margin-top: 6vw; width: 5.9375vw; height: 13.177vw;" src="img/dzyl_zhzf_img1.png"> <img style="margin-top: 4.5vw; width: 6.56vw; height: 13.588vw;" src="img/dzyl_spfw_img0.png"> <img style="margin-top: 3vw; width: 6.56vw; height: 13.588vw;" src="img/dzyl_djyl_img0.png"> <img style="margin-top: 4.5vw; width: 5.9375vw; height: 13.177vw;" src="img/dzyl_wgzl_img0.png"> <img style="margin-top: 6vw; width: 5.1042vw; height: 12.2396vw;" src="img/dzyl_jjfz_img0.png"> </div> <div id="map_div" style="height: 760px; margin: 0 70px 0 100px;"> </div> <div class="btns_div hcenter"> <div onclick="showDialog();" class="hvcenter"> <img src="img/zhzf_shuangsuiji.png"> <span style="margin-top: 5px;">双随机</span> </div> <div onclick="diaodu();" class="hvcenter"> <img src="img/zhzf_diaodu.png"> <span style="margin-top: 5px;">调度</span> </div> <div onclick="liandong();" class="hvcenter"> <img src="img/zhzf_liandong.png"> <span style="margin-top: 5px;">联动</span> </div> <div onclick="qiye();" class="hvcenter"> <img src="img/zhzf_qiye.png"> <span style="margin-top: 5px;">企业</span> </div> <div onclick="jiankong();" class="hvcenter"> <img src="img/zhzf_jiankong.png"> <span style="margin-top: 5px;">监控</span> </div> <div onclick="qingchu();" class="hvcenter"> <img src="img/zhzf_qingchu.png"> <span style="margin-top: 5px;">清除</span> </div> </div> </div> <div class="right_div"> <div class="gsqy_div"> <div class="title_div">检查结果统计</div> <div id="echart002" style="height: 250px;"> </div> </div> <div class="ssjqy_div" style="margin-top: 0;"> <div class="title_div">双随机企业统计</div> <div id="echart003" style="height: 300px;"> </div> </div> <div class="jljb_div" style="margin-top: 0;"> <div class="title_div">奖励举报</div> <div class="items_div"> <div class="items_title_div hcenter"> <span style="flex: 1; text-align: left;">奖励人</span> <span style="flex: 1;">举报日期</span> <span style="flex: 1;">举报内容</span> <span style="flex: 1; text-align: right;">奖励金额</span> </div> <div id="jljb_list_div" style="height: 350px; overflow: hidden; padding: 5px 0;"> <div class="item_div hcenter"> <span style="flex: 1; text-align: left;">奖励人</span> <span style="flex: 1;">举报日期</span> <span style="flex: 1;">举报内容</span> <span style="flex: 1; text-align: right;">奖励金额</span> </div> <div class="item_div hcenter"> <span style="flex: 1; text-align: left;">奖励人</span> <span st

评论收藏

内容反馈