润乾报表如何使用Echarts



1.    润乾报表中使用Echarts统计图的步骤

2.    报表中添加echarts2统计图

选中需要设为统计图的单元格，点击 报表-第三方图形 菜单项，或者右键菜单-第三方图形，在图形编辑窗口中点击打开模版按钮，缺省会直接指向【安装根目录】/chart 目录，用户也可自行切换到模版的存放路径。 如果需要画的图形在已有模版中不存在， 则可以直接在编辑窗口的右侧 js 区域添加内容即可。

选择好echarts2模板打开后，程序会自动将echarts2模板中的的表达式${a}找出来列到左边的参数列表中，也可以手动增删参数。

左侧参数值可为任意类型的参数，通过 C1{}的引用方式获取报表数据为参数赋值，参数类型为数组。该引用方式通常可用于对分类、系列、系列值的取值。

设置好统计图的属性，点击【确定】按钮，设计器中选中的单元格就自动的插入了统计图，可通过 web 预览查看第三方图形。

3.    使用echarts2模板在报表中添加柱形图

1. 新建报表，连接数据源，设置数据集，数据集名称为ds2,数据如下图所示：

2. A1单元格表达式为=ds2.select(地区)，C1单元格的表达式为=ds2.销售额，设置第一行隐藏，在A6的合并单元格中增加echarts统计图，右键A6单元格，在弹出的快捷菜单中选择第三方统计图，打开设计器下自带的echarts2柱形图的模板，在该第三方统计图的对话框左侧的参数列表中设置分类，系列的，数据的对应表达式，统计图的设置如下图所示：

   报表的具体设计如下图：

   以上操作就在报表中添加了柱形的Echarts图，由于echarts统计图是在页面上完成渲染的，所以我们想要看到统计图的效果需要在Web端访问，下面是在web端的显示效果：

   美化echarts统计图

上面我们通过自带的echart2柱形模板做的统计图看着并不美观，我们可以通过修改echarts模板的图表选项option配置将统计图美化成下图的效果：

图表选项，包含图表实例任何可配置选项： 公共选项 ， 组件选项 ， 数据选项。

Echarts统计图的组件有十个：Axis(坐标轴)、   xAxis横轴（默认类目型）、 yAxis 纵轴（数值型）、Grid（网格）、Polar（极坐标）、Title（标题）、legend（图例）、

DataZoom（数据区域缩放）、DataRange（值域漫游）、Toolbox（工具箱）、Timeline

（时间轴）。

上图中的效果主要操作的组件是：

Legend，grid，xAxis，yAxis，series。

明确了设置的组件，我们可以通过echarts的配置项查找工具了解其具体的属性配置，例如需将图例不显示，那么我们找到legend中show的选项查看到该选项可设置的属性值，具体设置为：

legend: {

show:false,

},

如果想调整柱子的宽度那么操作的是series这个组件的barWidth选项，如：

Series:{

"type":"bar",

“barWidth”:35,

}

概括说明下其设置规则为：

组件名称：{

选项名称：选项值,

},

注：多个选项用英文的逗号分隔，多个组件之间也需用英文的逗号分隔。

下面是对于原有Echarts模板修改后的完整JS模板：

<!-- 为ECharts准备一个具备大小（宽高）的Dom -->

<divid='id_15766045428286741'style="width:${width}px;height:${height}px"></div>

<!-- ECharts单文件引入 -->

<!--<scriptsrc="http://echarts.baidu.com/build/dist/echarts.js"></script>-->

<scripttype="text/javascript">

require(

[

'echarts',

'echarts/chart/bar' // 使用柱状图就加载bar模块，按需加载

],

function (ec) {

// 基于准备好的dom，初始化echarts图表

varmyChart = ec.init(document.getElementById('id_15766045428286741'));

varoption = {

backgroundColor:"#000000", //全图背景色

tooltip: {

show: false

},

legend: {

data:${series},

show:false       //图例隐藏

},

grid: {width:'80%',height: '50%',left: '50%', borderColor:"#000000", x: 40,  x2: 6, y: 30, y2: 2},

xAxis : [

{

type : 'category',//坐标轴类型

data :${categories},

axisLabel: {textStyle: {color:"#C2C2C2"}},                            axisTick: {

alignWithLabel: true,

lineStyle: {

width: 18,

color: "#FFFFFF"

},

show: false,

},

axisLine: {

show: false,

lineStyle: {

color: "#000000"

}

},

splitLine: {

lineStyle: {

width: 15,

color: "#000000"

},

show: false

},

}

],

yAxis : [

{

type : 'value',

axisLabel: {textStyle: {color:"#000000"}},

axisLine: {

show: true,

lineStyle: {

color:"#000000"

}

},

splitLine: {

show:false,

}

}

],

series : [

{

"name":${series},

"type":"bar",

"barWidth":35,

"data":${value},

itemStyle: {

normal: {

barBorderRadius:[5,5,5,5],

label: {

show: true,

position: 'top',

formatter: '{c}次'

}

}

},

}

]

};

// 为echarts对象加载数据

myChart.setOption(option);

}

);

</script>

5.    参考资料

（1）     Echarts2用户手册

http://echarts.baidu.com/echarts2/doc/doc.html

（2）     Echarts2配置项查找手册

http://echarts.baidu.com/echarts2/doc/option.html#title~

（3）    Echarts2官网实例

