数据可视化----ECharts---折线图

Posted 云墨-款哥的博客

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了数据可视化----ECharts---折线图相关的知识,希望对你有一定的参考价值。

引言:

ECharts是一款基于javascript的数据可视化图表库,提供直观,生动,可交互,可个性化定制的数据可视化图表。ECharts最初由百度团队开源,并于2018年初捐赠给Apache基金会,成为ASF孵化级项目。

每篇博客都会强调的事情,学习ECharts最直接、最有效的方式就是去看官网,官网上有你想要的一切,官网地址:https://echarts.apache.org/en/index.html

当然了,在下不才,写了几篇拙文,若大家有兴趣的可以瞅一瞅,有帮助的话给个赞,款哥还是会很开心的

标题地址
ECharts初体验传送门
ECharts通用配置传送门
柱状图传送门
ECharts官网传送门

折线图

我们都知道,要想使用echarts来进行数据展示,需要以下五步

步骤1:引入echarts.js文件
步骤2:准备一个呈现图表的盒子(这个盒子要给予宽高)
步骤3:初始化echarts实例对象(这个script标签要记得放在呈现图表的盒子之后,或者window.onload)
步骤4:准备配置项(使用ECharts创建不同的表格,只有配置项会变化,其他代码都是固定)
步骤5:将配置项配置给echarts实例对象
————————————————

基本实现

由于折线图的基础结构搭建方面与柱状图并无太大差别,所以下面我就把一个完整的案例代码贴上

差别在于series中的类型也就是type,柱状图是bar,折线图是line

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>折线图</title>
    <script src="./lib/echarts.min.js"></script>
