echarts多条折线图

Posted 2020-11-28 cyhsmile

折线图单只比较好配置，但是多只的话，楼主整整难了一下午才搞出来，下面分享下啦

 

 

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("请求失败");
        }

    })