视图折线echarts 折线配置项内容和展示

配置项如下
      option = {
    title: {
            text: 'AAA(单位:次)',
            subtext: '',
            x: 'center',
            textStyle: {
                fontSize: 14
            }
        },
    tooltip: {
            trigger: 'axis'
        },
    legend: {
            itemWidth: 26,  // 设置宽度
            itemHeight: 12, // 设置高度
            itemGap: 24, // 设置间距
            y: 'bottom',
            selectedMode: false,
            bottom:40,
            data:['邮件营销','联盟广告','视频广告','直接访问','搜索引擎']
        },
    color: ['#1891FF', '#12C3C3', '#FBCD14', '#F14864', '#8542E1', '#7DA6FF', '#4AC312', '#FB8F14', '#F148E7'],
    grid:{
            top:'40px',
            bottom:'108px'
        },
    toolbox: {
        feature: {
            saveAsImage: {}
        }
    },
    dataZoom: [
            {
                show: true,
                realtime: true,
                start:0,
                endValue:null,
                bottom:35,
                height:12,
                backgroundColor:'#F0F0F0',
                dataBackground:{
                    lineStyle:{
                    color:'#fff'
                    },
                    areaStyle:{
                        color:'#F0F0F0'
                    }
                },
                fillerColor:'#D3D3D3',
                borderColor:'#F0F0F0',
                handleStyle:{
                    opacity:0
                }
              
            },
            {
                type: 'inside',
                realtime: true
            }
        ],
    xAxis: {
        boundaryGap: false,
        type: 'category',
            //刻度线
            axisTick: false,
            axisLine: {
                lineStyle: {
                    color: '#eee'
                }
            },
            axisLabel: {
                color: '#666',
                margin:16
            },
            boundaryGap: false,
            data: ['2019-01-01','2019-01-02','2019-01-03','2019-01-04','2019-01-05','2019-01-06','2019-01-07']
    },
    yAxis: {
        type: 'value',
            splitLine: false,
            //刻度线
            axisTick: false,
            axisLine: {
                // symbol:['none','arrow'],//箭头
                lineStyle: {
                    color: '#eee'
                }
            },
            axisLabel: {
                color: '#666',
                margin:8
            },
            min : 0,
            splitNumber : 4,
            minInterval: 1
    },
    
    series: [
        {
            name:'邮件营销',
            type:'line',
            stack: '总量',
            symbol:'circle',
                symbolSize:6,
            data:[120, 132, 101, 134, 90, 230, 210]
        },
        {
            name:'联盟广告',
            type:'line',
            stack: '总量',
            symbol:'circle',
                symbolSize:6,
            data:[220, 182, 191, 234, 290, 330, 310]
        },
        {
            name:'视频广告',
            type:'line',
            stack: '总量',
            symbol:'circle',
                symbolSize:6,
            data:[150, 232, 201, 154, 190, 330, 410]
        },
        {
            name:'直接访问',
            type:'line',
            stack: '总量',
            symbol:'circle',
                symbolSize:6,
            data:[320, 332, 301, 334, 390, 330, 320]
        },
        {
            name:'搜索引擎',
            type:'line',
            stack: '总量',
            symbol:'circle',
                symbolSize:6,
            data:[820, 932, 901, 934, 1290, 1330, 1320]
        },
        
    ]
};

    
截图如下