将序列传递给 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数据决定，不是一成不变，需根据不同的数据值灵活运用。