charts - 使用 echarts 调整折线图系列符号的位置
问题描述
我在 E-Chart 中创建了图表。它有两个垂直条,上面有两条线。我需要将符号放在条和线的交叉处。它应该像图片中的第一个图表
但在我的图表中,符号位置位于 xaxis 值上。请参阅第二张图表。有没有办法改变符号的位置。
解决方案
您可以通过在每个数据系列中散布空值或空白值来对齐条形和线条符号。这是一个示例选项:
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]
}
]
};
这是渲染图表的图像。
以下是一些相关 echarts 图表配置选项的文档链接:
推荐阅读
- swift - SwiftUI Form with Picker - NavigationView 创建额外的返回功能
- sd-card - 无法擦除 SD 卡
- javascript - Salesforce - 悬停在禁用的标准闪电按钮上时显示悬停文本
- vba - 文档文件中的宏如何工作?
- python-3.x - 创建一个函数,该函数根据数据框中其他列的值创建一个新列
- c++ - 在处理套接字时,C/C++ 中的 Python ASCII 编码字节字符串的等价物是什么?
- html - 我如何在两条不同的线路上制作单选框
- php - 在 CentOS 6 上将 PHP 从 7.1 升级到 7.3 / 7.4
- node.js - Electron:无法打开 X 显示 - 错误:browser_main_loop.cc(1400) - futex 工具返回了意外的错误代码
- xaml - package.appxfragment 文件是如何生成的