/*
title: Line with Marklines
titleCN: 折线图的标记线
category: line
difficulty: 6
*/

var markLine = [];
var positions = [
    'start', 'middle', 'end',
    'insideStart', 'insideStartTop', 'insideStartBottom',
    'insideMiddle', 'insideMiddleTop', 'insideMiddleBottom',
    'insideEnd', 'insideEndTop', 'insideEndBottom'
];
for (var i = 0; i < positions.length; ++i) {
    markLine.push({
        name: positions[i],
        yAxis: 1.8 - 0.2 * Math.floor(i / 3),
        label: {
            formatter: '{b}',
            position: positions[i]
        }
    });

    if (positions[i] !== 'middle') {
        const name = positions[i] === 'insideMiddle'
            ? 'insideMiddle / middle'
            : positions[i];

        markLine.push([{
            name: 'start: ' + positions[i],
            coord: [0, 0.3],
            label: {
                formatter: name,
                position: positions[i]
            }
        }, {
            name: 'end: ' + positions[i],
            coord: [3, 1]
        }]);
    }
}

var option = {
    animation: false,
    textStyle: {
        fontSize: 14
    },
    xAxis: {
        data: ['A', 'B', 'C', 'D', 'E'],
        boundaryGap: true,
        splitArea: {
            show: true
        }
    },
    yAxis: {
        max: 2
    },
    series: [{
        name: 'line',
        type: 'line',
        stack: 'all',
        symbolSize: 6,
        data: [0.3, 1.4, 1.2, 1, 0.6],
        markLine: {
            data: markLine,
            label: {
                distance: [20, 8]
            }
        }
    }],
    grid: {
        top: 30,
        left: 60,
        right: 60,
        bottom: 40
    }
};