echarts3 graph java_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]]}]

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

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

效果图