echarts一个options中同时存在多个polar时，如何指定series在某个polar渲染

Question

echarts一个options中同时存在多个polar时，如何指定series在某个polar渲染

代码如下

import { BarSeriesOption } from "echarts/charts";
import * as echarts from "echarts/core";
import {
  AngleAxisOption,
  GridOption,
  PolarOption,
  RadiusAxisOption,
  TitleOption,
  XAXisOption,
  YAXisOption
} from "echarts/types/dist/shared";
import { OtherData } from "src/app/constants/other-data.constant";
import {
  GET_RANDOM_NUMBER,
  GET_RANDOM_NUMBER_LIST
} from "src/app/utils/other-data.util";

type ChartOptions = echarts.ComposeOption<
  | BarSeriesOption
  | GridOption
  | TitleOption
  | XAXisOption
  | YAXisOption
  | RadiusAxisOption
  | AngleAxisOption
  | PolarOption
>;

export function MixinPieBarOptions(chart: echarts.ECharts): ChartOptions {
  const firstPieChart: BarSeriesOption[] = [
    {
      type: "bar",
      data: [GET_RANDOM_NUMBER()],
      coordinateSystem: "polar",
      name: OtherData.DEMON_LIST[11],
      angleAxisIndex: 0,
      stack: "a",
      roundCap: true,
      barMaxWidth: chart.getHeight() / 10,
      angleAxisId: "first"
    },
    {
      type: "bar",
      data: [GET_RANDOM_NUMBER()],
      coordinateSystem: "polar",
      name: OtherData.DEMON_LIST[22],
      angleAxisIndex: 0,
      stack: "a",
      roundCap: true,
      barMaxWidth: chart.getHeight() / 10,
      angleAxisId: "first"
    },
    {
      type: "bar",
      data: [GET_RANDOM_NUMBER()],
      coordinateSystem: "polar",
      name: OtherData.DEMON_LIST[29],
      angleAxisIndex: 0,
      stack: "a",
      roundCap: true,
      barMaxWidth: chart.getHeight() / 10,
      angleAxisId: "first"
    }
  ];
  const secondPieChart: BarSeriesOption[] = [
    {
      type: "bar",
      data: [GET_RANDOM_NUMBER()],
      coordinateSystem: "polar",
      name: OtherData.DEMON_LIST[55],
      stack: "second",
      roundCap: true,
      barMaxWidth: chart.getHeight() / 10,
      angleAxisId: "second",
      radiusAxisId: "second"
    },
    {
      type: "bar",
      data: [GET_RANDOM_NUMBER()],
      coordinateSystem: "polar",
      name: OtherData.DEMON_LIST[44],
      stack: "second",
      roundCap: true,
      barMaxWidth: chart.getHeight() / 10,
      angleAxisId: "second",
      radiusAxisId: "second"
    },
    {
      type: "bar",
      data: [GET_RANDOM_NUMBER()],
      coordinateSystem: "polar",
      name: OtherData.DEMON_LIST[14],
      stack: "second",
      roundCap: true,
      barMaxWidth: chart.getHeight() / 10,
      angleAxisId: "second",
      radiusAxisId: "second"
    }
  ];

  return {
    grid: [
      { width: "30%", height: "100%", bottom: "bottom", left: "left" },
      { width: "30%", height: "100%", bottom: "bottom", left: "center" },
      { width: "30%", height: "100%", bottom: "bottom", right: "right" }
    ],
    xAxis: [{ gridIndex: 0 }, { gridIndex: 1 }, { gridIndex: 2 }],
    yAxis: [{ gridIndex: 0 }, { gridIndex: 1 }, { gridIndex: 2 }],
    angleAxis: [
      {
        id: "first",
        // axisLine: {
        //   show: false
        // },
        // axisTick: {
        //   show: false
        // },
        // minorTick: {
        //   show: false
        // },
        // axisLabel: {
        //   show: false
        // },
        // minorSplitLine: {
        //   show: false
        // },
        // splitLine: {
        //   show: false
        // },
        polarId: "first"
      },
      {
        id: "second",
        // axisLine: {
        //   show: false
        // },
        // axisTick: {
        //   show: false
        // },
        // minorTick: {
        //   show: false
        // },
        // axisLabel: {
        //   show: false
        // },
        // minorSplitLine: {
        //   show: false
        // },
        // splitLine: {
        //   show: false
        // },
        polarId: "second"
      }
    ],
    radiusAxis: [
      {
        type: "category",
        data: [""],
        show: false,
        z: 10,
        polarId: "first"
      },
      {
        type: "category",
        data: ["asd"],
        z: 10,
        polarId: "second"
      }
    ],
    polar: [
      {
        id: "first",
        center: [chart.getWidth() / 3 / 2, "50%"]
      },
      {
        id: "second",
        center: [chart.getWidth() - chart.getWidth() / 3 / 2, "50%"]
      }
    ],
    series: [...firstPieChart, ...secondPieChart]
  };
}

想让左边的外环数据到右侧polar

Answer 1

在每个polar的子项里添加center调整位置，在series里用polarIndex来指定使用的polar下标