echarts 图表可配置展示功能 word 功能描述

图表可配置展示功能

博客内容不全面，因为，有图没有上传，没法看。如果想看完整博客内容，请下载 word 文件。

下载地址：http://pan.baidu.com/s/1gfgQoCj

后续 当前 文档 所描述的功能 的代码，会 放到 github 上面，如果需要的，到时候记得 来这篇博客 找 链接。

注：因为时间紧急，修改删除没有做，数据必填非空校验没做，查询sql的数据为空也没有提示信息。

功能描述：

通过选择模板，选择数据源，来生成任意 图表。

模板：饼图模板；折线图模板；柱状图模板；地图模板。

数据源：2017年产品类型数量数据；2016年所有省份的 图书馆购书数量；

可生成，2017-产品饼图，2017-产品柱状图，2016-省份对应数量地图。

其中，配置地图模板，和配置 地图所需数据源，需要技术人员支持。

*********************举例说明*************************

*********************模板配置*************************

1、配置地图模板工作 ： 需要从 百度 echarts 官网 复制option 保存到一个js 文件中，并设置这个option 所需的 数据源， 。如图下：

图例说明：在系统中，新建这个饼图，需要复制 左侧的option ，保存到一个 js文件中，这个js文件的名称需要与模板编码相同，看后面相同颜色的介绍（比如：bingTemp.js）

文件保存路径如图下：

。并查看，当前 option ，其中有这三部分，不能写死，需要进行可配置化处理。

text: '某站点用户访问来源',

data: ['直接访问','邮件营销','联盟广告','视频广告','搜索引擎']

data:[

{value:335, name:'直接访问'},

{value:310, name:'邮件营销'},

{value:234, name:'联盟广告'},

{value:135, name:'视频广告'},

{value:1548, name:'搜索引擎'}

],

其中，text ，是每个图例 的名称，属于字段，

而，两个 data ，属于数据，需要从 数据库中查询。

2、 项目中进行配置，如图下：

从菜单中，选择图表模板，并 新建模板。

模板名称，名称为饼图。模板编码，就是上面option保存的js文件名称，上面说的是bingTemp.js，那么这里的编码，就得是 bingTemp

模板类型，饼图。

在上面option 中，需要的 三种数据，分别是 ，固定字段，和 从数据库中查询的数据。

就在菜单中，进行配置。

先说，固定字段的配置。

3、配置固定字段

字段名称，和字段 编码。

设置完成必填字段后，需要新建一个 jsp文件，名称等于 bingTemp.jsp

Jsp 文件，需要设置 input 输入框，等于 必填字段。 因为，在 生成具体某个图表的时候，必填字段，是需要保存到数据库的。

4、配置数据源类型。

刚才说了，配置固定字段，下面说配置图表所需数据，option 中，需要两组数据，类型分别是，数组，json数据。如图下。

点击 json数据对象后，在下面的列表，选择，增加数据类型。填写信息如图上。

其中，

数据类型，需要根据 所需要的类型来准确选择，

Json源数据，直接从option中复制过来就可以了，
模板 及 数据个数， 会根据 json源数据自动识别匹配。

到此，模板配置结束

*********************模板配置结束*************************

*********************数据源配置*************************

数据源配置简单，在菜单中，

在报表定义中，写一个 sql ，查询到所需的数据源，并保存sql，在数据导出菜单中，能看到，并确保能查询到数据，就可以了。

*********************数据源配置 完成*************************

*********************具体图表生成*************************

1、新建并设置 必填字段。

在综合查询界面，选择添加图表，并选择需要添加的图表模板模板刚才已经创建。

添加完成后，点击必填信息按钮，弹出必填信息输入界面。这个界面，就是刚才保存option时，新建的 bingTempl.jsp

2、设置，数据映射。

当前饼图，所需数据有两种，数组，和 json 。

点击数据映射按钮，如图下：

再点击，增加映射按钮，如图下。

其中

Json 数据源，可供选择的是，当前图表模板 的所有 所需数据源。

我选择 data 数据为json 的数据。

需要设置，当前映射是 映射的，第几个数据。 因为，这个 json 数据中，有两个数据，每个数据，都需要设置映射，我这里设置，映射第二个数据。

设置映射第二个数据 2

报表选择，需要选择，当前字段的数据，是从哪个报表查询 出来的。

选择产品查询报表。

当前报表的哪个字段来映射，就是，需要 使用 查询 的那个字段，来 填充 当前 映射的数据。

字段选择：number

全部映射配置完成后，如图下：

然后，点击，生成图表按钮，就可以，查询 产品表数据，根据 饼图模板，来 生成 需要的 图表了。如图下。