ECharts项目-可视化展板随想

ECharts项目-可视化展板

1. 用到的技术栈

• 基于flexible.js + rem智能大屏适配
• flex布局
• less - 使用easy less插件直接将less转换为css引入
• 基于Echarts数据可视化展示
• Echarts柱状图、饼状图
• Echarts地图

2. 适配方案 - flexible.js + rem

2.1 flexible.js

flexible.js是专门为了解决不同设备间显示适配方案的，根据可视区大小，默认除以10，也就是可视区的1/10就是1rem的大小，设置为font-size，使得每个使用rem单位的元素都可以自动适应屏幕的大小。

因为我们的项目希望只在pc端进行显示，按照默认十份进行划分1rem有点大了，修改flexible.js改成24等分。

2.2 px to rem插件

为了省掉换算，使用插件px to rem，但是要将设置里的font-size改成我们的1920/24=80

3. 布局

3.1 header部分

里面用一个h1标题居中显示，一个时间模块靠右侧定位。

3.2 主体部分

给主体大盒子设置display：flex，提供flex布局，其中三个小盒子分别占比3：5：3。

准备一个公共的面板样式panel，设置公共的样式，其中上下两个角的样式按照伪元素before、after的border进行设计；下面两个角选择在panel里加个定位的盒子再继续使用这个新底部盒子的伪元素的border加两个角。每个panel里分为一个h2标题做图表的标题，一个chart图表部分。

中间的地球bg图片想要定位在水平垂直居中的位置：

position: absolute;

left: 50%;

top: 50%;

transform: translate(-50%, -50%);

在地球bg图片上覆盖一个可以做不停旋转动画的图片，利用index压住bg图片。

4. 交互

4.1 header部分

header中的时间模块的innerHTML显示为当前的时间代码：

var t = null;

t = setTimeout(time, 1000);//定时器：每1000ms执行time函数

function time() {

​ clearTimeout(t);

​ dt = new Date();

​ var y = dt.getFullYear();

​ var m = dt.getMonth() + 1;

​ var d = dt.getDate();

​ var h = dt.getHours();

​ var min = dt.getMinutes();

​ var s = dt.getSeconds();

​ document.querySelector(“.showTime”).innerHTML = “当前时间：” + y + “年” + m + “月” + d + “日-“ + h + “时” + min + “分” + s + “秒”;

​ t = setTimeout(time, 1000);

}

4.2 主体部分

因为在主体部分我们已经准备好了很多图表的容器，但是在ECharts的使用过程中需要获取并且给每一个图表做不一样的配置，为了避免这样带来的变量污染，减少命名冲突，采取立即执行函数的写法，这样里面的变量均为局部变量。

5. 字体样式

在中间column的数字展示模块，引用图标字体electonicFont美化数字展示方式。

首先，要在css或者less最上面声明字体@font-face！然后就可以在li中使用了，将font-family属性值设置为‘electonicFont’。

6. ECharts使用步骤总结

• 下载并引用echarts.js

• 为需要用Echarts的图表准备一个定义宽高的DOM容器

• 通过echarts.init方法初始化一个echarts实例

• 通过setOption方法指定配置项和相关数据使其生效

  其中配置项和数据是使用的重难点。

7. ECharts配置

• tooltip: 提示框

• legend：图例。若series中有name值，则legend的data可以省略。

• grid：网格

  【注意：DOM容器时整个图表的大小，而grid是只有最中间的大小】

  

• series：系列图表，决定显示哪种类型的图表。这是数组的形式，里面包含了n个对象，每一个对象对应一条线。

• color: 设置线条的颜色，注意也是数组的形式和series对应。

8. ECharts随着屏幕的自适应

window.addEventListener(“resize”, function() {
myChart.resize();
});

---

最后做出来的效果belike！！！

---