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