echarts之折线图

折线图

图表类型 :

   在series下设置 type:line

<!DOCTYPE html>
<html lang="en">
<head>
  <script src="js/echarts.min.js"></script>
</head>
<body>
<div style="width: 600px;height:400px"></div>

<script> 
var xDataArr = ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'];
var yDataArr = [3000, 2800, 900, 1000, 800, 700, 1400, 1300, 900, 1000, 800, 600];

var mCharts = echarts.init(document.querySelector("div"))

var option = {
        xAxis: {type: 'category', data: xDataArr},
        yAxis: {type: 'value'},
        series: [{type: 'line', data: yDataArr}]
    }

mCharts.setOption(option) </script>
</body>
</html>

效果图

常见效果

标记: 最大值最小值 markPoint

var option = {
      ......
        series: [ // 系列列表。每一个系列通过type决定自己的图标类型
            {
                markpoint: {
                    data: [
                        {
                            type: 'max'
                        }, {
                            type: 'min'
                        }
                    ]
                }
            }
        ]
    }

平均值 markLine

var option = {
.........
        series: [ // 系列列表。每一个系列通过type决定自己的图标类型
            {
                markLine: {
                    data: [
                        {
                            type: 'average'
                        }
                    ]
                }
            }
        ]
    }

标注区间 markArea

var option = {
       
        series: [ // 系列列表。每一个系列通过type决定自己的图标类型
            {
              .......
                markArea: {
                    data: [
                        [
                            {xAxis: '1月'}, {xAxis: '2月'}
                        ], [
                            {xAxis: '7月'}, {xAxis: '8月'}
                        ]
                    ]
                }
            }
        ]
    }

线条控制
平滑线条：smooth

var option = {
        series: [ // 系列列表。每一个系列通过type决定自己的图标类型
            {
                ......
                //折线，曲线
                smooth:true,
               
            }
        ]
    }

线条样式：lineStyle

var option = {
        series: [ // 系列列表。每一个系列通过type决定自己的图标类型
            {
     ......
                lineStyle:{
                    color:'green',
                    type:'dotted' // dashed、dotted、solid
                }
            }
        ]
    }

填充风格
areaStyle

var option = {
        series: [ // 系列列表。每一个系列通过type决定自己的图标类型
            {
     ......
                name: '康师傅',
                type: 'line', //图标的类型
               
                //填充效果
                areaStyle:{
                    color:'red'
                }
            }
        ]
    }

紧挨边缘
boundaryGap
boundaryGap 是设置给 x 轴的, 让起点从 x 轴的0坐标开始

var option = {
        series: [ // 系列列表。每一个系列通过type决定自己的图标类型
            {
     ......
            xAxis: { //直角坐标系中的x轴
            type: 'category', //类目轴
            data: xArrData,
            boundaryGap:false
        },
            }
        ]
    }

缩放, 脱离0值比例
scale
如果每一组数据之间相差较少, 且都比0大很多, 那么有可能会出现这种情况

var option = {
        series: [ // 系列列表。每一个系列通过type决定自己的图标类型
            {
     ......
           yAxis: {//直角坐标系中的y轴
            type: 'value', //数值轴
            scale:true
              },
            }
        ]
    }

堆叠图 stack
堆叠图指的是, 同个类目轴上系列配置相同的 stack 值后，后一个系列的值会在前一个系列的值上
相加
如果在一个图表中有两个或者多个折线图, 在没有使用堆叠配置的时候, 效果如下:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>柱状图</title>
  <!--  1。引入echart.js文件-->
  <script src="lib/echarts.min.js"></script>
</head>
<body>
<div style="height: 600px;width: 600px">

</div>
<script>

    //3。初始化echarts实力对象
    var mCharts = echarts.init(document.querySelector('div'));
    var xArrData = ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'];
    var yArrData1 = [3000, 2800, 900, 1000, 800, 700, 1400, 1300, 900, 1000, 800, 600];
    var yArrData2 = [30000, 28000, 9000, 10000, 8000, 7000, 14000, 13000, 9000, 10000, 800, 600];

    //4。准备配置项
    var option = {
        title: {
            text: '方便面',
            textStyle: {
                color: 'red'
            }
        },
        //紧挨边缘
        xAxis: { //直角坐标系中的x轴
            type: 'category', //类目轴
            data: xArrData,
            boundaryGap:false
        },
        yAxis: {//直角坐标系中的y轴
            type: 'value', //数值轴
            scale:true 
        },
        series: [ // 系列列表。每一个系列通过type决定自己的图标类型
            {
                name: '康师傅',
                type: 'line', //图标的类型
                //折线，曲线
                smooth:true,
                stack:'all',
                areaStyle:{},
                //线条样式
                lineStyle:{
                    color:'green',
                    type:'dotted' // dashed、dotted、solid
                },
                //填充效果
                areaStyle:{
                    color:'red'
                },

                markpoint: {
                    data: [
                        {
                            type: 'max'
                        }, {
                            type: 'min'
                        }
                    ]
                },
                markLine: {
                    data: [
                        {
                            type: 'average'
                        }
                    ]
                },
                markArea: {
                    data: [
                        [
                            {xAxis: '1月'}, {xAxis: '2月'}
                        ], [
                            {xAxis: '7月'}, {xAxis: '8月'}
                        ]
                    ]
                },
                data: yArrData1
            },{
                name: '统一',
                type: 'line', //图标的类型
                //折线，曲线
                smooth:true,
                stack:'all',
                areaStyle:{},
                //线条样式
                lineStyle:{
                    color:'green',
                    type:'dotted' // dashed、dotted、solid
                },
                //填充效果
                areaStyle:{
                    color:'red'
                },

                markpoint: {
                    data: [
                        {
                            type: 'max'
                        }, {
                            type: 'min'
                        }
                    ]
                },
                markLine: {
                    data: [
                        {
                            type: 'average'
                        }
                    ]
                },
                markArea: {
                    data: [
                        [
                            {xAxis: '1月'}, {xAxis: '2月'}
                        ], [
                            {xAxis: '7月'}, {xAxis: '8月'}
                        ]
                    ]
                },
                data: yArrData2
            }
        ]
    }

    //5。将配置项设置给echarts实例对象
    mCharts.setOption(option);
</script>
</body>
</html>

蓝色这条线的y轴起点, 不再是y轴, 而是红色这条线对应的点. 所以相当于蓝色是在红色这条线的基
础之上进行绘制. 基于前一个图表进行堆叠

总结：
折线图更多的使用来呈现数据随时间的『变化趋势』

posted @ 2022-08-04 01:31 King-DA 阅读(2248) 评论(0) 收藏举报

刷新页面返回顶部

King-D

king-d

echarts之折线图

折线图

图表类型 :

常见效果