Apache ECharts 折线图

最新推荐文章于 2024-06-26 11:56:44 发布

一拳莫敌

最新推荐文章于 2024-06-26 11:56:44 发布

阅读量140

点赞数 8

文章标签： echarts 前端 javascript

本文链接：https://blog.csdn.net/qq_40660389/article/details/139444971

版权

Examples - Apache ECharts

Apache ECharts 是一个使用 JavaScript 实现的开源可视化库，它能够生成包括折线图在内的多种图表。折线图是一种常用的数据可视化工具，用于展示数据随时间、类别或其他维度的变化趋势。

以下是一个 Apache ECharts 折线图的示例代码，用于显示气温和湿度的数据：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ECharts 折线图示例 - 气温湿度</title>
    <!-- 引入 ECharts -->
    <script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.3.3/echarts.min.js"></script>
</head>
<body>
    <!-- 为 ECharts 准备一个具备大小的 DOM -->
    <div id="main" style="width: 600px;height:400px;"></div>

    <script type="text/javascript">
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));

        // 指定图表的配置项和数据
        var option = {
            title: {
                text: '某地区气温和湿度变化'
            },
            tooltip: {
                trigger: 'axis'
            },
            legend: {
                data:['气温', '湿度']
            },
            xAxis: {
                type: 'category',
                boundaryGap: false,
                data: ["周一", "周二", "周三", "周四", "周五", "周六", "周日"]
            },
            yAxis: {
                type: 'value',
                name: '值',
                min: 0,
                max: 100,
                interval: 20,
                axisLabel: {
                    formatter: '{value} °C'
                }
            },
            series: [
                {
                    name:'气温',
                    type:'line',
                    stack: '总量',
                    data:[22, 24, 23, 26, 25, 28, 27]
                },
                {
                    name:'湿度',
                    type:'line',
                    stack: '总量',
                    data:[30, 28, 32, 26, 35, 28, 33]
                }
            ]
        };

        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
    </script>
</body>
</html>

在这个示例中，我们创建了一个 ECharts 实例并定义了一个配置对象 option。在 option 中，我们设置了图表的标题 title、提示框 tooltip、图例 legend、X 轴 xAxis、Y 轴 yAxis 和系列 series。

series 对象定义了两个系列：气温 和 湿度。每个系列都有名称 name、类型 type（这里都是 line，即折线图）、堆叠 stack（这里设置为 ‘总量’，如果数据有多个系列需要堆叠在一起显示时可以使用）和数据 data。

请确保将 echarts.min.js 的 URL 替换为实际可用的路径。如果需要，还可以调整 option 对象中的其他配置项，以生成更符合需求的折线图。

一拳莫敌

关注

8
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Apache ECharts 折线图

Apache ECharts 是一个使用 JavaScript 实现的开源可视化库，它能够生成包括折线图在内的多种图表。折线图是一种常用的数据可视化工具，用于展示数据随时间、类别或其他维度的变化趋势。（这里设置为 ‘总量’，如果数据有多个系列需要堆叠在一起显示时可以使用）和数据。在这个示例中，我们创建了一个 ECharts 实例并定义了一个配置对象。的 URL 替换为实际可用的路径。如果需要，还可以调整。对象中的其他配置项，以生成更符合需求的折线图。中，我们设置了图表的标题。
复制链接

扫一扫