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]

    }]

};

---

效果图：