景区智慧旅游数据中心

1. 报表总览

1.1.背景描述

近年来，随着政策推动和人民生活水平的不断提高，旅游市场的规模也在不断扩大，旅游行业正在从景点旅游向智慧旅游转变，帮助景区管理者采用信息化的管理手段，提高景区服务模式和创新性，以满足更多游客个性化、多元化的需求。

1.2.需求分析

景区智慧旅游数据中心需求包括：管理决策、宣传营销、游客信息、基础设施等。景区的营销方式、游客信息、交通状况、游客对景区的满意程度、景区客流量分析等等，都对景区发展有重要的意义。

可实现以下目标：

提供精准数据支撑，帮助景区管理者更好的决策；
为游客提供更全面、人性化的旅游服务；
丰富景区营销渠道，更好的宣传推广景区。

2. 定制方法

2.1. 总体设计

根据需求规划整个大屏所展现的内容，以及具体通过哪些组件实现最终效果。

该大屏需要展示客源分析、人流统计、消费统计、游客信息、营销信息等内容，整体布局设计如下：

设置项说明如下：

设置项	参数	说明
尺寸	1920*1080	根据需要投屏的屏幕大小，设置屏幕尺寸。
缩放方式	等比缩放宽度铺满	宽度铺满全屏，高度按比列自动缩放。
图形渲染器	SVG	适用于大区域渲染程序，比如高保真图形、带有某些特效的静态图像。
主题	浅色主题	选择浅色主题，在“仪表盘-图片"中上传自定义背景并选择拉伸和默认。
配色	黑色：#000001 绿色：#62F6F8	如果不选择上传图片也可以通过“仪表盘-颜色-自定义”选择背景色为黑色，在“组件-标题”选择绿色，符合景区旅游主题。组件颜色包含深绿色、深蓝色、紫色、黄色等，其中有的颜色比较鲜艳可适当降低饱和度，使画面更加舒适、美观。

详情请参考自适应方式、交互式仪表盘-主题区。

2.2. 组件详解

2.2.1.景区票务分析

组件

数据

定制方法

效果

营销

客户

销售

票务分析

二级类别、指标数

1、在“图层”的右边的点击组件选择“图表”，在”高级“中选择”漏斗图“。

2、标记区中设置如下：

3、组件设置中设置如下：

高级中，图形渲染器设置为“SVG”。

4、新建漏斗图标题间距宏：

复制代码到编辑区域：

漏斗图标题间距

function main(page: IPage, portlet: IEChartsPortlet) {
    let options = portlet.getChartOptions() //获取图形信息
    // 修改漏斗图与标题间距
    options.series[0].top = 1;
    portlet.setChartOptions(options)
}

5、新建标签之间的间距宏：

复制代码到编辑区域：

标签之间的间距

/**
类型：ClientSide
事件：onAfterRender
 */
 function main(page: IPage, portlet: IEChartsPortlet) {
 let options = portlet.getChartInstance().getOption(); //获取图形信息
 // 设置标签间距
 options.series[0].label.lineHeight = 15;

 portlet.getChartInstance().setOption(options); 
 }

客户、销售组件的设置方法相同。

广告投放

票务分析

列：三级类别

标记区：指标数

1、在“图层”的右边的点击组件，在“表格”选择“表”拖入画布区，双击选择“三级类别”、“指标数”字段

2、组件设置中设置如下：

基础：

组件：

详情请参考漏斗图、表组件。

2.2.3.主要来源省份

组件

数据

定制方法

效果

底层关系图

关系图 1

列：源点、目标点

1、在“图层”的右边的点击组件，在““图表”中选择”高级“选择拖拽“环形关系图”到画布区。

2、双击选中的字段“源点”、“目标点”，选择“源点”、“目标点”为标签类型

3、在组件设置中设置如下：

基础：

组件：背景颜色为透明，隐藏标题
高级：输出行数1000，图形主题选择“fantasy”

上层关系

关系图2

列：源头、目标

1、如上点击组件，在““图表”中选择”高级“选择拖拽“环形关系图”到画布区。

2、双击选中的字段“源头”、“目标”，在标记区选择“环形关系图”，“源头”、“目标”为颜色类型，颜色设置如下：

颜色选择为自动，由于一些颜色比较鲜艳，需要自定义一些数据颜色。

自定义颜色：省份颜色为透明，广西为“#8FE1F1”，广州为“#0CE9EC”，江苏为“#F8E71C”，山东为“#FE9E7F”，山西为“#62F6F8”，陕西为“#07B7D7”，上海为“#0884D9”

3、在组件设置中设置如下：

