自定义模板
目前润乾报表安装包提供了部分echarts图形模板，并且在模板中对数据做了灵活引用的处理，方便了初学者入手，对效果要求不太高的用户也基本满足，但如需对图形样式属性做修改或调整，或者所需图形在已有模板中不存在，需自定义模板，这都需要前端开发人员通过学习echarts官方说明去进一步完善。
在此我们介绍一下自定义模板时关于html转js模板以及对报表各种数据传递的处理的基本方法，请参见下面章节所讲内容。
HTML 转 js 模板
如所需模板在已有模板中不存在，可直接将从Echarts官网获取的html示例手动转为js模板即可。接下来以两个例子进行详细说明。
（一）echarts2以韦恩图为例，具体步骤如下：
步骤1:
html内容:
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>ECharts</title>
</head>
<body>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="main" style="height:400px"></div>
<!-- ECharts单文件引入 -->
<script src="dist/echarts.js"></script>
<script type="text/javascript">
// 路径配置
require.config({
paths: {
echarts: 'dist'
}
});
// 使用
require(
[
'echarts',
'echarts/chart/venn'
],
function (ec) {
// 基于准备好的dom，初始化echarts图表
var myChart = ec.init(document.getElementById('main'));
option = {
title : {
text: '访问 vs 咨询',
subtext: '各个数据的集合'
},
tooltip : {
trigger: 'item',
formatter: "{b}: {c}"
},
toolbox: {
show : true,
feature : {
mark : {show: true},
dataView : {show: true, readOnly: false},
restore : {show: true},
saveAsImage : {show: true}
}
},
calculable : false,
series : [
{
name:'韦恩图',
type:'venn',
itemStyle: {
normal: {
label: {
show: true,
textStyle: {
fontFamily: 'Arial, Verdana, sans-serif',
fontSize: 16,
fontStyle: 'italic',
fontWeight: 'bolder'
}
},
labelLine: {
show: false,
length: 10,
lineStyle: {
// color: 各异,
width: 1,
type: 'solid'
}
}
},
emphasis: {
color: '#cc99cc',
borderWidth: 3,
borderColor: '#996699'
}
},
data:[
{value:100, name:'访问'},
{value:50, name:'咨询'},
{value:20, name:'公共'}
]
}
]
};
// 为echarts对象加载数据
myChart.setOption(option);
}
);
</script>
</body>
步骤2:
下面是一个通用的js模板，可以直接将上面html中红色部分的option内容替换到下面的option中，并且需将模板中require中的图形名和html中require中的图形名保持一致即可。
<div id='${id}' style="width:${width}px;height:${height}px"></div>
<script type="text/javascript">
// 使用
require(
[
'echarts',
'echarts/chart/scatter'
],
function (ec) {
// 基于准备好的dom，初始化echarts图表
var myChart = ec.init(document.getElementById('${id}'));
var option = {
};
// 为echarts对象加载数据
myChart.setOption(option);
}
);
</script>
步骤3：
自定义完成的js模板内容：
<div id='${id}' style="width:${width}px;height:${height}px"></div>
<script type="text/javascript">
// 使用
require(
[
'echarts',
'echarts/chart/venn'
],
function (ec) {
// 基于准备好的dom，初始化echarts图表
var myChart = ec.init(document.getElementById('${id}'));
option = {
title : {
text: '访问 vs 咨询',
subtext: '各个数据的集合'
},
tooltip : {
trigger: 'item',
formatter: "{b}: {c}"
},
toolbox: {
show : true,
feature : {
mark : {show: true},
dataView : {show: true, readOnly: false},
restore : {show: true},
saveAsImage : {show: true}
}
},
calculable : false,
series : [
{
name:'韦恩图',
type:'venn',
itemStyle: {
normal: {
label: {
show: true,
textStyle: {
fontFamily: 'Arial, Verdana, sans-serif',
fontSize: 16,
fontStyle: 'italic',
fontWeight: 'bolder'
}
},
labelLine: {
show: false,
length: 10,
lineStyle: {
// color: 各异,
width: 1,
type: 'solid'
}
}
},
emphasis: {
color: '#cc99cc',
borderWidth: 3,
borderColor: '#996699'
}
},
data:[
{value:100, name:'访问'},
{value:50, name:'咨询'},
{value:20, name:'公共'}
]
}
]
};
// 为echarts对象加载数据
myChart.setOption(option);
}
);
</script>
WEB预览效果：
（二）echarts 4以饼图为例，具体步骤如下：
步骤1:
html内容:
<!DOCTYPE html>
<html style="height: 100%">
<head>
<meta charset="utf-8">
</head>
<body style="height: 100%; margin: 0">
<div id="container" style="height: 100%"></div>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts-gl/dist/echarts-gl.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts-stat/dist/ecStat.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/dist/extension/dataTool.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/map/js/china.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/map/js/world.js"></script>
<script type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&ak=xfhhaTThl11qYVrqLZii6w8qE5ggnhrY&__ec_v__=20190126"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/dist/extension/bmap.min.js"></script>
<script type="text/javascript">
var dom = document.getElementById("container");
var myChart = echarts.init(dom);
var app = {};
option = null;
option = {
title : {
text: '某站点用户访问来源',
subtext: '纯属虚构',
x:'center'
},
tooltip : {
trigger: 'item',
formatter: "{a} <br/>{b} : {c} ({d}%)"
},
legend: {
orient: 'vertical',
left: 'left',
data: ['直接访问','邮件营销','联盟广告','视频广告','搜索引擎']
},
series : [
{
name: '访问来源',
type: 'pie',
radius : '55%',
center: ['50%', '60%'],
data:[
{value:335, name:'直接访问'},
{value:310, name:'邮件营销'},
{value:234, name:'联盟广告'},
{value:135, name:'视频广告'},
{value:1548, name:'搜索引擎'}
],
itemStyle: {
emphasis: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
]
};
;
if (option && typeof option === "object") {
myChart.setOption(option, true);
}
</script>
</body>
</html>
步骤2:
下面是一个通用的js模板，可以直接将上面html中红色部分的option内容替换到下面的option中。
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id='${id}' style="width:${width}px;height:${height}px"></div>
<script type="text/javascript">
var ${id}_dom = document.getElementById('${id}');
var myChart = echarts.init(${id}_dom);
var app = {};
option = null;
var option = {
};
if (option && typeof option === "object") {
//为echarts对象加载数据
myChart.setOption(option, true);
}
</script>
步骤3：
自定义完成的js模板内容：
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id='${id}' style="width:${width}px;height:${height}px"></div>
<script type="text/javascript">
var ${id}_dom = document.getElementById('${id}');
var myChart = echarts.init(${id}_dom);
var app = {};
option = null;
option = {
title : {
text: '某站点用户访问来源',
subtext: '纯属虚构',
x:'center'
},
tooltip : {
trigger: 'item',
formatter: "{a} <br/>{b} : {c} ({d}%)"
},
legend: {
orient: 'vertical',
left: 'left',
data: ['直接访问','邮件营销','联盟广告','视频广告','搜索引擎']
},
series : [
{
name: '访问来源',
type: 'pie',
radius : '55%',
center: ['50%', '60%'],
data:[
{value:335, name:'直接访问'},
{value:310, name:'邮件营销'},
{value:234, name:'联盟广告'},
{value:135, name:'视频广告'},
{value:1548, name:'搜索引擎'}
],
itemStyle: {
emphasis: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
]
};
;
if (option && typeof option === "object") {
//为echarts对象加载数据
myChart.setOption(option, true);
}
</script>
WEB预览效果：
自定义模板的用户通过上述步骤可以将html改为润乾报表可用的js模板文件，但如需在润乾报表中对js中的数据做灵活处理，还需要用户先了解html图形中所需的数据结构类型，然后通过对左侧参数列表传递过来的参数做处理而获取最终js模板所需的数据。
Echarts官方例子中的数据一般都是直接在html写死或者通过json文件传递，本文档将举例介绍序列和json数据类型的参数传递，可参考 将序列传递给js模板 和 将json数据传递给js模板。
将序列传递给 js 模板
以标准气泡图为例进行JS代码说明：
Echarts标准气泡图HTML：
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div style="width:800px; border:2px solid red"><!--插件图外面的盒子决定里面的宽度-->
<div id="main" style="height:400px"></div>
</div>
<script src="dist/echarts-all.js"></script>
<script type="text/javascript">
// 基于准备好的dom，初始化echarts图表
var myChart = echarts.init(document.getElementById('main'));
function random(){
var r = Math.round(Math.random() * 100);
//alert("a"+(r * (r % 2 == 0 ? 1 : -1)));
return (r * (r % 2 == 0 ? 1 : -1));
}
function randomDataArray() {
var d = [];
var len = 100;
while (len--) {
d.push([
random(),
random(),
Math.abs(random()),
]);
}
return d;
}
option = {
tooltip : {
trigger: 'axis',
showDelay : 0,
axisPointer:{
show: true,
type : 'dashed',
lineStyle: {
type : 'dashed',
width : 1
}
}
},
legend: {
data:['scatter1','scatter2']
},
toolbox: {
show : true,
feature : {
mark : {show: true},
dataZoom : {show: true},
dataView : {show: true, readOnly: false},
restore : {show: true},
saveAsImage : {show: true}
}
},
xAxis : [
{
type : 'value',
splitNumber: 4,
scale: true
}
],
yAxis : [
{
type : 'value',
splitNumber: 4,
scale: true
}
] ,
series : [
{
name:'scatter1',
type:'scatter',
symbolSize: function (value){
return Math.round(value[2] / 5);
},
data: randomDataArray()
},
{
name:'scatter2',
type:'scatter',
symbolSize: function (value){
return Math.round(value[2] / 5);
},
data: randomDataArray()
}
]
};
// 为echarts对象加载数据
myChart.setOption(option);
</script>
如上所示html文件中series：[]部分为需要处理的内容，其中scatter1和scatter2是两个系列，如不通过js中添加脚本进行处理，那么则需要手动在js的series部分追加scatter3,scatter4…..系列，操作比较麻烦。因此我们在js中添加了脚本处理数据，方便用户只需要在左侧参数部分传入数据即可，右侧则会自动根据分类系列系列值进行拼接字符串。最终将拼接好的串加到serices:[]中。
注意：
目前有三个固定宏，id(图形的唯一号)、 width(图形宽) 、height(图形高)，程序会自动填写，不会列出到左边参数面板。
JS具体实现思路：
处理前：
处理后：
scatter.toSeries为js文件中添加的方法如下：
var scatter={
toSeries : function()
{
var series=${series};//['scatter1','scatter2']
var slen=${series}.length;
var vsum=[];
var value=${value};//[[58,345,600][200,-20,255]];
var temp=0;
var str="[";
for(var i=0;i<slen;i++)
{
if (i>0)
{
str+=",";
}
vsum[i]=value.slice(temp,temp+slen);
var random=Math.round(vsum[i][2] / 5);
temp+=slen;
str += "{name:'"+series[i]+"',type:'scatter',symbolSize: "+function (value){return Math.round(value[2] / 5);}+",data: ["+vsum[i]+"]}";
}
str+="]";
return str;
}
}
步骤1：
首先了解系列中data的数据类型，不同的画法中需要不同类型的数据，如[21,45,21]或者[[23,12][76,34][4,90]]。标准气泡图所需的数据类型为[[23,3,12][76,34,104][4,59,90]]，因此左侧参数传递的数据值需为[[23,3,12][76,34,104][4,59,90]]这样的数据，系列和分类值分别为成员为单值的序列即可。个别图形不需要分类，因此左侧分类参数不添加即可。
可在报表中将datavalue数据处理好，直接在参数表达式中使用。
步骤2：
获取左侧参数传递过来的数据，通过循环系列逐一拼接系列串
上述方法的具体处理是通过画法中所需的系列值和data数据决定，不是一成不变，需根据不同的数据值灵活运用。
将 json 数据传递给 js 模板
以地图-城市空气质量图为例进行json数据传递说明：
Echarts地图-城市空气质量图HTML数据内容为：
如上所示html文件中data：[]部分为需要处理的内容，其内容为json串，如通过js脚本拼接会比较麻烦。因此润乾报表提供了json函数，专门针对echarts图形中需要传递json数据时使用。方便用户只需要在左侧参数表达式中使用json函数处理数据传递即可，右侧可直接通过参数获取json内容，最终将拼接好的串加到data:[]中。操作如下：
步骤1：
ds2数据集内容为：
步骤2：
添加参数表达式，并且在右侧js模板中引用参数
上述步骤中数据集和参数表达式的内容是通过画法中所需data数据决定的，不是一成不变，需根据不同的json数据值灵活运用json()函数。