echarts 關係圖動線學習

var line_direction_option = {
    grid: {
        left: '4%',
        right: '4%',
        bottom: '4%',
        top: '4%'
    },
    xAxis: {
        type: 'value',
        boundaryGap: false,
        show: false
    },
    yAxis: {
        type: 'value',
        show: false
    },
    series: [{
        type: 'graph',
        layout: 'none',
        coordinateSystem: 'cartesian2d',
        symbolSize: 20,
        label: {
            normal: {
                show: true
            }
        },
        itemStyle: {
            normal: {
                color: '#777777'
            }
        },
        data: []
    },
        {
            type: 'lines',
            symbol: ['none', 'none'],
            symbolSize: 10,
            coordinateSystem: 'cartesian2d',
            label: {
                show: true,
                position: 'middle'
            },
            lineStyle: {
                normal: {
                    color: '#777777',
                    width: 1,
                    opacity: 1,
                    curveness: -0.1
                }
            },
            effect: {
                show: true,
                smooth: false,
                trailLength: 0,
                symbol: "arrow",
                color: '#777777',
                symbolSize: 10
            },
            data: []
        }
    ]
};

function init_point_line_graph(id, points, lines) {
    var line_directionChart = echarts.init(document.getElementById(id));
    var option = JSON.parse(JSON.stringify(line_direction_option));
    option.series[0].data = points;
    option.series[1].data = lines;
    line_directionChart.setOption(option);
    return line_directionChart;
}

調用

init_point_line_graph('line_direction_chart', data.data.points, data.data.lines);

數據格式

point  ：    [{"name":"1","value":[20,76]},{"name":"2","value":[44,12]}]

line :         [{"name":"1-2","coords":[[20,76],[44,12]]},{"name":"2-1","coords":[[44,12],[20,76]]}]

一、座標軸兩邊留白策略，類目軸和非類目軸的設置和表現不同。類目軸中 boundaryGap 能夠配置爲 true 和 false。默認爲 true

二、symbol: "arrow" 用 箭頭標明

效果圖