基础：连接曲率为0，普通状态的边框和连线为无
组件：背景颜色为透明，隐藏标题
图例：位置选择无图例
高级：输出行数1000

图片

1、拖拽图片组件到画布区，双击上传图片

2、在组件设置中，图片拉伸选择“适应”，隐藏图片标题

3、浮动顺序设置为顶层，调整图片大小，图片位置需要覆盖“省份”字体

详情请参考力导向关系图/环形关系图、图片组件。

2.2.3.景区舆情分析

数据

定制方法

效果

舆情监测

列：分类、舆情信息

1、点击组件在““表格”中选择“表”，拖拽表到画布区。

2、选择分类和舆情信息字段

3、在组件设置中设置如下：

基础：

组价：背景颜色选择透明、隐藏标题

4、实现滚动效果：

实现滚动效果可以直接在“组件设置-基础”开启滚动效果也可以通过新建滚动效果宏，步骤如下：

复制代码到编辑区域：

滚动

function main(page: IPage, portlet: ITablePortlet) {

    const fps = 15 // 每秒帧率，帧率越大，越流畅
    const step = 2 // 每帧步长，步长越大，滚动速度越快
    // 每秒滚动距离 = fps * step //

    // 非正式接口
    const portletEl = (portlet as any).__portletVue__.$el;
    // 找到表格
    const tableBody = portletEl.querySelector('.tableContainer .el-table__body-wrapper')
    // 隐藏滚动条
    portlet.appendCss('.ps__thumb-y', {
        display: 'none'
    })

    // 清理定时器
    if ((portlet as any).scrollInterval) {
        clearInterval((portlet as any).scrollInterval)
    }

    // 轮播
    (portlet as any).scrollInterval = setInterval(() => {
        // 超过最大长度重置
        if (tableBody.scrollTop + tableBody.offsetHeight >= tableBody.scrollHeight) {
            tableBody.scrollTo({
                top: 0,
                behavior: 'smooth'
            })
        } else {
            tableBody.scrollTo({
                top: tableBody.scrollTop + step,
                behavior: 'smooth'
            })
        }
        // console.log('scrollTop: ', bodyWrapper.scrollTop)
        // console.log('scrollHeight: ', bodyWrapper.scrollHeight)
        // console.log('offsetHeight: ', bodyWrapper.offsetHeight)
    }, 1000 / fps)

}

5、新建表格文字颜色效果宏：

复制代码到编辑区域：

表格文字颜色

function main(page: IPage, portlet: ITablePortlet) {
    console.log('portlet：', portlet);
    portlet.setCellStyleHandler(function (row, column, rowIndex, columnIndex) {
        //引入表格行样式处理函数
        let values = row.getCellValue(0);
        let displayValue = row.getCellDisplayValue(0);
        console.log(values);
        switch (values) {
            case '正面':
                return {
                    color: '#4A90E2' //设置背景颜色为蓝色
                }
                // return '<span style="color: red;">' + '其他' + '</span>'
            case '负面':
                return {
                    color: '#D4E275' //设置背景颜色为灰色
                }
            case '中性':
                return {
                    color: '#62F6F8' //设置背景颜色为绿色
                }
        }
        return null
    })
}

详情请参考表组件。

2.2.3.景区热门消费

数据

定制方法

效果

生态消费

标记区：消费类别、消费额

1、点击组件，在“图表”选中“高级”拖拽“词云图”图形组件到画布区。

2、选择组件的字段，其中标记区：

消费类别选择颜色“#4A90E2”
消费额选择大小
消费类别选择标签

3、在组件设置中设置如下：

基础：背景颜色为透明，隐藏标题
高级：输出行数为1000

4、新建词云图高宽效果宏：

复制代码到编辑区域：

词云图高宽

/**
 * 类型：ClientSide
 * 事件：onAfterRender
 */
function main(page: IPage, portlet: IEChartsPortlet) {
    let options = portlet.getChartInstance().getOption(); //获取图形信息
    // 设置词云图高度占比，设置百分比
    options.series[0].height = '90%';
    // 设置词云图宽度占比，设置百分比
    options.series[0].width = '90%';
    portlet.getChartInstance().setOption(options); 
}

详情请参考词云图。

2.2.3.景区7日客流量分析

数据

定制方法

效果

景区客流

列：区域

行：进入人数、离开人数、保有量

1、点击组件，在“图表”选中'高级"选择“双Y联合图”，拖拽图形组件到画布区。

2、选择组件的字段，其中标记区：

