历史版本7 :FVS图表接口 返回文档
编辑时间: 内容长度:图片数:目录数: 修改原因:

适用场景：安装了「FVS大屏编辑模式」插件的用户，可参考本文了解 FVS 模板的相关接口。

目录:

版本编辑

报表服务器版本插件版本功能变动
11.0.16V1.15.1FVS图表组件适配 API 接口

注：本文接口不支持 FVS 中 扩展图表 类型的图表组件。

duchamp.getWidgetByName编辑

方法duchamp.getWidgetByName("widgetName")获取图表组件对象，获取后可以使用组件的方法和属性
     参数widgetNameFVS 图表组件名称
   返回值object 当前图表组件对象
     示例

示例：获取「柱形图组件」对象

duchamp.getWidgetByName("柱形图组件")


  应用示例

-

    移动端支持移动端

getSeries编辑

方法getSeries()获取系列对象数组
     参数--
   返回值series[]当前图表组件系列数组
     示例

示例：获取「柱形图组件」对象的系列数组

duchamp.getWidgetByName("柱形图组件").getSeries();


  应用示例

-

    移动端支持移动端

series编辑

方法series[seriesIndex]获取系列对象
     参数seriesIndex默认的图表对象有一个 series 属性，该对象存储的是图表内系列相关的数据信息，是一个对象数组。如果想要获得图表中某一个具体的系列对象，则需要指定对应的索引 seriesIndex，seriesIndex 从 0 开始计数
     示例示例：获取「柱形图组件」对象的第一个系列对象
var series=duchamp.getWidgetByName("柱形图组件").getSeries();
console.log(series[0]);

注：写在一起时正确写法为 getSeries()[0] ，不支持 getSeries().series[0] 

  应用示例

-

    移动端支持移动端

series 属性

属性
类型说明
pointsArray当前系列的所有数据点
nameString当前系列的名字，跟图例显示的系列名一致
typeString 

当前系列的图表类型，目前包括的类型如下图所示：

1624607711775637.png

series.points编辑

方法
series.points[pointIndex]

获取数据点对象

需在获取图表系列对象之后使用

参数pointIndex

每个 series 对象里面又有一个 points 的属性，也是一个对象数组，这个 points 数组里面存放的就是我们想要的 point 数据点对象。

如果需要获取某个具体的数据点对象，则需要指明该数据点的索引 pointIndex，pointIndex 从 0 开始计数

示例

示例：获取「柱形图组件」对象的第一个系列对象的第一个数据点

duchamp.getWidgetByName("柱形图组件").getSeries()[0].points[0];


移动端支持移动端

points 属性

属性类型说明
nameString对于区域地图来说，name 表示当前数据点的区域名，比如江苏省，南通市等等
seriesNameString当前数据点所在的系列名
categoryString对于坐标轴图，表示数据点所在分类的名字
categroyArrayArray对于 多分类坐标轴图，表示数据点所在分类数组的名字
valueNumber

对于坐标轴图，表示数据点在值轴对应的数值

注：散点图的 value 对应「值」字段的数值

series Object当前数据点所在的系列

setSeriesVisible编辑

方法setSeriesVisible()图表显示部分系列
     参数seriesIndex[]

seriesIndex:number

表示一个图表中不同的系列，从 0 开始计数

   返回值--
     示例

示例：显示柱形图组件的系列1和系列2

duchamp.getWidgetByName("柱形图组件").setSeriesVisible([0,1]);


  应用示例

-

    移动端支持移动端

sortChart编辑

方法sortChart(sortType)图表排序接口
     参数sortTypesortType 参数表示排序规则，1 表示升序，-1 表示降序，不写参数则升序降序互相切换
   返回值--
     示例

示例：

duchamp.getWidgetByName("柱形图组件").sortChart();


  应用示例

-

    移动端支持移动端

openAutoTooltip编辑

方法openAutoTooltip([delay, initPoints])数据点提示轮播接口
     参数delay, initPoints

delay 数据点提示的切换时间间隔，默认为 3s

initPoints 轮播数据点提示对应的数据点集合，默认为图表内所有数据

   返回值--
     示例

示例：

