一个手机图表(echarts)折线图的封装

//定义一组颜色值,按顺序取出
var colorGroup = ["#6ca3c4","#76bfa3","#ea8f7a","#499acd","#ba97c9","#98bd76","#e0ab57"];
//获取手机屏幕宽度
var iWidth = document.documentElement.clientWidth;
//封装一个多折线的
var moreBrokenLineOption = function (options) {
    var option = {
        backgroundColor: "#fff",
        title:{
          show:false,
        },
        legend: {
            data: options.legendData,
            left: 20*iWidth/720,
            icon: 'circle',
            bottom: 0*iWidth/720,
            textStyle: {
                fontSize: 16*iWidth/720,
                color: "#91989e",
                fontWeight:"normal",
                fontFamily:"Microsoft Yahei"
            },
        },
        grid: {
            top: 20*iWidth/720,
            left: 80*iWidth/720,
            right: 40*iWidth/720,
            bottom:55*iWidth/720
        },
        xAxis: [
            {
                type: 'category',
                axisTick: {
                    show: false
                },
                axisLine: {
                    lineStyle: {
                        color: "#DFE0E1"
                    }
                },
                axisLabel: {
                    margin:12*iWidth/720,
                    textStyle: {
                        color: '#6f7479',
                        fontSize: 16*iWidth/720,
                        fontWeight:"normal",
                        fontFamily:"Microsoft Yahei"
                    }
                },
                boundaryGap: false,
                data: ""
            }
        ],
        yAxis: [
            {
                type: 'value',
                nameLocation:"start",
                nameTextStyle: {
                    color: '#ccc',
                    fontSize: 16*iWidth/720,
                    fontWeight:"normal",
                    fontFamily:"Microsoft Yahei"
                },
                axisTick: {
                    show: false
                },
                splitLine: {
                    show: false
                },
                axisLine: {
                    lineStyle: {
                        color: "#DFE0E1"
                    }
                },
                axisLabel: {
                    textStyle: {
                        color: '#6f7479',
                        fontSize: 16*iWidth/720,
                        fontWeight:"normal",
                        fontFamily:"Microsoft Yahei"
                    },
                    margin:16*iWidth/720,
                    formatter: function (value, index) {
                        if (options.axisLabelFormatter) {
                            return value + '%';
                        } else {
                            return value;
                        }
                    }
                }
            }
        ],
        series: []
    }
    //重组数据
    option.xAxis[0].data = (function () {
        return options.xAxisData.map(function (item, index) {
            return {
                value: item,
                textStyle: {
                    fontSize: 17*iWidth/720
                }
            }
        })
    })();
    //重组数据option.series
    (function () {
        options.legendData.map(function (item, index) {
            option.series.push({
                name: item,
                type: 'line',
                stack: '总量',
                data: options.seriesData[index],
                symbol: "circle",
                symbolSize: '10',
                //改变折现点的样式
                itemStyle: {
                    normal: {
                        color: colorGroup[index],
                        borderType: "solid",
                        borderWidth: "2",
                        borderColor: "#fff"
                    }
                },
                //折线的颜色
                lineStyle: {
                    normal: {
                        color: colorGroup[index]
                    }
                },
                // label: {
                //     normal: {
                //         show: true,
                //         position: 'top'//显示在里面顶部  用inner  显示外面贴着顶部用top
                //     }
                // },
                areaStyle: {
                    normal: {
                        //背景颜色
                        color: colorGroup[index],
                        //设置透明度
                        opacity:"0.2",
                        lineStyle: {
                            color: colorGroup[index]
                        }
                    }
                }
            })
        })
    })()
    return option;
}

使用方法

var bigCharts = function (options) {
        var mainDom = document.getElementById(options.parentDom);
        var html = '<ul class="header">'
            + '<li class="title">'
            + '<span class="title-title">'+options.title+'</span>'
            + '<sapn class="title-time">'+options.time+'</sapn>'
            + '</li>'
            + '<li class="subtext">'
            + '<span class="subtext-num">'+options.clickNum+'</span>'
            + '<span class="subtext-text">次</span>'
            + '</li>'
            + '</ul>';
        mainDom.innerHTML = html;
        //创建存放图表的dom节点
        var echartDom = document.createElement("div");
        echartDom.id = options.parentDom + "_echart";
        echartDom.className = "big-chart";
        mainDom.appendChild(echartDom);
        echartDom = null;
        var echart = echarts.init(document.getElementById(options.parentDom + "_echart"));
        echart.setOption(moreBrokenLineOption({
            "legendData": options.legendData,
            "xAxisData":options.xAxisData,
            "axisLabelFormatter": options.axisLabelFormatter,
            "seriesData":options.seriesData
        }));
    }

    //第一个大图
    bigCharts({
        "parentDom":"main0",
        "title":"用户访问点击率",
        "time":"2016-12-20至2017-02-20",
        "clickNum":"100",
        "legendData":['活动点击数', '参与人数', '达标人数', '参与中奖人数', '中奖人数'],
        "xAxisData":["10.15", "10.16", "10.17", "10.18", "10.19", "10.20", "10.21"],
        "axisLabelFormatter":false,
        "seriesData":[
            [120, 132, 101, 134, 90, 230, 280],
            [220, 182, 191, 234, 290, 330, 310],
            [150, 232, 201, 154, 190, 330, 410],
            [320, 332, 301, 334, 390, 330, 320],
            [820, 932, 901, 934, 1290, 1330, 1320]
        ]
    });