echarts折线图Demo

echarts链接：http://echarts.baidu.com/examples/editor.html?c=line-stack

黑底代码：http://gallery.echartsjs.com/editor.html?c=xr0vvAzzNq&v=1

 

option = {
    backgroundColor: 'black',
    tooltip: {
        trigger: 'axis'
    },
    color: ['#f69846', '#00ffb4', '#44aff0', '#f6d54a', '#45dbf7',
        '#ad46f3', '#f845f1', '#ff4343', '#ffa800', '#39E7FB', '#FAC901',
    ],
    legend: {
        icon: "circle", //  这个字段控制形状  类型包括 circle，rect ，roundRect，triangle，diamond，pin，arrow，none
        textStyle: {
            color: 'white',
            fontSize: 18
        },
        data: ['邮件营销', '联盟广告', '视频广告', '直接访问', '搜索引擎']
    },
    grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
    },
    toolbox: { //可视化工具箱
        x: 'center',
        y: '25',
        feature: {
             dataView: { //数据视图
                show: true
            },
            dataZoom: { //数据缩放视图
                show: true
            },
            magicType: { //动态类型切换
                type: ['bar', 'line']
            },
            restore: { //重置
                show: true
            },
            saveAsImage: { //保存图片
                show: true
            }
        },
        iconStyle: {
            normal: {
                color: 'white', //设置图标颜色
                textStyle: {
                    color: 'white',
                    fontSize: 1000
                },
            },
            emphasis: { //字体颜色及位置
                color: 'white',
                textPosition: 'bottom'
            }
        }
    },
    xAxis: {
        type: 'category',
        boundaryGap: false,
        data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
        axisTick: {
            show: false//删除超出正坐标线段
        },
        axisLine: {
            lineStyle: {
                color: 'white',
            }
        },
        axisLabel: {
            show: true,
            textStyle: {
                color: 'white',
                fontSize: 18
            }
        },
    },
    yAxis: {
        type: 'value',
        axisTick: {
            show: false//删除超出正坐标线段
        },
        axisLine: {
            lineStyle: {
                color: 'white',
            }
        },
        axisLabel: {
            textStyle: {
                color: 'white',
                fontSize: 18
            }
        },
        splitLine: { //坐标轴以外的横线颜色
            lineStyle: {
                type:'dashed',//虚线
                color: 'white'
            }
        }
    },
    series: [{
            name: '邮件营销',
            type: 'line',
            stack: '总量',
            data: [120, 132, 101, 134, 90, 230, 210]
        },
        {
            name: '联盟广告',
            type: 'line',
            stack: '总量',
            data: [220, 182, 191, 234, 290, 330, 310]
        },
        {
            name: '视频广告',
            type: 'line',
            stack: '总量',
            data: [150, 232, 201, 154, 190, 330, 410]
        },
        {
            name: '直接访问',
            type: 'line',
            stack: '总量',
            data: [320, 332, 301, 334, 390, 330, 320]
        },
        {
            name: '搜索引擎',
            type: 'line',
            stack: '总量',
            data: [820, 932, 901, 934, 1290, 1330, 1320]
        }
    ]
};

 

白底代码：http://gallery.echartsjs.com/editor.html?c=xmvygFYCqY

option = {
    backgroundColor: 'white',
    tooltip: {
        trigger: 'axis'
    },
    color: ['#f69846', '#00ffb4', '#44aff0', '#f6d54a', '#45dbf7',
        '#ad46f3', '#f845f1', '#ff4343', '#ffa800', '#39E7FB', '#FAC901',
    ],
    legend: {
        icon: "circle", //  这个字段控制形状  类型包括 circle，rect ，roundRect，triangle，diamond，pin，arrow，none
        textStyle: {
            color: 'black',
            fontSize: 18
        },
        data: ['邮件营销', '联盟广告', '视频广告', '直接访问', '搜索引擎']
    },
    grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
    },
    toolbox: { //可视化工具箱
        color: 'white',
        x: 'center',
        y: '25',
        feature: {
            dataView: { //数据视图
                show: true
            },
            dataZoom: { //数据缩放视图
                show: true
            },
            magicType: { //动态类型切换
                type: ['bar', 'line']
            },
            restore: { //重置
                show: true
            },
            saveAsImage: { //保存图片
                show: true
            }
        },
        iconStyle: {
            normal: {
                color: 'white', //设置图标颜色
            },
            emphasis: { //字体颜色及位置
                color: 'black',
                textPosition: 'bottom'
            }
        }
    },
    xAxis: {
        type: 'category',
        axisTick: {
            show: false //删除超出正坐标线段
        },
        boundaryGap: false,
        data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
        axisLine: {
            lineStyle: {
                color: 'black',
            }
        },
        axisLabel: {
            show: true,
            textStyle: {
                color: 'black',
                fontSize: 18
            }
        },
    },
    yAxis: {
        type: 'value',
        axisTick: {
            show: false //删除超出正坐标线段
        },
        axisLine: {
            lineStyle: {
                color: 'black',
            }
        },
        axisLabel: {
            textStyle: {
                color: 'black',
                fontSize: 18
            }
        },
        splitLine: { //坐标轴以外的横线颜色
            lineStyle: {
                type: 'dashed', //虚线
                color: 'black'
            }
        }
    },
    series: [{
            name: '邮件营销',
            type: 'line',
            stack: '总量',
            data: [120, 132, 101, 134, 90, 230, 210]
        },
        {
            name: '联盟广告',
            type: 'line',
            stack: '总量',
            data: [220, 182, 191, 234, 290, 330, 310]
        },
        {
            name: '视频广告',
            type: 'line',
            stack: '总量',
            data: [150, 232, 201, 154, 190, 330, 410]
        },
        {
            name: '直接访问',
            type: 'line',
            stack: '总量',
            data: [320, 332, 301, 334, 390, 330, 320]
        },
        {
            name: '搜索引擎',
            type: 'line',
            stack: '总量',
            data: [820, 932, 901, 934, 1290, 1330, 1320]
        }
    ]
};