组件示例

数据接入示例

下载组件源码 下载示例大屏
核心代码:

1
2
3
4
5
6
7
8
9
10
11
//数据接入
(async function () {
//读取数据
let data = await ShanhaiBI.getData();
console.log("data", data);
let columns = data.getColumns(); //获取所有的数据列
option.xAxis.data = columns[0]; //第一列数据
option.series[0].data = columns[1]; //第二列数据

myChart.setOption(option); //更新echarts图表
})();

设置项示例

下载组件源码 下载示例大屏
核心代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
//设置项
(async function () {
//初始化设置项
await ShanhaiBI.initSettings({
format: [
{
name: "smooth",
alias: "平滑线",
type: "boolean",
default: false,
},
],
});
//读取设置项的值
let smooth = await ShanhaiBI.getSetting("smooth");
//使设置项生效
option.series[0].smooth = smooth;
myChart.setOption(option); //更新echarts图表
})();

数据进阶示例

下载组件源码 下载示例大屏
核心代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
//数据进阶
(async function () {
//数据字段分类
await ShanhaiBI.initSettings({
fields: [
{
name: "category",
alias: "分类",
type: "axis",
},
{
name: "value",
alias: "值",
type: "axis",
},
],
});
//读取数据
let data = await ShanhaiBI.getData();
option.xAxis.data = data.getColumn("category"); //获取category的第一列数据
option.series[0].data = data.getColumn("value"); //获取value的第一列数据
myChart.setOption(option);
})();

数据联动示例

下载组件源码 下载示例大屏
核心代码:

1
2
3
4
5
6
7
8
9
10
11
//数据联动
$("#btn1").on("click", async () => {
//触发 城市为杭州 的联动
await ShanhaiBI.applyLinkage({
城市: "杭州",
});
});
$("#btn2").on("click", async () => {
//取消之前触发的联动
await ShanhaiBI.withdrawLinkage();
});

过场动画示例

下载组件源码 下载示例大屏
核心代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
//过场动画
(async function () {
//注册过场动画,该函数可调用多次以注册不同的过场动画
//第一个参数为动画名称
//第二个参数为动画参数定义
//第三个参数为动画执行函数
await ShanhaiBI.registerTransition(
"平移",
{
type: {
label: "平移类型",
choices: [
{ label: "水平", value: "horizontal" },
{ label: "垂直", value: "vertical" },
],
default: "horizontal",
},
},
(duration, args) => {
console.log(duration, args);
let type = args["type"];
if (type === "horizontal") {
//水平平移动画
return gsap
.fromTo(
"#title",
{ left: 0 },
{ left: "250px", duration: duration / 2 / 1000, ease: "power2.in" }
)
.then(() => {
return gsap.to("#title", {
left: 0,
duration: duration / 2 / 1000,
ease: "power2.in",
});
});
} else if (type === "vertical") {
//垂直平移动画
return gsap
.fromTo(
"#title",
{ top: 0 },
{ top: "250px", duration: duration / 2 / 1000, ease: "power2.in" }
)
.then(() => {
return gsap.to("#title", {
top: 0,
duration: duration / 2 / 1000,
ease: "power2.in",
});
});
}
}
);
})();

app 控制示例

下载组件源码 下载示例大屏
核心代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
//app控制
(async function () {
//注册app操作,该函数可调用多次以添加多个不同的分组
//第一个参数为操作分组
//第二个参数为该分组中的操作
await ShanhaiBI.registerAppActions("平移操作", [
{
name: "水平平移",
func: () => {
return gsap
.fromTo(
"#title",
{ left: 0 },
{ left: "250px", duration: 1, ease: "power2.in" }
)
.then(() => {
return gsap.to("#title", {
left: 0,
duration: 1,
ease: "power2.in",
});
});
},
},
{
name: "垂直平移",
func: () => {
return gsap
.fromTo(
"#title",
{ top: 0 },
{ top: "250px", duration: 1, ease: "power2.in" }
)
.then(() => {
return gsap.to("#title", {
top: 0,
duration: 1,
ease: "power2.in",
});
});
},
},
]);
})();

threejs 3D 模型示例

下载组件源码 下载示例大屏
效果预览
threejs示例.gif