复合图下多个Y轴的实现问题
- Dominant language
- TypeScript
- Stars
- 12.6k
- Forks
- 1.7k
- PR merge metrics
- No merged PRs in 30d
Description
### 问题描述
用下面配置,第一次渲染右值轴感觉有问题,点下图例后正常。另外复合图多Y轴有其他思路嘛
```
{
type: "facetRect",
data: {
type: "inline",
value: [
{
门店名称: "宜兴店",
商品类别: "手机",
商品名称: "华为 HUAWEI P30天空之境全网通手机",
销售额: 72896,
销售数量: 17,
key: "宜兴店-手机-华为 HUAWEI P30天空之境全网通手机",
color: "华为 HUAWEI P30天空之境全网通手机",
},
{
门店名称: "宜兴店",
商品类别: "电脑整机",
商品名称: "Apple iPad Air 3 深空灰色",
销售额: 19440,
销售数量: 5,
key: "宜兴店-电脑整机-Apple iPad Air 3 深空灰色",
color: "Apple iPad Air 3 深空灰色",
},
{
门店名称: "江阴店",
商品类别: "影音娱乐",
商品名称: "小米(MI)小米AI音箱",
销售额: 916,
销售数量: 4,
key: "江阴店-影音娱乐-小米(MI)小米AI音箱",
color: "小米(MI)小米AI音箱",
},
{
门店名称: "江阴店",
商品类别: "手机",
商品名称: "华为 HUAWEI P30天空之境全网通手机",
销售额: 38592,
销售数量: 9,
key: "江阴店-手机-华为 HUAWEI P30天空之境全网通手机",
color: "华为 HUAWEI P30天空之境全网通手机",
},
{
门店名称: "江阴店",
商品类别: "电脑整机",
商品名称: "Apple iPad Air 3 深空灰色",
销售额: 50544,
销售数量: 13,
key: "江阴店-电脑整机-Apple iPad Air 3 深空灰色",
color: "Apple iPad Air 3 深空灰色",
},
],
},
width: 800,
height: 600,
paddingLeft: 100,
paddingRight: 100,
encode: { x: "key" },
children: [
{
type: "view",
// frame: false,
// viewStyle: {
// plotStrokeWidth: 0
// },
children: [
{
type: "interval",
encode: {
y: "销售额",
color: "color",
series: () => "销售额",
},
scale: {
y: {
independent: true,
domainMax: 80000,
},
},
axis: { y: { position: "left" } },
},
{
type: "interval",
encode: {
y: "销售数量",
color: "color",
series: () => "销售数量",
},
scale: {
y: {
independent: true,
domainMax: 20,
},
},
axis: { y: { position: "right", titleFill: "red" } },
},
],
},
],
}
```
### 重现链接
_No response_
### 重现步骤
_No response_
### 预期行为
_No response_
### 平台
- 操作系统: [macOS, Windows, Linux, React Native ...]
- 网页浏览器: [Google Chrome, Safari, Firefox]
### 屏幕截图或视频(可选)
_No response_
### 补充说明(可选)
_No response_
Contributor guide
Research direction
Start by reproducing the supplied facetRect configuration and compare the initial render with the state after clicking the legend. Investigate the multiple independent Y-axis behavior in the chart configuration; done means the right axis renders correctly on the first render and the supported approach for multiple Y axes is documented or verified.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- typescript
- Domain
- data-visualization
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Needs clarification
- Newbie friendliness
- 25/100