## 基于JavaScript、ECharts的可视化大屏
基于JavaScript、百度ECharts图表插件制作的可视化大屏,带有自动轮播效果功能。
* * *
#### git地址
` https://github.com/yutinghan2020/LargeVisualScreen-JS.git`
#### 技术栈
* JavaScript
* ECharts
* CSS
#### 运行
不用安装其他依赖,只需要将代码下载到本地,然后在目录中找到pages文件夹,最后直接用浏览器打开文件夹里面的main.html页面即可。
#### 文件目录
**assembly:** 这里主要是放置ECharts相关的第三方插件。
**CSS:** 这是放置页面样式的地方。
**images:** 放置页面的图片,可将背景图片放在这里,然后引用。
**JavaScript:** 放置公用方法脚本和各个图表模块方法,然后再主页面中引入调用。
**pages:** 放置主页面的文件夹,如果有多个页面可以放在此文件夹里。
**video:** 放置视频文件。
#### 主要代码
由于图表模块已经抽离,所以需要将各个图表的初始化方法单独引入页面中;
<script src="../assembly/echarts/tooltip.js"></script>
<script src="../JavaScript/ChartR1.js"></script>
<script src="../JavaScript/ChartR2.js"></script>
<script src="../JavaScript/ChartR3.js"></script>
<script src="../JavaScript/ChartC2.js"></script>
<script src="../JavaScript/ChartL2.js"></script>
<script src="../JavaScript/ChartL1-1.js"></script>
然后在主页面中调用各个图表初始化的方法;
let ChartC2=initChartC2();
let ChartR2=initChartR2();
let ChartR3=initChartR3();
let ChartL2=initChartL2();
let ChartL11=initChartL11();
let ChartR11=initChartR11();
let ChartR12=initChartR12();
let ChartR13=initChartR13();
给图表添加自适应重载方法;
window.onresize = function () {
ChartC2.resize();
ChartR2.resize();
ChartR3.resize();
ChartL2.resize();
ChartL11.resize();
ChartR11.resize();
ChartR12.resize();
ChartR13.resize();
}
* * *
注意:ECharts的水球图需要单独引入水球图组件(echarts-liquidfill.min.js)
**如有不懂可以相互交流。**
热爱技术。
- 粉丝: 2833
- 资源: 7864
最新资源
- 毕设和企业适用springboot全渠道电商平台类及图书管理系统源码+论文+视频.zip
- 毕设和企业适用springboot全渠道电商平台类及市场营销自动化平台源码+论文+视频.zip
- 毕设和企业适用springboot全渠道电商平台类及直播流媒体平台源码+论文+视频.zip
- 毕设和企业适用springboot人工智能类及资源调度平台源码+论文+视频.zip
- 毕设和企业适用springboot人力资源管理类及电商产品推荐平台源码+论文+视频.zip
- 毕设和企业适用springboot人力资源管理类及城市智能运营平台源码+论文+视频.zip
- 毕设和企业适用springboot社交互动平台类及个性化广告平台源码+论文+视频.zip
- 毕设和企业适用springboot社交电商类及自动化控制系统源码+论文+视频.zip
- 毕设和企业适用springboot社交互动平台类及餐饮管理平台源码+论文+视频.zip
- 毕设和企业适用springboot全渠道电商平台类及智能交通大数据平台源码+论文+视频.zip
- 毕设和企业适用springboot全渠道电商平台类及智能农业平台源码+论文+视频.zip
- 毕设和企业适用springboot人才招聘类及餐饮管理平台源码+论文+视频.zip
- 毕设和企业适用springboot人力资源管理类及环保监控平台源码+论文+视频.zip
- 毕设和企业适用springboot人力资源管理类及活动管理平台源码+论文+视频.zip
- 毕设和企业适用springboot人力资源管理类及健康管理平台源码+论文+视频.zip
- 毕设和企业适用springboot社交互动平台类及环境监控平台源码+论文+视频.zip
资源上传下载、课程学习等过程中有任何疑问或建议,欢迎提出宝贵意见哦~我们会及时处理!
点击此处反馈