echarts 折线配置项内容和展示

      app.title = '柱状图框选';


var metrics = {
    xAxis: ['2016-05', '2016-06', '2016-07', '2016-08', '2016-09', '2016-10'],
    yAxis: [
        {
            color: 'rgb(21, 148, 242)',
            label: '消费趋势',
            value: [300, 500, 200, 600, 200, 300]
        }
    ]
}


function gen_options(metrics) {  // eslint-disable-line
    const series = metrics.yAxis.map(item => {
        return {
            name: item.label,
            type: 'line',
            itemStyle: {
                normal: {
                    color: item.color
                }
            },
            areaStyle: {
                normal: {
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                        offset: 0,
                        color: 'rgb(185, 221, 251)'
                    }, {
                        offset: 1,
                        color: 'rgb(255, 255, 255)'
                    }])
                }
            },
            data: item.value
        };
    });

    const option = {
        tooltip: {
            trigger: 'axis',
            position(pt) {
                return [pt[0], '10%'];
            }
        },
        grid: {
            show: true,
            top: 0,
            left: 0,
            bottom: 20,
            right: 0
        },
        xAxis: {
            type: 'category',
            axisLine: {
                show: false
            },
            axisTick: {
                show: false
            },
            axisLabel: {
                textStyle: {
                    color: 'rgb(153, 153, 153)'
                }
            },
            data: metrics.xAxis
        },
        yAxis: {
            type: 'value',
            axisLine: {
                show: false
            },
            axisTick: {
                show: false
            },
            axisLabel: {
                show: false
            },
            splitLine: {
                show: true,
                lineStyle: {
                    color: ['rgb(240, 240, 240)']
                }
            }
        },
        series
    };

    return option;
}

option = gen_options(metrics);