ECharts的基本使用（一）：折线图的常见效果【第二日学习笔记】

LOST P

已于 2022-03-27 09:37:53 修改

阅读量1.6k

点赞数

文章标签： html5 echarts

于 2022-03-25 00:07:31 首次发布

本文链接：https://blog.csdn.net/fzy2003/article/details/123725029

版权

折线图的常见效果

折线图的特点：折线图更多的使用来呈现数据随时间的变化趋势

一、.标记

1.最大值\最小值 markPoint

2.平均值 markLine

二、线条控制

1.平滑线条 smooth

2.线条样式 lineStyle

三、紧挨边缘 boundaryGap

boundaryGap 是设置给 x 轴的, 让起点从 x 轴的0坐标开始缩放, 脱离0值比例。如果每一组数据之间相差较少, 且都比0大很多, 那么有可能会出现折线图效果不明显的情况，这显然不是我们想要的效果, 因此可以配置上 scale , 让其摆脱0值比例

四、scale 配置

scale 应该配置给 y 轴

五、堆叠图

堆叠图指的是, 同个类目轴上系列配置相同的 stack 值后，后一个系列的值会在前一个系列的值上
相加
如果在一个图表中有两个或者多个折线图, 在没有使用堆叠配置的时候, 效果
蓝色这条线的y轴起点, 不再是y轴, 而是红色这条线对应的点. 所以相当于蓝色是在红色这条线的基
础之上进行绘制. 基于前一个图表进行堆叠

总体代码实现：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>折线图</title>
  <script src="lib/echarts.min.js"></script>
</head>

<body>
  <div style="width: 600px;height: 400px"></div>
  <script>
    //1. ECharts最基本的代码结构
    //2. x轴数据:['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
    //3. y轴数据:[3000, 2800, 900, 1000, 800, 700, 1400, 1300, 900, 1000, 800, 600]
    //4. 将type的值设置为line
    var mCharts = echarts.init(document.querySelector('div'))
    var xDataArr = ['MON', 'TUE', 'WED', 'THU', 'FRI', 'SAT', 'SUN']
    var yDataArr = [3000, 2800, 3900, 3000, 3800, 3700, 3400]
    var yDataArr2 = [12,2000,35,800,20,1100,13]
    var option = {
      xAxis: {
        type: 'category',
        data: xDataArr,
        boundaryGap:false,//数据紧挨边缘设置
      },
      yAxis: {
        type: 'value',
        //scale:true,//缩放使y轴不从0处开始
      },
      series: [
        {
          name: 'DNS恶意流量监测',
          data: yDataArr,
          type: 'line', // 设置图表类型为 折线图
          stack:'all',
          markPoint:{//设置最大值最小值
            data:[
              {
                type:'max'
            },
              {
                type:'min'
              }
            ]
          },
          markLine:{//设置平均值线
            data:[
              {
                type:'average'
              }
            ]
          },
          markArea:{//设置数据显示区间
            data:[
              [
                {
                  xAxis: 'MON'
                },
                {
                  xAxis: 'TUE'
                }
              ],
              [
                {
                  xAxis: 'FRI'
                },
                {
                  xAxis: 'SAT'
                }
              ]
            ]
          },
          smooth: true,//折线图圆润化开关
          lineStyle:{
            color:'green',
            type:'dashed',//dotted点线、solid实线
          },
          areaStyle:{//颜色填充
            color:'orange',
          }
        },
        //折线图堆叠效果:插入新数组即可
        {
          type:'line',
          data:yDataArr2,
          stack:'all',//将两个series的stack设置成相同的值，则两图线间相差为绝对值效果
        }
      ]
    }
    mCharts.setOption(option)
  </script>
</body>

</html>

LOST P

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
ECharts的基本使用（一）：折线图的常见效果【第二日学习笔记】

折线图的常见效果折线图的特点：折线图更多的使用来呈现数据随时间的变化趋势一、.标记1.最大值\最小值 markPoint2.平均值 markLine二、线条控制1.平滑线条 smooth2.线条样式 lineStyle三、紧挨边缘 boundaryGapboundaryGap 是设置给 x 轴的, 让起点从 x 轴的0坐标开始缩放, 脱离0值比例。如果每一组数据之间相差较少, 且都比0大很多, 那么有可能会出现折线图效果不明显的情况，这显然不是我们想要的效果, 因此可以配置上 scale
复制链接

扫一扫