echarts折线图详解

一个使用echarts制作折线图的简单案例，常用修改都写在注释里了。如果不需要区域颜色，将其删掉即可。

option = {

    title: {
        text: '堆叠区域图' // 标题栏
    },
    tooltip: { // 提示框
        trigger: 'axis', // 触发类型
        axisPointer: { // 坐标轴指示器配置项
            type: 'cross',
            label: {
                backgroundColor: '#6a7985'
            }
        }
    },
    legend: { // 图例组件
        orient: 'horizontal', // 图例列表的布局朝向
        right: 1, // 图例组件离容器右侧的距离
        textStyle: {
            color: '#6e6e6e', // 字体颜色
            fontWeight: 'normal',
            fontSize: 12
        },
        data: ['邮件营销'] // 和series 中的name对应
    },
    grid: { //  直角坐标系内绘图网格
        left: '3%',
        top: '15%',
        containLabel: true
    },
    xAxis: [{
        type: 'category',
        boundaryGap: false,
        axisLabel: {
            show: true,
            textStyle: {
                color: '#8a94a3' // 坐标字体颜色
            },
            rotate: 20 // 坐标倾斜角度
        },
        axisLine: {
            lineStyle: {
                color: '#bdc7da', // x坐标轴颜色
            }
        },
        data: ['06-22', '06-22', '06-22', '06-22', '06-22', '06-22', '06-22']
    }],
    yAxis: {
        type: 'value',
        axisLine: { //坐标轴线条相关设置(颜色等)
            lineStyle: {
                color: '#babced' // y轴颜色
            }
        },
        axisLabel: {
            formatter: '{value}',
            textStyle: {
                color: '#babced'
            }
        },
        splitLine: {
            lineStyle: {
                color: '#57617B' //分隔线颜色设置
            }
        }
    },
    series: [{
        name: '邮件营销',
        type: 'line',
        symbol: 'circle', //标记的图形
        symbolSize: 10, // 拐点的大小
        label: {
            normal: {
                show: true,
                color: '#4a9eff', // 数字颜色
                position: 'top'
            }
        },
        itemStyle: {
            normal: {
                borderColor: 'red', // 边框颜色
                color: '#fafafa', // 折线上标记点的颜色 和 图例的颜色
                lineStyle: {
                    width: 4, //  折线图的粗细
                    color: '#4a9eff' // 折线的颜色
                }
            }
        },
        areaStyle: {
            normal: {
                type: 'default',
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                    offset: 0,
                    color: '#4a9eff' // 区域颜色
                }, {
                    offset: 1,
                    color: '#4a9eff' // 区域颜色
                }], false)
            }
        },
        data: [820, 932, 901, 934, 1290, 1330, 1320]
    }]

};

效果图如下：