duchamp.getWidgetByName("柱形图组件").openAutoTooltip(3000);

注：3000代表轮播时间间隔3秒，可自行调整

  应用示例

FVS基础图表实现数据点提示轮播

    移动端支持移动端

setMapZoom编辑

方法setMapZoom(mapZoom)设置地图缩放等级和中心点
     参数MapZoomProps = {
  zoomLevel: number | string;
  viewCenter:  [number, number];
};		zoomLevel：缩放等级，值区间一般在0-18。数值越大，层级越高，地图显示越细致，显示的经纬度范围越小

viewCenter：中心点，[经度，纬度]

   返回值--
     示例

示例：

duchamp.getWidgetByName("地图1").setMapZoom({zoomLevel: 5, viewCenter: [110, 40]});


  应用示例

-

    移动端支持移动端

getZoom编辑

方法getZoom()获取地图缩放层级
     参数--
   返回值number缩放等级，值区间一般在0-18。数值越大，层级越高，地图显示越细致，显示的经纬度范围越小
     示例

示例：

duchamp.getWidgetByName("地图1").getZoom();


  应用示例

-

    移动端不支持移动端

getCenter编辑

方法getCenter()获取地图中心点
     参数--
   返回值

 [number, number]

中心点，[经度，纬度]
     示例

示例：

duchamp.getWidgetByName("地图1").getCenter();


  应用示例

-

    移动端不支持移动端

panTo编辑

方法panTo(center)地图转移中心点
     参数center

center 中心点，[纬度，经度]

 注：panTo 接口中「纬度」在前，「经度」在后

   返回值--
     示例

示例：

duchamp.getWidgetByName("地图1").panTo([40,118]); //根据经纬度移动中心点


  应用示例

-

    移动端不支持移动端

drillDown编辑

方法drillDown(area)钻取地图向下钻取
     参数areaarea 不是单纯的区域名，而是区域名下对应的一系列信息，可根据区域名获取到 area
   返回值--
     示例

示例：

var chart =duchamp.getWidgetByName("钻取区域地图1_页面1");//获取图表
var quyu = duchamp.getWidgetByName("省份").getValue(); //获取下拉框控件值
if (chart.getLayerIndex() > 0)
	chart.drillUp(chart.getLayerIndex() - 1); //若已经下钻，点击其他区域需返回上一层级后再次下钻
var areas = [];
chart.getSeries().forEach(ser => areas.push(...ser.points));
var len = areas.length;
for (var i = 0; i < len; i++) {
	if (areas[i].name == quyu) {
		chart.drillDown(areas[i]);
		break;
	}
 }


  应用示例

-

    移动端不支持移动端

drillUp编辑

方法drillUp(index)钻取地图向上钻取
     参数indexindex：自然数，表示钻取层级，从0开始：0、1、2……
   返回值--
     示例

示例：

var chart =duchamp.getWidgetByName("钻取区域地图1_页面1");//获取图表
var quyu = duchamp.getWidgetByName("省份").getValue(); //获取下拉框控件值
if (chart.getLayerIndex() > 0)
	chart.drillUp(chart.getLayerIndex() - 1); //若已经下钻，点击其他区域需返回上一层级后再次下钻
var areas = [];
chart.getSeries().forEach(ser => areas.push(...ser.points));
var len = areas.length;
for (var i = 0; i < len; i++) {
	if (areas[i].name == quyu) {
		chart.drillDown(areas[i]);
		break;
	}
 }


  应用示例

-

    移动端不支持移动端

getLayerIndex编辑

方法getLayerIndex()获取钻取地图当前钻取层级，获取的层级从0开始：0、1、2……
     参数--
   返回值number钻取地图当前钻取层级
     示例

示例：

duchamp.getWidgetByName("钻取地图1").getLayerIndex();


  应用示例

-

    移动端不支持移动端

getLayerNames编辑

方法getLayerNames()获取钻取目录名称，结果为数组，例如：["中国", "湖南省", "长沙市"]
     参数--
   返回值string[]数组，例如：["中国", "湖南省", "长沙市"]
     示例

示例：

duchamp.getWidgetByName("钻取地图1").getLayerNames();


  应用示例

-

    移动端不支持移动端