一个让我很艹蛋的手机报表

摘要：需求如图用实现，代码如下，无注释。指定图表的配置项和数据总量是否平滑显示

需求如图：

用echarts实现，代码如下，无注释。

var myChart = echarts.init(document.getElementById("main"));
    var x = new Array();
    var optionx = new Array();
    var y = new Array();
    for(var i = 0; i < chartData.length; i++){
        for (item in chartData[i]){
            x.push(item);
            y.push(chartData[i][item]);
        }
    }
    for(var i = 0; i < x.length; i++){
        var index1 = x[i].indexOf("-") + 1;
        optionx.push(x[i].substring(index1,x[i].length));
    }
    
    // 指定图表的配置项和数据
    var option = {
        backgroundColor: "#FCFCFC",
        tooltip : {
            backgroundColor: "#17191D",
            trigger: "axis",
            axisPointer: {
                type: "none",
                label: {
                    backgroundColor: "#6a7985"
                }
            },
            formatter: function(params, ticket, callback) {
                return "
"+x[params[0].dataIndex]+"
"+params[0].data+"
";
            }
        },
        grid: {
            top: 0,
            bottom: 36,
            left: -20,
            right: -20
        },
        xAxis :{
            type : "category",
            boundaryGap : false,
            axisLine : {
                show: false,
                lineStyle :{
                    color : "#C6D2DD"
                }
            },
            axisLabel: {
                color : "#666"
            },
            splitLine : {
                show: true,
                lineStyle :{
                    color : "#D7D8DA",
                    type : "dashed"
                }
            },
            axisTick : {
                show: false,
                lineStyle :{
                    color : "#EBEBEB"
                }
            },
            data : optionx
        },
        yAxis : {
            type : "value",
            axisLine :{
                show: false
            },
            axisLabel : {
                show: false
            },
            splitLine : {
                show: false
            },
            axisTick : {
                show: false
            }
        },
        series : [
            {
                type:"line",
                stack: "总量",
                smooth : true,    //是否平滑显示
                symbolSize : 6,
                itemStyle : {
                    color: "#FFD205",
                    borderColor : "#FFD205",
                    borderWidth : 2
                },
                lineStyle : {
                    color : "#FFD205",
                    width : 4
                },
                areaStyle : {
                    color : "#FFF",
                    origin : "end",
                    opacity : 1
                },
                data:y
            }
        ]
    };

    myChart.setOption(option);