集算报表如何使用Echarts
2016-11-22 10:05
330 查看
1. 集算报表中使用Echarts统计图的步骤
2. 报表中添加echarts2统计图
选中需要设为统计图的单元格，点击 报表-第三方图形 菜单项，或者右键菜单-第三方图形，在图形编辑窗口中点击打开模版按钮，缺省会直接指向【安装根目录】/chart
目录，用户也可自行切换到模版的存放路径。 如果需要画的图形在已有模版中不存在， 则可以直接在编辑窗口的右侧 js
区域添加内容即可。
选择好echarts2模板打开后，程序会自动将echarts2模板中的的表达式${a}找出来列到左边的参数列表中，也可以手动增删参数。
左侧参数值可为任意类型的参数，通过 C1{}的引用方式获取报表数据为参数赋值，参数类型为数组。该引用方式通常可用于对分类、系列、系列值的取值。
设置好统计图的属性，点击【确定】按钮，设计器中选中的单元格就自动的插入了统计图，可通过 web
预览查看第三方图形。
3. 使用echarts2模板在报表中添加柱形图
新建报表，连接数据源，设置数据集，数据集名称为ds2,数据如下图所示：
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
1. 集算报表中使用Echarts统计图的步骤
2. 报表中添加echarts2统计图
选中需要设为统计图的单元格，点击 报表-第三方图形 菜单项，或者右键菜单-第三方图形，在图形编辑窗口中点击打开模版按钮，缺省会直接指向【安装根目录】/chart
目录，用户也可自行切换到模版的存放路径。 如果需要画的图形在已有模版中不存在， 则可以直接在编辑窗口的右侧 js
区域添加内容即可。
选择好echarts2模板打开后，程序会自动将echarts2模板中的的表达式${a}找出来列到左边的参数列表中，也可以手动增删参数。
左侧参数值可为任意类型的参数，通过 C1{}的引用方式获取报表数据为参数赋值，参数类型为数组。该引用方式通常可用于对分类、系列、系列值的取值。
设置好统计图的属性，点击【确定】按钮，设计器中选中的单元格就自动的插入了统计图，可通过 web
预览查看第三方图形。
3. 使用echarts2模板在报表中添加柱形图
新建报表，连接数据源，设置数据集，数据集名称为ds2,数据如下图所示：
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
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 在Delphi 中如何使用水晶报表
- 如何使用PB实现动态报表？
- 如何在报表中直接使用数据库中存储的图片
- 老南瓜:如何建立基于SSAS的Reporting Services报表,以及参数(parameters)使用
- 老南瓜:如何建立基于SSAS的Reporting Services报表,以及参数(parameters)使用
- 如何在水晶报表中使用条形码……
- 如何使用即时报表设计交叉报表
- 再谈ReportingService报表中数据源类型为存储过程的数据集如何使用多值参数
- 如何使用webservice作为数据源去生成Microsoft Reporting Services 2005的报表(转)
- 如何使用即时报表设计网格报表
- 如何使用.net来部署使用了水晶报表开发出来的exe程序
- [翻译]如何使用webservice作为数据源去生成Microsoft Reporting Services 2005的报表
- [翻译]如何使用webservice作为数据源去生成Microsoft Reporting Services 2005的报表
- MVC中如何使用RDLC报表
- [转]如何在.Net Web应用中使用水晶报表
- 在WEB图形报表中如何使用jFreeChart
- 如何使用iReport 和jasper生成报表（SQL传参数及中文文件名）
- ReportView如何使用构造SQL语句带参数的存储过程创建报表以及为rdlc传递参数
- 水晶报表技术（7）——如何在.Net Web应用中使用水晶报表2
- 如何使用即时报表设计分组报表