自定义模板

阅读(3166) 标签: 自定义模板,

目前润乾报表安装包提供了部分echarts图形模板,并且在模板中对数据做了灵活引用的处理,方便了初学者入手,对效果要求不太高的用户也基本满足,但如需对图形样式属性做修改或调整,或者所需图形在已有模板中不存在,需自定义模板,这都需要前端开发人员通过学习echarts官方说明去进一步完善。

在此我们介绍一下自定义模板时关于htmljs模板以及对报表各种数据传递的处理的基本方法,请参见下面章节所讲内容。

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中的图形名和htmlrequire中的图形名保持一致即可。

<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[]部分为需要处理的内容,其中scatter1scatter2是两个系列,如不通过js中添加脚本进行处理,那么则需要手动在jsseries部分追加scatter3,scatter4…..系列,操作比较麻烦。因此我们在js中添加了脚本处理数据,方便用户只需要在左侧参数部分传入数据即可,右侧则会自动根据分类系列系列值进行拼接字符串。最终将拼接好的串加到serices:[]中。

注意:

目前有三个固定宏,id(图形的唯一号) width(图形宽) height(图形高),程序会自动填写,不会列出到左边参数面板。

 

JS具体实现思路:

处理前:

处理后:

scatter.toSeriesjs文件中添加的方法如下:

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()函数。