echarts多條折線圖

折線圖單只比較好配置，但是多只的話，樓主整整難了一下午才搞出來，下面分享下啦

 

 

var myChart = echarts.init(document.getElementById('series-chart'));
// 指定圖表的配置項和數據
var option = {
    baseOption: {
        //圖表配置標題
        title: {
            text: '銷量',
            textStyle: {
                fontSize: 12,
                fontWeight: 400,
                color: '#000000'
            },
            left: 5,
            top: -5,

        },
        //配置提示信息
        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圖例也需要動態獲取
        },
        grid: {
            top: 60,
            left: 55,
            right: 75,

        },
      //dataZoom 是控制下方的滑動條的，不需要的可以不用配置。沒有截
       圖出來
        dataZoom: [{ //Y軸固定,讓內容滾動
                type: 'slider',
                show: false,
                xAxisIndex: [0],
                start: 1,
                end: 50, //設置X軸刻度之間的間隔(根據數據量來調整)
                zoomLock: true, //鎖定區域禁止縮放(鼠標滾動會縮放,所以禁止)
            },
            {
                type: 'inside',
                xAxisIndex: [0],
                start: 1,
                end: 50,
                zoomLock: true, //鎖定區域禁止縮放
            }, {
                start: 0,
                end: 10,
                showDetail: false,
                left: "center", //組件離容器左側的距離,'left', 'center', 'right','20%'
                right: "auto", //組件離容器右側的距離,'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' // 0% 處的顏色
                        }, {
                            offset: 1,
                            color: '#ea6100' // 100% 處的顏色
                        }],
                        global: false // 缺省為 false
                    },
                    shadowBlur: 3,
                    shadowColor: 'rgba(0, 0, 0, 0.6)',
                    shadowOffsetX: 1,
                    shadowOffsetY: 1
                }
            }

        ],
        //x軸   
        xAxis: {
            name: '時間', // 給X軸加單位
            nameLocation: 'end', //時間出現的位置
            type: 'category',
            //x軸文字配置
            axisLabel: {
                show: true,
                inside: false,
                align: 'left',
                // margin: 4,
                textStyle: {
                    color: '#1a1a1a',
                    fontSize: '10'
                }
            },
            axisTick: {
                show: false
            }, //去掉x軸刻度線
            data: [],
            axisLine: {
                show: false,
                length: 3,
            }
        },
        //y軸
        yAxis: {
            axisLabel: {
                show: true,
                textStyle: {
                    color: '#1a1a1a',
                    fontSize: '10'
                }
            },
            axisLine: {
                show: false //y軸刻度線不顯示
            }

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

    }

};
// 使用剛指定的配置項和數據顯示圖表。 -->
myChart.setOption(option);

下面接口處理的

$.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 = []; //設置圖例文字
            for (var i = 0; i < item.data.length; i++) {
                var obj = new Object();
                obj.name = item.data[i].name;
                legend[i] = obj;
            }
            console.log(legend);
            var name = []; //設置圖標每條線名稱
            for (var i = 0; i < item.data.length; i++) {
                var obj = 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);
            //折線圖數據  需要重新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 = "";
            // 柱狀圖 需要倒序數組
            myChart.setOption({
                xAxis: {
                    data: monthData.reverse()
                },
                legend: {
                    data: legend
                },
                series: s_data 

            });
        },
        error: function () {
            console.log("請求失敗");
        }

    })