使用echarts画双折线图

前言：
echarts是百度出品一款报表插件，图表展示十分的丰富，在我们的开发中使用也比较广泛，但是官方的样例都是十分简单的，好在他们的api文档提供了特别多的配置项，这就为我们画更丰富的图表提供了可能性。
使用echarts遇到过的坑：

• 一定要给图表容器添加宽度与高度。
• 图表在容器中可以调整位置，让图表显示的更完整。

今日分享重点：画双折线图。
1.引入相关js

<script type="text/javascript" src="../js/jquery-2.1.1.js"></script>
<script type="text/javascript" src="../echarts-4.2.0/echarts.min.js"></script>

2.确定容器

<div id="doubleLine" style="width: 450px;height: 325px;">
</div>

3.定义画折线图是方法，配置图表参数

    /**
     * 画双折线图
     * @param container 容器
     * @param titleName 标题
     * @param xData x轴数据
     * @param seriesNameOne 第一条折线图表名称
     * @param seriesDataOne 第一条折线图表数据
     * @param seriesNameTwo 第二条折线图表名称
     * @param seriesDataTwo 第二条折线图表数据
     */
    function drawDoubleLine(container, titleName, xData, seriesNameOne, seriesDataOne, seriesNameTwo, seriesDataTwo) {
        var doubleLine = echarts.init(document.getElementById(container));
        doubleLineOption = {
            tooltip : {
                trigger : 'axis',
                //指示器
                axisPointer : {
                    type : 'line',
                    lineStyle : {
                        color:'#7171C6'
                    }
                }
            },
            //标题样式
            title : {
                text : titleName,
                textStyle : {
                    color : 'white',
                },
                left : 'center'
            },
            //图形位置
            grid : {
                left : '4%',
                right : '6%',
                bottom : '4%',
                top : 50,
                containLabel : true
            },
            xAxis : [ {
                type : 'category',
                //x轴坐标点开始与结束点位置都不在最边缘
                boundaryGap : true,
                axisLine : {
                    show : true,
                    //x轴线样式
                    lineStyle : {
                        color : '#17273B',
                        width : 1,
                        type : 'solid'
                    }
                },
                //x轴字体设置
                axisLabel : {
                    show : true,
                    fontSize : 12,
                    color : 'white'
                },
                data : xData
            } ],
            yAxis : [ {
                type : 'value',
                //y轴字体设置
                axisLabel : {
                    show : true,
                    color : 'white',
                    fontSize : 12,
                    formatter : function(value) {
                        if (value >= 1000) {
                            value = value / 1000 + 'k';
                        }
                        return value;
                    }
                },
                //y轴线设置显示
                axisLine : {
                    show : true
                },
                //与x轴平行的线样式
                splitLine : {
                    show : true,
                    lineStyle : {
                        color : '#17273B',
                        width : 1,
                        type : 'solid',
                    }
                }
            } ],
            series : [ {
                name : seriesNameOne,
                type : 'line',
                smooth: true,
                lineStyle : {
                    color : {
                        type : 'linear',
                        x : 0,
                        y : 0,
                        x2 : 0,
                        y2 : 1,
                        colorStops : [ {
                            offset : 0,
                            color : '#00F2B1' // 0% 处的颜色
                        }, {
                            offset : 1,
                            color : '#00F2B1' // 100% 处的颜色
                        } ],
                        globalCoord : false
                    },
                    width : 2,
                    type : 'solid',
                },
                //折线连接点样式
                itemStyle : {
                    color : '#00E5DE'
                },
                //折线堆积区域样式
                areaStyle : {
                    color : '#004c5E'
                },
                data : seriesDataOne
            }, {
                name : seriesNameTwo,
                type : 'line',
                smooth: true,
                lineStyle : {
                    color : {
                        type : 'linear',
                        x : 0,
                        y : 0,
                        x2 : 0,
                        y2 : 1,
                        colorStops : [ {
                            offset : 0,
                            color : '#0AB2F9' // 0% 处的颜色
                        }, {
                            offset : 1,
                            color : '#0AB2F9' // 100% 处的颜色
                        } ],
                        globalCoord : false
                    },
                    width : 2,
                    type : 'solid',
                },
                //折线连接点样式
                itemStyle : {
                    color : '#00E5DE'
                },
                //折线堆积区域样式
                areaStyle : {
                    color : '#004c5E'
                },
                data : seriesDataTwo
            } ]
        };
        doubleLine.setOption(doubleLineOption);
    }

4.调用方法，传递参数

drawDoubleLine('doubleLine', '年卡销售额', [ '一季度', '二季度', '三季度', '四季度' ], '去年销售额', [ 2120, 4232, 4471, 983 ], '今年销售额', [ 3190, 4292, 5491, 1083 ]);

5.划重点

• 画双折线图与单折线图其实非常相似，各种配置、语法都一样，唯一的区别在于双折线图是两组数据。
• 在定义的方法中，一些需要动态变化展示的样式、数据等定义成了方法的参数，可以根据不同的展示需求传递不同的参数，其它的样式根据页面风格已经写成固定样式。
• 固定样式只是api中的一部分，如果还想图表展示的更丰富、更动态化，可以参考官方api，配置方式大同小异。

6.上图

双折线图.png