html多图自动展示,基于echarts+html+css+jq的数据可视化大屏展示炫酷看板

默认你已经具备前端基础 html，css，js，jq这些基本知识都已经掌握。

什么是echarts？

ECharts，一个使用 JavaScript 实现的开源可视化库，可以流畅的运行在 PC 和移动设备上，兼容当前绝大部分浏览器(IE8/9/10/11，Chrome，Firefox，Safari等)，底层依赖矢量图形库 ZRender，提供直观，交互丰富，可高度个性化定制的数据可视化图表。

类似于echarts的图表库还有Highcharts，G2，d3等，至于项目怎么选型图表库，大可不用为这事情纠结，就像支付宝和微信都有支付，平时买东西你会选择使用哪个付款就是看个人操作习性了，个人还是比较倾向于echarts和G2,。

项目目录

实现方式

index.html文件：项目的核心文件，部分示例代码如下：

数据看板

css文件包：顾名思义里面放置的是页面的样式，这个样式主要是多页面的整体性的框架，以及布局的样式约束，另外此项目就涉及一张页面大屏展示，自适应适配方式采用的rem+flex的布局当时进行的适配，部分代码示例如下：

整张页面的样式都丢在index.css

~~~css

body {

line-height: 1.15;

font-size: 0.16rem;

margin: 0;

padding: 0;

background-repeat: no-repeat;

background-position: 0 0 / cover;

background-color: #101129;

}

* {

margin: 0;

padding: 0;

font-weight: normal;

}

ul {

list-style: none;

}

a {

text-decoration: non