资讯

历史

科技

环境与自然

成长

游戏

财经

文学与艺术

美食

健康

家居

文化

情感

汽车

三农

军事

旅行

运动

教育

生活

星座命理

折线图的绘制

创作时间:

作者:

@小白创作中心

折线图的绘制

引用

CSDN

https://blog.csdn.net/qq_55006020/article/details/142929760

折线图是一种常见的数据可视化图表，主要用于展示数据随时间或其他有序变量的变化趋势。通过连接各个数据点形成的折线，可以直观地看出数据是上升、下降还是保持稳定。本文将详细介绍折线图的特点、应用场景以及使用ECharts库绘制折线图的具体代码实现。

一、折线图的特点

折线图是一种常见的数据可视化图表，具有以下特点：

1. 显示趋势

折线图能够清晰地展示数据随时间或其他有序变量的变化趋势。通过连接各个数据点形成的折线，可以直观地看出数据是上升、下降还是保持稳定。
对于时间序列数据，如股票价格、气温变化、销售数据随月份的变化等，折线图可以帮助用户快速了解数据在不同时间点的走势，从而进行趋势分析和预测。

2. 反映变化幅度

不仅可以显示趋势的方向，还能体现数据变化的幅度。通过观察折线的斜率，可以判断数据变化的快慢程度。
例如，在销售数据的折线图中，如果某段时间内折线的斜率较大，说明销售增长或下降的速度较快；如果斜率较小，则表示变化较为缓慢。

3. 易于比较多组数据

可以在同一图表中绘制多条折线，方便比较不同数据集之间的趋势和变化。这对于分析多个相关变量的关系非常有用。
比如，比较不同产品的销售趋势、不同地区的气温变化等，可以直观地看出它们之间的差异和相似之处。

4. 简洁直观

折线图的结构相对简单，由坐标轴和折线组成，易于理解和解读。不需要过多的装饰和复杂的图形元素，就能传达清晰的信息。
即使对于不具备专业数据分析知识的人来说，也能快速从折线图中获取关键信息。

5. 数据点可识别性

每个数据点在折线上都有明确的位置，可以方便地查看特定时间点或变量值对应的具体数据。
通过在数据点上添加标记或标签，可以进一步增强数据的可识别性，方便用户获取详细信息。

6. 局限性

对于离散数据或数据点较少的情况，折线图可能不太适用。因为折线图是基于连续数据绘制的，如果数据点过于稀疏，折线可能无法准确反映数据的变化。
当数据波动较大时，折线图可能会显得比较杂乱，难以清晰地展示趋势。此时，可以考虑使用其他类型的图表，如柱状图或箱线图来辅助分析。

二、折线图效果与代码实现

1. 常规的折线图

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1,user-scalable=no">
    <title>折线图的绘制</title>
    <script src="echarts.js"></script>
    <!--
    折线图 什么叫做折线图？
    折线图主要是用来展示 随着时间推移的趋势和变化
    -->
</head>
<body>
<div id="root"></div>
<script>
    //初始化
    var my_zhexian = echarts.init(document.getElementById('root'), null, {
        width: 800, height: 600
    });
    //图表内容
    var option = {
        //本章知识点 展示折线图  series 翻译就是一系列
        //常规的话 x轴通常定义类目 种类  y轴定义数值  然后我们趋势的内容也是数值
        //定义坐标
        //定义x轴 x轴的类型 有数值 事件 类目 和对数
        xAxis: {
            type:'category',
            data:["周一","周二","周三","周四","周五","周六","周日"]
        },
        //定义y轴
        yAxis:{
            type:"value"   //定义为值
        },
        series: [
            {//一系列里面的类型 line就是折现
                type: 'line',
                data:[10,20,30,40,50,60,70], //这个数据和上面x轴的数据一一对应
            }
        ]
    };
    //生成图表
    my_zhexian.setOption(option)
</script>
</body>
</html>

2. 带属性的折线图

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1,user-scalable=no">
    <title>图表的常用属性</title>
    <script src="echarts.js"></script>
    <!--
 图表中的常用属性：
    grid 翻译过来是图表  也就是图表属性
    -->
