本帖最后由 夏天骑冷月 于 2024-1-11 10:05 编辑
1.加载多套图表
多图表的加载需要在第二套的图表上加上参数 reuse: true,
代码如下所示：
- // 引入一键图表脚本
- THING.Utils.dynamicLoad(['/static/ScenePreview/chart/PreviewChartControl.js'], function () {
- // 创建图表
- new PreviewChartControl({
- url: '/api/chart/63f588dcee63ce1d897ab776',
- tag: '1',
- isLoad: true, // 加载页，默认为true
- isApplyBackground: false, // 是否应用图表背景，启用该参数会替换app.background的值，默认false
- autoResize: { // 图表自适应
- enable: false, // 自适应图表分辨率，默认为false
- orgin: 'center center' // 自适应的基准点，第一个参数取值为:left、center、right，第二个参数取值为:top、center、bottom，默认值为“center center”
- },
- complete: function(){
-
- new PreviewChartControl({
- url: '/api/chart/63f329adee63ce1d897ab6e1',
- tag: '1',
- isLoad: true, // 加载页，默认为true
- reuse: true,
- isApplyBackground: false, // 是否应用图表背景，启用该参数会替换app.background的值，默认false
- autoResize: { // 图表自适应
- enable: false, // 自适应图表分辨率，默认为false
- orgin: 'center center' // 自适应的基准点，第一个参数取值为:left、center、right，第二个参数取值为:top、center、bottom，默认值为“center center”
- },
- complete: function(){
-
- }
- });
- }
- });
- })
图表的切换需要将两套图表都加载在项目中，对图表进行打组，之后可用css动画控制图表组合的移入移出作为切换展示。
可参考如下示例：
（1）选择一张图表作为首页
（2）首页图表可包含标题，底部按钮，两侧边框等内容，另选一张作为需要切换的第二套图表，图表内容应相互关联，风格相近
（3）对图表进行左侧和右侧的打组，便于控制，如下图示例：
（4）添加切换的Css动画:
- .showleft{
- animation: leftShow 2s forwards;
- }
- @keyframes leftShow{
- from{left: -450px}
- to{left: 25px}
- }
- .removeleft{
- animation: leftRemove 2s forwards;
- }
- @keyframes leftRemove {
- from{left: 25px}
- to{left:-450px}
- }
- .showRight{
- animation: rightShow 2s forwards;
- }
- @keyframes rightShow{
- from{left:2000px}
- to{left:1680px}
- }
- .removeRight{
- animation: rightRemove 2s forwards;
- }
- @keyframes rightRemove{
- from{left:1680px}
- to{left:2000px}
- }
- .removeTop{
- animation: topRemove 2s forwards;
- }
- @keyframes topRemove{
- from{top:0px}
- to{top:-200px}
- }
- .showTop{
- animation: topShow 2s forwards;
- }
- @keyframes topShow{
- from{top:-200px}
- to{top:-0px}
- }
- .scale{
- transform: scale(0.5);
- }
- $('div[data-group-alias=group_top02]').on('click', function () {//给组名为group_top02的按钮添加事件，此处可修改为按钮的组别名
- // 摄像机飞行到某位置
- app.camera.flyTo({
- 'position': [-10.397369275768664, 18.13095377395566, 38.36528228041324],
- 'target': [-10.486774704086308, 5.771037733772861, 5.53022802939024],
- 'time': 2000,
- 'complete': function () {
- }
- });
- $('div[data-group-alias=group_left01]').css({ visibility: 'visible', opacity: '1' })//控制组名为group_left01的图表显示
- $('div[data-group-alias=group_right01]').css({ visibility: 'visible', opacity: '1' })
- $('div[data-group-alias=group_top]').css({ visibility: 'visible', opacity: '1' })
- $('div[data-group-alias=group_left01]').removeClass('removeleft').addClass('showleft');
- $('div[data-group-alias=group_right01]').removeClass('removeRight').addClass('showRight');
- $('div[data-group-alias=group_left02]').addClass('removeleft');
- $('div[data-group-alias=group_right02]').addClass('removeRight');
- $('div[data-group-alias=group_top02]').removeClass('showTop').addClass('removeTop');
- $('div[data-group-alias=group_top]').removeClass('removeTop').addClass('showTop');
- });
|
|
|
|
|
|
|
|
|
|
4155
0
