实训：气候温度与降水量蒸发量的关系分析

最新推荐文章于 2024-04-15 09:53:09 发布

昭昭a

最新推荐文章于 2024-04-15 09:53:09 发布

阅读量374

点赞数 13

文章标签： echarts

本文链接：https://blog.csdn.net/l15972865175/article/details/137765943

版权

一、原题目

二、完整代码

三、代码实现

实训1气候温度与降水量、蒸发量的关系分析
1.训练要点
掌握 ECharts 混搭图表的绘制。
2.需求说明
基于“气候温度与降水量蒸发量.xlsx”数据，绘制折线图与柱状图混搭图表，分析气候温度与降水量、蒸发量的关系。
3.实现思路及步骤
(1)在VS Code中创建 LineBarMashUp.html 文件。
(2)绘制折线图与柱状图混搭图表。首先，在LineBarMashUp.html文件中引入 echarts.js 库文件。其次，准备一个具备大小(weight与height)的div容器，并使用init()方法初始化容器。最后设置折线图和柱状图的配置项、“温度”“降水量”与“蒸发量”数据完成混搭图表的绘制。

二、完整代码

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <!--引入ECharts脚本-->
    <script src="js/echarts.js"></script>
</head>

<body>
    <!---为ECharts准备一个具备大小（宽高）的DOM-->
    <div id="main" style="width: 800px; height: 400px"></div>
    <script type="text/javascript">
        //基于准备好的DOM，初始化ECharts图表
        var myChart = echarts.init(document.getElementById("main"));
        //指定图表的配置项和数据
        var colors = ['#FF9999', '#99CCFF', '#CCCCFF'];
            option = {
            title: {
                text: '气候温度与降水量蒸发量',
            },
            
            
            color: colors,
        
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'cross'
                }
            },
            grid: {
                right: '20%'
            },
            toolbox: {
                feature: {
                    dataView: {show: true, readOnly: false},
                    restore: {show: true},
                    saveAsImage: {show: true}
                }
            },
            legend: {
                data: ['蒸发量', '降水量', '平均温度']
            },
            xAxis: [
                {
                    type: 'category',
                    axisTick: {
                        alignWithLabel: true
                    },
                    data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
                }
            ],
            yAxis: [
                {
                    type: 'value',
                    name: '蒸发量',
                    min: 0,
                    max: 250,
                    position: 'right',
                    axisLine: {
                        lineStyle: {
                            color: colors[0]
                        }
                    },
                    axisLabel: {
                        formatter: '{value} ml'
                    }
                },
                {
                    type: 'value',
                    name: '降水量',
                    min: 0,
                    max: 250,
                    position: 'right',
                    offset: 80,
                    axisLine: {
                        lineStyle: {
                            color: colors[1]
                        }
                    },
                    axisLabel: {
                        formatter: '{value} ml'
                    }
                },
                {
                    type: 'value',
                    name: '温度',
                    min: 0,
                    max: 25,
                    position: 'left',
                    axisLine: {
                        lineStyle: {
                            color: colors[2]
                        }
                    },
                    axisLabel: {
                        formatter: '{value} °C'
                    }
                }
            ],
            series: [
                {
                    name: '蒸发量',
                    type: 'bar',
                    data: [2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3]
                },
                {
                    name: '降水量',
                    type: 'bar',
                    yAxisIndex: 1,
                    data: [2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3]
                },
                {
                    name: '平均温度',
                    type: 'line',
                    yAxisIndex: 2,
                    data: [2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2]
                }
            ]
        };
        //使用刚指定的配置项和数据显示图表
        myChart.setOption(option);
    </script>
</body>

</html>

三、代码实现

昭昭a

关注

13
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
实训：气候温度与降水量蒸发量的关系分析

实训1气候温度与降水量、蒸发量的关系分析1.训练要点掌握 ECharts 混搭图表的绘制。2.需求说明基于“气候温度与降水量蒸发量.xlsx”数据，绘制折线图与柱状图混搭图表，分析气候温度与降水量、蒸发量的关系。3.实现思路及步骤(1)在VS Code中创建 LineBarMashUp.html 文件。(2)绘制折线图与柱状图混搭图表。首先，在LineBarMashUp.html文件中引入 echarts.js 库文件。
复制链接

扫一扫