该宏示例在 V10.5上 验证通过 提示：本文档的示例代码仅适用于本文档中的示例报表/场景。若实际报表/场景与示例代码无法完全适配（如使用功能不一致，或多个宏代码冲突等），需根据实际需求开发代码。 |
示例效果
通过宏代码实现单起点、多起点的酷炫航线图效果，当前宏代码适用于即席查询、透视分析、电子表格。
以即席查询为例，基于数据源“northwind”创建即席查询，使用了其中的数据表“t_airlinemap”，预期效果如下：
1. 单起点航线效果
2. 多起点航线效果
由于“图形数据动态变化”的默认值是“当前页数据”，如需实现多起点航线图效果可采取以下方案： ① 手动切换该值为“全部数据”。
② 手动设置当前页显示的最大行数，或者设置字段筛选器指定以哪些城市为起点。
|
操作步骤
1. 创建即席查询
新建“即席查询”，选择数据源为“northwind”
2. 选择数据
在左边侧边栏向下扩展开的列表中找到表 “t_airlinemap”，勾选所有字段，点击刷新即可查看对应的数据。
3. 绘制航线图
① 在工具栏中点击 “添加图形” 按钮
② 修改图形类型为“地图”-“航线图”，选择指定地图为“中国”，勾选“c_FromCity”为开始区域标识，“c_ToCity”为结束区域标识，“c_Value”为指标，然后点击”确定“。保存该即席查询。
4. 编辑宏代码
在资源区内找选中刚才创建的即席查询，右键选择 “宏管理” 进入宏管理界面。
在宏管理界面新建客户端模块。在弹出的新建模块对话框中选择对象为“chart”，事件为“beforeRenderer”，并把下面宏代码复制到代码区域；
- 单起点航线效果
function main(chartView) {
var chart = chartView.getChartObject();
var options = chart.getOptions();
//设置起点图例不显示
options.legend.show = false;
setToolTip(options);
setLineType(options.series[0], options.series[2]);
setLineType(options.series[1], options.series[2]);
setVisualMap(options);
setGeoType(options);
setEffect(options.series[2], options);
}
//设置toolTip提示信息样式
function setToolTip(options){
options.tooltip.backgroundColor = "rgba(95,158,160,0.9)";
options.tooltip.textStyle = options.tooltip.textStyle || {};
options.tooltip.textStyle.color = "black";
}
//设置地图及画布样式
function setGeoType(options) {
options.backgroundColor = '#013954';
options.geo.itemStyle = options.geo.itemStyle || {};
options.geo.itemStyle.normal = options.geo.itemStyle.normal || {};
options.geo.itemStyle.normal.color = 'rgba(51, 69, 89, .5)';
options.geo.itemStyle.normal.borderColor = '#516a89';
options.geo.itemStyle.borderWidth = 1;
options.geo.emphasis = options.emphasis || {};
options.geo.emphasis.color = 'rgba(37, 43, 61, .5)';
//地图比例
options.geo.zoom = 1.2;
//是否可缩放
options.roam = true;
}
//设置航线样式
function setLineType(line, dataItem) {
line.effect = {
show: true,
period: 4, //箭头指向速度，值越小速度越快
trailLength: 0.02, //特效尾迹长度[0,1]值越大，尾迹越长重
symbol: 'arrow', //箭头图标
symbolSize: 4, //图标大小
};
line.lineStyle = {
normal: {
width: 0.5, //尾迹线条宽度
opacity: 1, //尾迹线条透明度
curveness: 0.2, //尾迹线条曲直度
}
};
line.symbol = 'none';
//设置航线颜色
for (let i = 0; i < line.data.length; i++) {
line.data[i].lineStyle = line.data[i].lineStyle || {};
if (dataItem.data[i].value[2] < 80) {
line.data[i].lineStyle.color = "#00eaff";
} else {
line.data[i].lineStyle.color = "#f44336";
}
}
}
//设置圆环样式
function setEffect(line, options) {
line.symbol = 'circle';
line.symbolSize = function(val) {
return 5 + val[2] / 10; //圆环大小，根据数组设置
};
//设置圆环、标签颜色
for (var i = 0; i < line.data.length; i++) {
line.data[i].label = line.data[i].label || {};
line.data[i].itemStyle = line.data[i].itemStyle || {};
if (line.data[i].value[2] < 80) {
line.data[i].label.color = "#00eaff";
line.data[i].itemStyle.color = "#00eaff";
} else {
line.data[i].label.color = "#f44336";
line.data[i].itemStyle.color = "#f44336";
}
line.data[i].label.fontFamily = "serif";
line.data[i].label.position = 'right';
}
}
//设置数值图例
function setVisualMap(options) {
options.visualMap = options.visualMap || {};
options.visualMap = {
min: 0,
max: 100,
calculable: false,//是否可计算
show: true,
color: ['#f44336', '#00eaff'],
textStyle: {
color: '#fff'
}
};
} |
- 多起点航线效果
function main(chartView) {
var chart = chartView.getChartObject();
var option = chart.getOptions();
var color = ['#f44336', '#00eaff'];
var index = 1;
var colorIndex = 0;
for (let i = 0; i < option.series.length; i++) {
if (index % 3 === 0) {
setEffect(option.series[i], color[colorIndex++]);
} else {
setLineStyle(option.series[i], color[colorIndex]);
}
index++;
}
setLegend(option);
setGeoType(option);
setToolTip(option);
setGeoBorder(option);
}
//设置航线样式
function setLineStyle(line, color) {
line.effect = {
show: true,
period: 3, //箭头指向速度，值越小速度越快
trailLength: 0.02, //特效尾迹长度[0,1]值越大，尾迹越长重
symbol: 'diamond', //箭头图标
symbolSize: 5, //图标大小
};
line.lineStyle.normal = line.lineStyle.normal || {};
line.lineStyle.normal.width = 0.5;
line.lineStyle.normal.curveness = 0.2;
line.lineStyle.normal.color = color;
line.symbol = 'none';
for (let i = 0; i < line.data.length; i++) {
line.data[i].lineStyle = line.data[i].lineStyle || {};
line.data[i].lineStyle.color = color;
}
}
//设置圆环不显示
function setEffect(line, color) {
line.symbol = 'none';
}
//设置图例样式
function setLegend(option) {
option.legend.selectedMode = "multiple";
option.legend.textStyle = option.legend.textStyle || {};
option.legend.textStyle.color = option.legend.textStyle.color || {};
option.legend.textStyle.color = "white";
option.legend.textStyle.fontSize = 10;
}
//设置地图及画布样式
function setGeoType(options) {
options.backgroundColor = 'rgba(1,57,84,0.8)';
options.geo.itemStyle = options.geo.itemStyle || {};
options.geo.itemStyle.normal = options.geo.itemStyle.normal || {};
options.geo.itemStyle.normal.color = 'rgba(51, 69, 89, .5)';
options.geo.itemStyle.normal.borderColor = 'rgba(28,199,242,1.0)';
options.geo.itemStyle.normal.borderWidth = 2.5;
options.geo.emphasis = options.emphasis || {};
options.geo.emphasis.color = 'rgba(37, 43, 61, .5)';
//地图比例
options.geo.zoom = 1.2;
//是否可缩放
options.roam = false;
}
//设置toolTip提示信息样式
function setToolTip(options) {
options.tooltip.backgroundColor = "rgba(95,158,160,0.9)";
options.tooltip.textStyle = options.tooltip.textStyle || {};
options.tooltip.textStyle.color = "black";
}
//设置地图外框边框（series多加一层地图）
function setGeoBorder(option) {
option.series.push({
type: "map",
map: "CHINA",
//roam: true,
silent: true,
zoom: 1.2,
itemStyle: {
normal: {
areaColor: 'rgba(23,30,59,1)',
borderWidth: 1, //设置外层边框
borderColor: 'rgba(81,106,137,0.8)',
},
emphasis: {
areaColor: 'rgba(23,30,59,0.8)',
borderWidth: 0.8, //设置外层边框
borderColor: '#516a89',
},
},
label: {
show: false
},
tooltip: {
formatter: '{a}',
backgroundColor: "rgba(95,158,160,0.9)",
textStyle: {
color: "black",
fontFamily: 'serif'
}
},
});
} |