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用户手册
（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