</head>
<body>
    <div style="width: 600px;height: 400px;"></div>
    <script>
        var oDiv = document.querySelector('div');
        var xDataArr = ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月'],
        yDataArr = [2000,1000,2500,1550,1800,1300,1400,2800,1200,950,1100,2000];
        var mCharts = echarts.init(oDiv);
        var option = {
            type: 'line',
            name: '销量',
            xAxis:{
               type: 'category',
               data: xDataArr
            },
            yAxis:{
               type: 'value'
            },
            series: {
            name: '白象方便面销量',
            type: 'line',
            data: yDataArr

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

对以上代码有疑惑的,可以在文章开始的传送门里去看看之前的几篇文章。

上面的代码在浏览器上运行出来,效果是这样的

风格样式

同样的,折线图也有对应的最大值、最小值,平均值等样式,并且方法也与柱状图一致,这里就不再过多的叙述。
柱状图可以去看数据可视化—ECharts—柱状图

这里主要说一下折线图,不同于柱状图的地方

标记区域(markArea)

在series里面写下这段代码,注意:

  1. markArea的值必须是一个对象
  2. markArea里面有一个属性data,它的值是一个数组
  3. 数组里的两个数组,实际上就是标记区间
  4. 两个对象相当于是X轴坐标
markArea: {
   data: [
      [
         {xAxis:'1月'},
         {xAxis:'2月'}
      ],
      [
         {xAxis:'7月'},
         {xAxis:'10月'}
      ]
  	]
 }

平滑曲线(smooth)

在series里面写下这段代码,这行代码是与markArea,markPoint等平级的

// 是否为平滑的曲线,默认为false
smooth: true,

线的样式(lineStyle)

这里可一去对折线的样式去进行设置,包括虚实线、颜色、粗细等;

lineStyle: {
       color: 'green',
       // dashed 虚线   dotted  点线  solid  实线
        type: 'solid'
 }

填充样式(areaStyle)

在series里写下这行代码

areaStyle: {
     color: 'yellow'
}

这时候在浏览器中是这样的

忘了下面这哥俩了:

缩放,脱离0值比例 scale: true------这个要写在数值轴的配置上
坐标轴两边留白策略,false 不留白
boundaryGap: false---------这个写在类目轴即可

代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>折线图</title>
    <script src="./lib/echarts.min.js"></script>
</head>
<body>
    <div style="width: 600px;height: 400px;"></div>
    <script>
        var oDiv = document.querySelector('div');
        var xDataArr = ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月'],
        // yDataArr = [2000,1000,2500,1550,1800,1300,1400,2800,1200,950,1100,2000];
        yDataArr = [2480,2496,2500,2488,2487,2480,2490,2486,2485,2482,2490,2481];
        var mCharts = echarts.init(oDiv);
        var option = {
            xAxis:{
                type: 'category',
                data: xDataArr,
                //坐标轴两边留白策略,false  不留白
                boundaryGap: false
            },
            yAxis:{
               type: 'value',
                //    boundaryGap: true
                // 缩放,脱离0值比例
                scale: true
            },
            series: {
                name: '白象方便面销量',
                type: 'line',
                data: yDataArr,
                // 最大值,最小值
                markPoint: {
                    data: [
                        {
                            type: 'max',name: '最大值'
                        },
                        {
                            type: 'min',name: '最小值'
                        }
                    ]
                },
                // 平均值
                markLine: {
                    data: [
                        {type: 'average',name: '平均值'}
                    ]
                },
                // 标记区域
                markArea: {
                    data: [
                        [
                            {xAxis:'1月'},
                            {xAxis:'2月'}
                        ],
                        [
                            {xAxis:'7月'},
                            {xAxis:'10月'}
                        ]
                    ]
                },
                // 是否为平滑的曲线
                smooth: true,
                // 线的样式
                lineStyle: {
                    color: 'green',
                    // dashed 虚线   dotted  点线  solid  实线
                    type: 'solid'
                },
                // 填充风格
                areaStyle: {
                    color: 'yellow'
                }
            }
        }
        mCharts.setOption(option)
    </script>
</body>
</html>

堆叠图

其实我们在工作中常用的是一种叫做堆叠图的图表,它其实就是一种变了样的折线图

这里的关键就是在同个类目轴上系列配置相同的stack值

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>堆叠图</title>
    <script src="./lib/echarts.min.js"></script>
</head>
<body>
    <!-- 
        数据堆叠,同个类目轴上系列配置相同的stack值后,后一个系列的值会在前一个系列的值上相加。
     -->
    <div style="width: 600px;height: 400px;"></div>
    <script>
        var oDiv = document.querySelector('div');
        var xDataArr = ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月'],
        yDataArr = [2000,1000,2500,1550,1800,1300,1400,2800,1200,950,1800,2000],
        yDataArr2 = [2480,1496,1500,2400,2480,2680,2490,2000,1500,1600,2000,1200];

        var mCharts = echarts.init(oDiv);
        var option = {
            xAxis:{
               type: 'category',
               data: xDataArr
            },
            yAxis:{
               type: 'value'
            },
            series: [
                {
                    name: '白象方便面销量',
                    type: 'line',
                    data: yDataArr,
                    // 堆叠图主要是靠stack属性,series中每个对象的stack值要保持一直
                    stack: 'all',
                    areaStyle: {}
                },
                {
                    name: '统一方便面销量',
                    type: 'line',
                    data: yDataArr2,
                    stack: 'all',
                    areaStyle: {}
                }
            ]
        }
        mCharts.setOption(option)
    </script>
</body>
</html>

效果就是下面这样

以上是关于数据可视化----ECharts---折线图的主要内容,如果未能解决你的问题,请参考以下文章

数据可视化----ECharts---折线图

一基础折线图详解《手把手教你 ECharts 数据可视化详解》

一基础折线图详解《手把手教你 ECharts 数据可视化详解》

一基础折线图详解《手把手教你 ECharts 数据可视化详解》

二基础平滑面积折线图与折线堆叠面积堆叠《手把手教你 ECharts 数据可视化详解》

二基础平滑面积折线图与折线堆叠面积堆叠《手把手教你 ECharts 数据可视化详解》