JS在报表中嵌入天气插件

1.1 问题描述

HTML显示天气预报 中方法虽可以实现，但不够灵活，样式不够美观。如果要在报表上插入好看的天气预报模块,要如何实现呢? 如下图所示：

1.2 解决思路

参考：中国天气-天气插件平台 ,找到喜欢的天气样式，引入 JS 和 CSS 即可。

2.1 准备插件

1）前往 中国天气-天气插件平台 注册 、登录。如下图所示：

2）点击「创建插件 > 创建网页简约插件」，创建插件。如下图所示：

3）在「创建网页简约天气插件」页面，设置插件样式，如下图所示：

4）样式设置成功后，点击「生成代码」，如下图所示：

2.2 制作模板

 新建模板，选取一个单元格 ，在单元格中添加一个 div，内容如下：

<div id="weather-v2-plugin-simple"></div>

 将单元格显示方式设置为「用HTML显示内容」，如下图所示：

如果是决策报表，在决策报表中添加报表块 ，在报表块单元格中添加一个 div，内容如下：

<div id="weather-v2-plugin-simple"></div>

2.3 添加事件

点击菜单栏「模板>模板Web属性>分页预览设置」，选择「为该模板单独设置」，添加一个「加载结束」事件：如下图所示：

事件内容为 2.1 节中生成的代码。

JavaScript 代码如下：

$(function() {

	$.getScript("https://apip.weatherdt.com/simple/static/js/weather-simple-common.js?v=2.0");
	WIDGET = {
		CONFIG: {
			"modules": "01234",
			"background": 1,
			"tmpColor": "FFFFFF",
			"tmpSize": 16,
			"cityColor": "FFFFFF",
			"citySize": 16,
			"aqiSize": 16,
			"weatherIconSize": 24,
			"alertIconSize": 18,
			"padding": "10px 10px 10px 10px",
			"shadow": "1",
			"language": "auto",
			"borderRadius": 5,
			"fixed": "false",
			"vertical": "middle",
			"horizontal": "center",
			"key": "lkBcLQsEtT"
		}
	}

})

报表块中事件添加在报表块「初始化」事件中。

2.4 效果预览

保存模板，点击「分页预览」，效果如下图所示：

决策报表中效果如下图所示：

注：不支持移动端。

点击下载模板：天气插件.cpt

登录「天气插件平台 > 登录账户 > 点击用户名 >  用户中心 」，可以查看插件运行状态。如下图所示：

在「网页插件」处  就能看到自己创建插件的运行状态。如下图所示：