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" 用 箭头标明
效果图