进入人数字段选择左轴“柱图”，颜色“#4A90E2”
离开人数字段选择右轴“柱图”，颜色“#62F6F8”
保有量字段选择右轴“线图”，颜色“#F8E71C”

3、在组件设置中设置如下：

基础：柱间距不同系列6%，同系列80%；堆积选择否
组件：背景选择透明，隐藏标题
坐标轴：分类轴和指标轴中，刻度颜色为白色，隐藏轴线；指标轴刻度不显示
图例：位置选择上方，文本颜色为白色
在自定义属性中，修改代码使图例的位置变为右上角，如下图：

详情请参考双Y联合图。

2.3. 设置动态效果

联动设置

1、在工具栏中点击 联动设置 钮，设置两个数据集的联动关系如下：

2、在营销组件上，拖动字段“大类”到筛选区，默认值选择“数字营销”，隐藏组件。

按照相同方法设置客户组件、销售组件。

3、在营销组件的更多中，点击 作为筛选器 ，并选择“影响报表>自定义”，勾选筛选器影响的组件：广告投入、客户、销售。

按照相同方法设置客户组件、销售组件。

关于联动设置，详情请参考联动设置。

3.资源下载

名称	下载
数据资源	demodata.rar
报表资源	景区智慧旅游数据中心.xml
图片资源	图片资源.rar
宏代码资源	漏斗图标题间距展开源码 function main(page: IPage, portlet: IEChartsPortlet) { let options = portlet.getChartOptions() //获取图形信息 // 修改漏斗图与标题间距 options.series[0].top = 1; portlet.setChartOptions(options) } 标签之间的间距展开源码 /** 类型：ClientSide 事件：onAfterRender / function main(page: IPage, portlet: IEChartsPortlet) { let options = portlet.getChartInstance().getOption(); //获取图形信息 // 设置标签间距 options.series[0].label.lineHeight = 15; portlet.getChartInstance().setOption(options); } 滚动展开源码 function main(page: IPage, portlet: ITablePortlet) { const fps = 15 // 每秒帧率，帧率越大，越流畅 const step = 2 // 每帧步长，步长越大，滚动速度越快 // 每秒滚动距离 = fps step // // 非正式接口 const portletEl = (portlet as any).__portletVue__.$el; // 找到表格 const tableBody = portletEl.querySelector('.tableContainer .el-table__body-wrapper') // 隐藏滚动条 portlet.appendCss('.ps__thumb-y', { display: 'none' }) // 清理定时器 if ((portlet as any).scrollInterval) { clearInterval((portlet as any).scrollInterval) } // 轮播 (portlet as any).scrollInterval = setInterval(() => { // 超过最大长度重置 if (tableBody.scrollTop + tableBody.offsetHeight >= tableBody.scrollHeight) { tableBody.scrollTo({ top: 0, behavior: 'smooth' }) } else { tableBody.scrollTo({ top: tableBody.scrollTop + step, behavior: 'smooth' }) } // console.log('scrollTop: ', bodyWrapper.scrollTop) // console.log('scrollHeight: ', bodyWrapper.scrollHeight) // console.log('offsetHeight: ', bodyWrapper.offsetHeight) }, 1000 / fps) } 表格文字颜色展开源码 function main(page: IPage, portlet: ITablePortlet) { console.log('portlet：', portlet); portlet.setCellStyleHandler(function (row, column, rowIndex, columnIndex) { //引入表格行样式处理函数 let values = row.getCellValue(0); let displayValue = row.getCellDisplayValue(0); console.log(values); switch (values) { case '正面': return { color: '#4A90E2' //设置背景颜色为蓝色 } // return '<span style="color: red;">' + '其他' + '</span>' case '负面': return { color: '#D4E275' //设置背景颜色为灰色 } case '中性': return { color: '#62F6F8' //设置背景颜色为绿色 } } return null }) } 词云图高宽展开源码 /** * 类型：ClientSide * 事件：onAfterRender */ function main(page: IPage, portlet: IEChartsPortlet) { let options = portlet.getChartInstance().getOption(); //获取图形信息 // 设置词云图高度占比，设置百分比 options.series[0].height = '90%'; // 设置词云图宽度占比，设置百分比 options.series[0].width = '90%'; portlet.getChartInstance().setOption(options); }

关注我们

服务支持

页面树结构

景区智慧旅游数据中心

1. 报表总览

1.1.背景描述

1.2.需求分析

2. 定制方法

2.1. 总体设计

2.2. 组件详解

2.2.1.景区票务分析

2.2.3.主要来源省份

2.2.3.景区舆情分析

2.2.3.景区热门消费

2.2.3.景区7日客流量分析

2.3. 设置动态效果

3.资源下载