历史版本1 :数据点提示轮播时联动其他组件 返回文档
编辑时间:
内容长度:图片数:目录数:
修改原因:
1. 描述编辑
客户想实现地图自动播放数据点提示时可以联动其他图表显示对应区域的数据，如下图所示：
2. 思路编辑
通过sql()函数获取地图数据的所有区域值并赋值给window.area，通过图表接口获取地图的的所有数据点allPoints，使用setInterval()函数循环window.area，将当前window.area[window.temp]区域值传给图表实现图表的数据刷新，并判断allPoints数据点，当数据点的区域名称等于当前window.area[window.temp]区域值，则显示相应区域的数据点提示。
获取地图所有数据点：
var vanchart = FR.Chart.WebUtils.getChart('chart0').vanCharts.charts[0];
var series = vanchart.series,
allPoints = [];
// 获取chart下的所有系列和所有数据点
for (var i = -1; ++i < series.length;) {
allPoints = allPoints.concat(series[i].points);
}
图表传参刷新数据js：
FR.Chart.WebUtils.changeParameter(
'chart1', {
"area": window.area[window.temp]
}
);
地图显示数据点提示js：
vanchart.showTooltip(allPoints[j]);
3. 操作步骤编辑
3.1 新建数据集
新建决策报表，新建两个数据集：
地图：SELECT * FROM 地图
图表：SELECT * FROM 地图 where 1=1 ${if(len(area)=0,""," and pid='"+area+"'")}
3.2 添加图表
添加三个图表：地图、饼图、柱形图，如下图所示：
地图属性数据设置如下：
饼图属性数据设置如下：
柱形图属性数据设置如下：
3.3 添加初始化事件
控件列表选择body，添加初始化事件：
在初始化界面的参数界面，新建一个area参数，参数值使用公式：sql("FRDemo","SELECT distinct pid FROM 地图 where pid!=''",1)
初始化事件js代码如下：
window.area = area;
window.temp = 0;
var len = window.area.length;
var temp = 0;
setTimeout(function() {
var vanchart = FR.Chart.WebUtils.getChart('地图').vanCharts.charts[0];
var series = vanchart.series, allPoints = [];
/* 获取chart下的所有系列和所有数据点 */
for (var i = -1; ++i < series.length;) {
allPoints = allPoints.concat(series[i].points);
}
setInterval(function() {
/*刷新饼图*/
FR.Chart.WebUtils.changeParameter(
'饼图', {
"area": window.area[window.temp]
}
);
/*刷新柱形图*/
FR.Chart.WebUtils.changeParameter(
'柱形图', {
"area": window.area[window.temp]
}
);
for (var j = 0; j < allPoints.length; j++) {
if (allPoints[j].name == window.area[window.temp]) {
/* 使用vanchart.showTooltip展示数据点 */
vanchart.showTooltip(allPoints[j]);
}
}
if (window.temp == (window.area.length - 1)) {
window.temp = 0;
} else {
window.temp = window.temp + 1;
}
}, 2000);/* 间隔两秒循环一次 */
}, 1000);
4. 预览效果编辑
不支持移动端。