a plurality of line charts echarts

Single line chart configuration is better, but more than just words, the landlord whole afternoon was a difficult engage them, share with friends the following

 

 

var myChart = echarts.init (document.getElementById ( 'Series-Chart' ));
 // the specified data and the chart CI 
var Option = {
    baseOption: {
        // chart configuration title 
        title: {
            text: 'sales' ,
            textStyle: {
                fontSize: 12,
                fontWeight: 400,
                color: '#000000'
            },
            left: 5,
            top: -5,

        },
        // configuration message 
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'shadow'
            }
        },
        color: ['#FA660A', '#0E76E4', '#8923F1', '#FF0000', "#339966"],
        legend: {
            show: true,
            right: '15%',
            top: 12,
            width:300,
            height:100,
            icon: 'rect',
            itemWidth: 10,
            itemHeight: 4,
            textStyle: {
                color: '#1a1a1a',
                fontSize: 12,
            },
            data: [],
         // Legend Legend also need to dynamically obtain 
        },
        grid: {
            top: 60,
            left: 55,
            right: 75,

        },
      // dataZoom is below the slider control, unwanted, you can not configure. No cut 
       figure it out
        dataZoom: [{ // the Y-axis is fixed, so that the contents of the scroll 
                type: 'Slider' ,
                show: false,
                xAxisIndex: [0],
                start: 1,
                End: 50, // set the interval (to adjust the amount of data) between the X-axis scale 
                zoomLock: to true , // locking prohibited area zoom (zoom mouse will scroll, is prohibited) 
            },
            {
                type: 'inside',
                xAxisIndex: [0],
                start: 1,
                end: 50,
                zoomLock: to true , // locking prohibited area zoom 
            }, {
                start: 0,
                end: 10,
                showDetail: false,
                left: "Center", // assembly away from the left side of the container, 'left', 'Center', 'right', '% 20 is' 
                right: "Auto", // assembly distance on the right side of the container, '20 % ' 
                bottom: ". 8%" ,
                height: 8,
                dataBackground: {
                    lineStyle: {
                        width: 0.5,
                        height: 0.5,
                        color: '#cccccc',
                        type: 'solid',
                    },
                },
                fillerColor: '#ea6100',
                handleIcon: 'M10.7,11.9v-1.3H9.3v1.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4v1.3h1.3v-1.3c4.9- 0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z ' ,
                handleSize: '50%',
                handleStyle: {
                    color: {
                        type: 'linear',
                        x: 0,
                        y: 0 ,
                        x2: 0,
                        Y2: 1 ,
                        colorStops: [{
                            offset: 0,
                            Color: '# FA660A' // color at a 0% 
                        }, {
                            offset: 1,
                            Color: '# ea6100' // color at 100% 
                        }],
                        , Ltd. Free Join: false  // default is false 
                    },
                    shadowBlur: 3,
                    shadowColor: 'rgba(0, 0, 0, 0.6)',
                    shadowOffsetX: 1,
                    shadowOffsetY: 1
                }
            }

        ],
        // X-axis    
        xAxis: {
            name: 'time', // to the X-axis plus Unit 
            nameLocation: 'End', // the position of the time occurs 
            type: 'category' ,
             // X-axis text configuration 
            axisLabel: {
                show: true,
                inside: false,
                align: 'left',
                // margin: 4,
                textStyle: {
                    color: '#1a1a1a',
                    fontSize: '10'
                }
            },
            axisTick: {
                Show: to false 
            }, // remove the x-axis tick 
            data: [],
            axisLine: {
                show: false,
                length: 3,
            }
        },
        // Y axis 
        yAxis: {
            axisLabel: {
                show: true,
                textStyle: {
                    color: '#1a1a1a',
                    fontSize: '10'
                }
            },
            axisLine: {
                Show: to false  // Y-axis scale line is not displayed 
            }

        },
        series: {
            type: "line",
            name: "",
            data: [],
        },

    }

};
// use just the specified configuration items and data charts. -> 
myChart.setOption (the Option);

The following interfaces processing

$.ajax({
        type: "get",
        url: "http://59.108.98.169/salesSearch/?stype =3&startDate=" + startDate + "&endDate=" + endDate + "&brandGroup=" + brandGroup + "&vendorGroup=" + groupGroup + "&seriesGroup=" + seriesGroup,
        dataType: "jsonp",
        success: function (json) {
            console.log(json);
           
            // x轴月份
            var monthData = [];
            for (var i = 0; i < item.month_data.length; i++) {
                var obj = new Object();
                obj = item.month_data[i];
                var month = obj.substring(5, 7);
                monthData[i] = month;
            }
            console.log(monthData);
            var Legend = []; // the legend text 
            for ( var I = 0; I <item.data.length; I ++ ) {
                 var obj = new new Object ();
                obj.name = item.data[i].name;
                legend[i] = obj;
            }
            console.log(legend);
            var name = []; // Set the name of each line icon 
            for ( var I = 0; I <item.data.length; I ++ ) {
                 var obj = new new Object ();
                obj.name = item.data[i].name;
                name[i] = obj;
            }
            console.log(name);
            //销量
            var saleData = [];
            for (var i = 0; i < item.data.length; i++) {
                var obj = new Object();
                obj.sales_data = item.data[i].sales_data;
                saleData[i] = obj;
            }
            console.log(saleData);
            console.log(item.data);
            // polyline map data re Push 
            var S_DATA = [];
             for ( var J = 0; J <item.data.length; J ++ ) {
                s_temp = {
                    name: item.data[j].name,
                    type: "line",
                    symbol: 'none',
                    data: item.data[j].sales_data
                };
                s_data.push(s_temp)

            }
            var srtHtml = "" ;
             // histogram array need descending 
            myChart.setOption ({
                xAxis: {
                    data: monthData.reverse()
                },
                legend: {
                    data: legend
                },
                series: s_data 

            });
        },
        error: function () {
            the console.log ( "request failed" );
        }

    })