antvis/G2

Do you want to work on this issue?

You can request for a bounty in order to promote it!

复合图下多个Y轴的实现问题 #6085

Lee94 posted onGitHub

问题描述

用下面配置,第一次渲染右值轴感觉有问题,点下图例后正常。另外复合图多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


image

posted by Lee94 about 1 year ago

Fund this Issue

$0.00
Funded
Only logged in users can fund an issue

Pull requests