API天气接口与ECharts联动：可视化天气数据

以下是一个简单的实例代码，使用API天气接口获取天气数据，并使用echarts将数据可视化：

HTML代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset='UTF-8'>
    <title>天气数据可视化</title>
    <!-- 引入 echarts -->
    <script src='https://cdn.bootcdn.net/ajax/libs/echarts/5.1.2/echarts.min.js'></script>
</head>
<body>
    <!-- 创建一个包含 echarts 的 div -->
    <div id='chart' style='width: 800px; height: 400px;'></div>

    <!-- 引入 jQuery -->
    <script src='https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js'></script>
    <script>
        // 使用 jQuery 发送请求获取天气数据
        $.getJSON('https://www.tianqiapi.com/api?version=v1&city=北京&appid=123456&appsecret=123456', function(data) {
            // 解析数据
            var dates = [];
            var highs = [];
            var lows = [];

            for (var i = 0; i < data.data.length; i++) {
                dates.push(data.data[i].date);
                highs.push(data.data[i].tem1);
                lows.push(data.data[i].tem2);
            }

            // 使用 echarts 可视化天气数据
            var myChart = echarts.init(document.getElementById('chart'));
            var option = {
                title: {
                    text: '北京天气'
                },
                tooltip: {},
                legend: {
                    data:['最高温度', '最低温度']
                },
                xAxis: {
                    data: dates
                },
                yAxis: {},
                series: [
                    {
                        name: '最高温度',
                        type: 'line',
                        data: highs
                    },
                    {
                        name: '最低温度',
                        type: 'line',
                        data: lows
                    }
                ]
            };
            myChart.setOption(option);
        });
    </script>
</body>
</html>

在这个例子中，我们使用了jQuery来发送请求获取天气数据，然后将数据解析为echarts所需的格式，并使用echarts可视化数据。在实际应用中，您可能需要根据您的具体需求进行更改和调整。