echarts 关系图动线学习

2019独角兽企业重金招聘Python工程师标准>>>

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]]}]

1、坐标轴两边留白策略，类目轴和非类目轴的设置和表现不一样。类目轴中 boundaryGap 可以配置为 true 和 false。默认为 true

2、symbol: "arrow" 用 箭头标明

效果图

转载于:https://my.oschina.net/u/3677751/blog/3031207