基于ECharts 自适应数据图表开发教程

趋势图web界面

 

1、引用框架

Bootstrap3前端框架

EChrts   数据图表框架

jQuery   JavaScrip框架

 

2、创建html基本模板，引用以上三个框架的js文件和css文件

 

3、创建echart 数据图表

首先在html代码中添加一个div,我们的图表将在这个div中进行绘制，我们需要给这个div赋一个长和宽，这决定着我们绘制的图表的大小。

然后我们需要在这个div中进行绘制数据图表

首先我们需要配置绘制图表的配置项和数据（图表类型，颜色等等）

 

然后我们要找到html中创建的div给echarts进行画板初始化

一切准备完毕，最后把配置绘制图表的配置项和数据扔进画板

大功告成。

 

4、echart 数据图表自适应

1. echart 本身具有移动端开发的部分，当图表被压缩时，数据图表会根据我们设置的或图表默认的规则进行移动.

（自定义自适应）首先我们需要添加一个media属性再向media属性中添加query和option，其中query为触发的条件option为条件触发后执行的操作（我们可以添加很多的触发条件和触发后的操作）。

（坑）以上操作在屏幕够大的设备上显示没有毛病，但是屏幕小的设备上出现了问题。

原因是我们在第3步创建的div赋值的长宽超出了设备的屏幕宽度。

解决办法：

在给div赋值长宽之前先获取设备屏幕的长宽，然后再给div进行长宽赋值。

 

针对pc浏览器拖拽大小自适应我们设置了屏幕大小发生变化的监听，当浏览器窗口发生变化重新给div进行赋值，然后将数据图表进行重绘

 

 

 

1. 数据表格自适应

数据表格使用了bootstrap自适应样式，我们只需要将bootstrp需要的文件引入