</head>
<body>
<div id="root"></div>
<script>
    //初始化
    var my_zhexian = echarts.init(document.getElementById('root'), null, {
        width: 1800, height: 1000
    });
    var data_yue=["2.1","2.2","2.3","2.4","2.5","2.6","2.15","2.16","2.17","2.18","2.19","2.20","2.21","2.22","2.23","2.24","2.25","2.26","2.27","2.28","2.29"]
    //图表内容
    var option = {
      title: {
            text: '2月1号-2月29号每日等离子产值 共计：9047元'
        },
        xAxis: { //设置x轴
            type:'category',//定义为类型
            data:data_yue , //x轴的类
        },
        yAxis:{ //设置y轴
            type:"value"   //定义为值
        },
        //本章知识点 设置图表属性
        grid:{
            left:"5%",  //默认是百分之10
            // top:"20%", //当然还有right 和bottom
            show: true,  //是否显示直角坐标系网格。  也就是是否显示网格边框
            containLabel:true,  //显示刻度
            shadowBlur: 10,
            shadowOffsetY:30  //阴影的偏移量
        },
        series: [//一系列里面的类型
            {
                type: 'line', //line就是折现
                data:[0,0,0,0,0,0,0,853,140,0,466,822,782,776,834,0,760,872,955,941,846], //这个数据和上面x轴的数据一一对应  //图表中的数据
                label: { //设置柱状图里面的字体
                  show: true,
                  color: 'red',
                  // position: "right", //调整字体的位置
                  fontSize: 15,
                  fontFamily: '幼圆',
                  fontWeight: 'bold',
                  offset: [0, 0],
                  formatter: function (params) { // 设置格式化函数// params 是包含数据信息的对象，例如 params.value 表示当前柱状图的数值
                      // 在这里可以自定义显示格式
                      return params.value + '元'; // 返回数值作为默认格式
                  },
                  valueAnimation: true//实时改变标签 这个属性要设置为true
              },
            }
        ]
    };
    //生成图表
    my_zhexian.setOption(option)
</script>
</body>
</html>

3. 完整属性的折线图

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1,user-scalable=no">
    <title>折线图的详细属性</title>
    <script src="echarts.js"></script>
</head>
<body>
<div id="rootzhexian" style="width: 100%;height: 600px;"></div>
<script>
    var my_zhixian = echarts.init(document.getElementById('rootzhexian'));
    var optionzhexian = {
        // title: { //标题样式   其他样式默认 详细属性调整可查询官方文档 或者笔记
        //     text: '我的折线图'
        // },
        xAxis: { //x轴样式 详细属性查阅官方文档  或者查阅x轴的笔记
            type: 'category',
            data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月'],
            name: '月份',
            axisLine: {   //显示箭头  x轴线的设置
                symbol: ['none', 'arrow']
            },
            axisTick: {  //刻度线朝上
                alignWithLabel: true,
                inside: true  //刻度线朝上
            },
            splitArea: { //坐标轴在grid区域的分割区域
                show: true, //默认在内部轴不显示
                areaStyle: {
                    color: ["red", "yellow"],
                    opacity: 0.2
                }
            },
        },
        yAxis: {
            type:"value",
            show:true,//默认就是显示 当然不想显示 也可以设置为false
            position:'left', //y轴的位置 默认是left
            name:"分数", //y轴的名称
            nameLocation: "end", //名称的位置
            nameTextStyle:{ //名称的样式
                color: "red",
                fontSize:14,
            },
            nameGap:"15", //名称和轴线的距离
            boundaryGap: ['0%', '20%'] , //第一个参数是向下延申 第二个数值是向上延申
            axisLine:{//对于y轴线的设置
                show:true,//默认是false
                symbol: ['none', 'arrow']
            },
            axisTick:{//对于y轴刻度的设置
                show:true
            },
            splitLine:{},// 对于y轴中间分割线的设置
            splitArea: { //坐标轴在grid区域的分割区域
                show: true, //默认在内部轴不显示
                areaStyle: {
                    color: ["pink", "yellow"],
                    opacity: 0.2
                }
            },
        },
        tooltip: {}, //提示框默认样式
        grid: {}, //内部区域全部默认样式
        //定义多条折现
        legend:{ //翻译就是图例  图例的名称和下面折线的名称一一对应
            data:['数据1',"数据2"]
        },
        series: [{
          //本章知识点
            name:'数据1',
            type:'line', //折线图
            data:[3,5,15,20,3,4,8],
            colorBy:'data',//折线拐弯的地方 也就是链接点的取色策略  默认是统一颜色 series
            symbol:"pin",//修改线连接点为矩形
            //'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow', 'none'
            //  圆        矩形     圆角矩形      三角形       菱形        标记（针）   箭头   无
            symbolSize:20,
            // symbolRotate:45,
            //也可以通过回调函数 设置每一个不同的样式
            symbol:function (v,i){
                console.log(v,i)   //v是字 i是每一个的属性对象
            },
            // step:"end", //默认是false  也可以设置成折线 然后修改他们之间的位置  开始中间和结束
            step:false,
            //是否是阶梯线图。可以设置为 true 显示成阶梯线图，
            // 也支持设置成 'start', 'middle', 'end' 分别配置在当前点，当前点与下个点的中间点，下个点拐弯。
            lineStyle:{ //线的样式
                color:"red",
                width:5,
                type:"dotted"
            },
            areaStyle:{  //线覆盖的区域样式
                color:"red",
                opacity:0.3,
                origin:"auto", //这个是标识涂抹区域的位置 默认是auto
            },
            emphasis:{ //折现的高亮状态
                disabled:false,//是否关闭高亮
                scale:true, //拐角放大
            },
            smooth:true,//是否为平滑曲线 把折线变成曲线
        },  //可以增加多条线
            {
                name:"数据2",
                type: "line",
                data:[0,20,3,33,18,28,25]
            }
        ]
        };
        my_zhixian.setOption(optionzhexian);
</script>
</body>
</html>