将序列传递给 js 模板

阅读(318) 标签: 序列,

以标准气泡图为例进行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数据决定,不是一成不变,需根据不同的数据值灵活运用。