使用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="line" style="width: 450px;height: 325px;">
</div>

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

/**
     * 画折线图
     * @param container 容器
     * @param titleName 标题
     * @param xData x轴数据
     * @param seriesName 图表名称
     * @param seriesData 图表数据
     */
    function drawLine(container, titleName, xData, seriesName, seriesData) {
        var myChart = echarts.init(document.getElementById(container));
        myOption = {
            color : [ '#6a7985' ],
            //标题样式
            title : {
                text : titleName,
                textStyle : {
                    color : 'white',
                },
                left : 'center'
            },
            //菜单
            legend : {
                show : false
            },
            //提示框
            tooltip : {
                trigger : 'axis',
                position : 'top',
                axisPointer : {
                    type : 'cross',
                    label : {
                        backgroundColor : '#6a7985'
                    }
                }
            },
            //图形位置
            grid : {
                left : '4%',
                right : '6%',
                bottom : '4%',
                top : 80,
                containLabel : true
            },
            //x轴
            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
            } ],
            //y轴
            yAxis : [ {
                type : 'value',
                //y轴字体设置
                axisLabel : {
                    show : true,
                    color : 'white',
                    fontSize : 12
                },
                //y轴线设置不显示
                axisLine : {
                    show : false
                },
                //与x轴平行的线样式
                splitLine : {
                    show : true,
                    lineStyle : {
                        color : '#17273B',
                        width : 1,
                        type : 'solid',
                    }
                }
            } ],
            series : [ {
                name : seriesName,
                type : 'line',
                //折线平滑
                smooth : true,
                symbol : 'circle',
                symbolSize : 6,
                //线条样式
                lineStyle : {
                    color : {
                        type : 'linear',
                        x : 0,
                        y : 0,
                        x2 : 0,
                        y2 : 1,
                        colorStops : [ {
                            offset : 0,
                            // 0% 处的颜色
                            color : '#6ae6dd'
                        }, {
                            offset : 1,
                            // 100% 处的颜色
                            color : 'red'
                        } ],
                        globalCoord : false
                    },
                    width : 2,
                    type : 'solid',
                },
                //折线连接点样式
                itemStyle : {
                    color : '#00E5DE'
                },
                //折线堆积区域样式
                areaStyle : {
                    color : '#004c5E'
                },
                data : seriesData
            } ]
        };
        myChart.setOption(myOption);
    }

4.调用方法，传递参数

drawLine('line', '年卡销售额', [ '一季度', '二季度', '三季度', '四季度' ], '销售额', [ 120, 232, 471, 83 ]);

5.划重点

• 在定义的方法中，一些需要动态变化展示的样式、数据等定义成了方法的参数，可以根据不同的展示需求传递不同的参数，其它的样式根据页面风格已经写成固定样式。
• 固定样式只是api中的一部分，如果还想图表展示的更丰富、更动态化，可以参考官方api，配置方式大同小异。

6.上图

折线图.png