http://echarts.baidu.com/echarts2/doc/example.html1. 集算报表中使用Echarts统计图的步骤

2. 报表中添加echarts2统计图

选中需要设为统计图的单元格，点击 报表-第三方图形 菜单项，或者右键菜单-第三方图形，在图形编辑窗口中点击打开模版按钮，缺省会直接指向【安装根目录】/chart 目录，用户也可自行切换到模版的存放路径。 如果需要画的图形在已有模版中不存在， 则可以直接在编辑窗口的右侧 js 区域添加内容即可。

选择好echarts2模板打开后，程序会自动将echarts2模板中的的表达式${a}找出来列到左边的参数列表中，也可以手动增删参数。

左侧参数值可为任意类型的参数，通过 C1{}的引用方式获取报表数据为参数赋值，参数类型为数组。该引用方式通常可用于对分类、系列、系列值的取值。

设置好统计图的属性，点击【确定】按钮，设计器中选中的单元格就自动的插入了统计图，可通过 web 预览查看第三方图形。

3. 使用echarts2模板在报表中添加柱形图

（1） 新建报表，连接数据源，设置数据集，数据集名称为ds2,数据如下图所示：

（2） A1单元格表达式为=ds2.select(地区)，C1单元格的表达式为=ds2.销售额，设置第一行隐藏，在A6的合并单元格中增加echarts统计图，右键A6单元格，在弹出的快捷菜单中选择第三方统计图，打开设计器下自带的echarts2柱形图的模板，在该第三方统计图的对话框左侧的参数列表中设置分类，系列的，数据的对应表达式，统计图的设置如下图所示：

报表的具体设计如下图：

以上操作就在报表中添加了柱形的Echarts图，由于echarts统计图是在页面上完成渲染的，所以我们想要看到统计图的效果需要在Web端访问，下面是在web端的显示效果：

4. 美化echarts统计图

上面我们通过自带的echart2柱形模板做的统计图看着并不美观，我们可以通过修改echarts模板的图表选项option配置将统计图美化成下图的效果：

图表选项，包含图表实例任何可配置选项： 公共选项 ， 组件选项 ， 数据选项。

Echarts统计图的组件有十个：Axis(坐标轴)、 xAxis横轴（默认类目型）、 yAxis 纵轴（数值型）、Grid（网格）、Polar（极坐标）、Title（标题）、legend（图例）、

DataZoom（数据区域缩放）、DataRange（值域漫游）、Toolbox（工具箱）、Timeline

（时间轴）。

上图中的效果主要操作的组件是：

Legend，grid，xAxis，yAxis，series。

明确了设置的组件，我们可以通过echarts的配置项查找工具了解其具体的属性配置，例如需将图例不显示，那么我们找到legend中show的选项查看到该选项可设置的属性值，具体设置为：

legend: {

show:false,

},

如果想调整柱子的宽度那么操作的是series这个组件的barWidth选项，如：

Series:{

"type":"bar",

“barWidth”:35,

}

概括说明下其设置规则为：

组件名称：{

选项名称：选项值,

},

注：多个选项用英文的逗号分隔，多个组件之间也需用英文的逗号分隔。

下面是对于原有Echarts模板修改后的完整JS模板：

<!-- 为ECharts准备一个具备大小（宽高）的Dom -->

<div id='id_15766045428286741' style="width:${width}px;height:${height}px"></div>

<!-- ECharts单文件引入 -->

<!-- <script src="http://echarts.baidu.com/build/dist/echarts.js"></script> -->

<script type="text/javascript">

require(

[

'echarts',

'echarts/chart/bar' // 使用柱状图就加载bar模块，按需加载

],

function (ec) {

// 基于准备好的dom，初始化echarts图表

var myChart = ec.init(document.getElementById('id_15766045428286741'));

var option = {

backgroundColor: "#000000", //全图背景色

tooltip: {

show: false

},

legend: {

data:${series},

show:false //图例隐藏

},

grid: {width: '80%',height: '50%',left: '50%', borderColor:"#000000", x: 40, x2: 6, y: 30, y2: 2},

xAxis : [

{

type : 'category', //坐标轴类型

data : ${categories},

axisLabel: {textStyle: {color:"#C2C2C2"}}, axisTick: {

alignWithLabel: true,

lineStyle: {

width: 18,

color: "#FFFFFF"

},

show: false,

},

axisLine: {

show: false,

lineStyle: {

color: "#000000"

}

},

splitLine: {

lineStyle: {

width: 15,

color: "#000000"

},

show: false

},

}

],

yAxis : [

{

type : 'value',

axisLabel: {textStyle: {color:"#000000"}},

axisLine: {

show: true,

lineStyle: {

color: "#000000"

}

},

splitLine: {

show: false,

}

}

],

series : [

{

"name":${series},

"type":"bar",

"barWidth":35,

"data":${value},

itemStyle: {

normal: {

barBorderRadius:[5,5,5,5],

label: {

show: true,

position: 'top',

formatter: '{c}次'

}

}

},

}

]

};

// 为echarts对象加载数据

myChart.setOption(option);

}

);

</script>

5. 参考资料

（1） Echarts2用户手册

http://echarts.baidu.com/echarts2/doc/doc.html

（2） Echarts2配置项查找手册

http://echarts.baidu.com/echarts2/doc/option.html#title~

（3） Echarts2官网实例

http://echarts.baidu.com/echarts2/doc/example.html