我已经在电子图表中创建了图表。它有两个垂直条,上面有两条线。我需要将符号放置在条和线的交点处。它应该像图片中的第一个图表
但是在我的图表中,符号位置位于x轴值上。请参考第二张图表。有没有办法改变符号的位置。
您可以通过在每个数据系列中散布null或空白值来使条形和线形符号对齐。这是一个示例选项:
option = {
xAxis: [
{
// true axis for all bar and line series
type: 'category',
show: false,
data: [1,1,2,2,3,3,4,4,5,5]
},
{
// axis used for display; not associated with any series
type: 'category',
show: true,
position: 'bottom',
data: [1,2,3,4,5]
}
],
yAxis: {
type: 'value'
},
series: [{
type: 'bar',
// xAxisIndex associates the series with the first (real) x-axis; may not be strictly necessary, but included for clarity
xAxisIndex: 0,
itemStyle: {
barBorderRadius: 12
},
color: '#1ab7c8',
// barGap is used to center the bar over the x-axis value, in line with the line symbol
barGap: '-100%',
barWidth: 32,
data: [50, '-', 40, '-', 55, '-', 65, '-', 50]
},
{
type: 'bar',
xAxisIndex: 0,
itemStyle: {
barBorderRadius: 12
},
color: '#fa6176',
barWidth: 32,
data: ['-', 50, '-', 40, '-', 64, '-', 25, '-', 50]
},
{
type: 'line',
xAxisIndex: 0,
color: '#1ab7c8',
symbolSize: 16,
// connectNulls is used to connect lines across the blank values
connectNulls: true,
data: [53, '-', 52, '-', 79, '-', 68, '-', 79]
},
{
type: 'line',
xAxisIndex: 0,
color: '#fa6176',
symbolSize: 16,
connectNulls: true,
data: ['-', 53, '-', 55, '-', 75, '-', 90, '-', 75]
}
]
};
这里是image of the rendered chart。
这里是一些有关echarts图表配置选项的文档链接: