echarts：折线图

最新推荐文章于 2024-08-01 12:00:00 发布

莫小封

最新推荐文章于 2024-08-01 12:00:00 发布

阅读量657

点赞数

分类专栏： echarts可视化文章标签：可视化 echarts javascript

本文链接：https://blog.csdn.net/qq_41390184/article/details/129878319

版权

echarts可视化专栏收录该内容

5 篇文章 0 订阅

订阅专栏

文章介绍了如何使用Echarts这个JavaScript库来绘制折线图，包括引入JS文件、准备HTML容器、设置数据、创建Echarts实例、定义图表配置项及应用到图表上的步骤。通过一个简单的月平均气温例子展示了完整的过程。

摘要由CSDN通过智能技术生成

Echarts是一个基于JavaScript的开源可视化库，我们将介绍如何使用Echarts绘制折线图，并通过一个简单的例子来说明。

首先，我们需要引入Echarts的JS文件，可以通过以下代码实现：

<script src="echarts.js"></script>

接着，我们需要准备一个HTML元素来容纳我们的图表，比如一个div元素：

<div id="chart" style="width: 600px; height:400px;"></div>

这里设置了div元素的宽度为600像素，高度为400像素，这样可以让图表在页面上有足够的空间展示。

然后，我们需要准备数据，这里我们以某个城市的月平均气温为例，数据可以用一个数组来表示：

var data = [12, 14, 16, 18, 20, 22, 24, 26, 24, 20, 16, 12];

接下来，我们就可以使用Echarts来绘制折线图了。首先，我们需要创建一个Echarts实例：

var chart = echarts.init(document.getElementById('chart'));

然后，我们需要定义图表的配置项，包括x轴、y轴、折线等等。下面是一个简单的配置项示例：

var option = {
    xAxis: {
        type: 'category',
        data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
    },
    yAxis: {
        type: 'value'
    },
    series: [{
        data: data,
        type: 'line'
    }]
};

这里我们定义了一个x轴，类型为category，表示月份；一个y轴，类型为value，表示气温；以及一个折线系列，数据为我们之前准备的data数组，类型为line，表示折线图。

最后，我们将配置项应用到图表中：

chart.setOption(option);

这样，我们就完成了折线图的绘制。完整的代码如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>折线图示例</title>
    <script src="echarts.js"></script>
</head>
<body>
    <div id="chart" style="width: 600px; height:400px;"></div>
    <script>
        var data = [12, 14, 16, 18, 20, 22, 24, 26, 24, 20, 16, 12];
        var chart = echarts.init(document.getElementById('chart'));
        var option = {
            xAxis: {
                type: 'category',
                data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
            },
            yAxis: {
                type: 'value'
            },
            series: [{
                data: data,
                type: 'line'
            }]
        };
        chart.setOption(option);
    </script>
</body>
</html>

当我们在浏览器中打开这个HTML文件时，就可以看到一个简单的折线图了。如果需要更加丰富的交互和样式效果，可以通过Echarts的配置项来实现。
在这里插入图片描述

莫小封

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
打赏
0
评论
echarts：折线图

这里我们定义了一个x轴，类型为category，表示月份；以及一个折线系列，数据为我们之前准备的data数组，类型为line，表示折线图。当我们在浏览器中打开这个HTML文件时，就可以看到一个简单的折线图了。Echarts是一个基于JavaScript的开源可视化库，我们将介绍如何使用Echarts绘制折线图，并通过一个简单的例子来说明。这里设置了div元素的宽度为600像素，高度为400像素，这样可以让图表在页面上有足够的空间展示。然后，我们需要定义图表的配置项，包括x轴、y轴、折线等等。
复制链接

扫一扫