Apache Echarts 是否可以显示内外饼图之间的关系（例如线或射线）？

Question

使用 Apache Echarts，我有一个嵌套饼图（内部图表半径为 [0,40%]，外部图表半径为 [%60,%75]）。 内部饼图是特定数据库所用空间的更详细细分。 外部图表从操作系统的角度显示了可用存储空间细分的更高级别图片。 标记为“This DB”的橙色部分显示了该数据库消耗的总存储空间量——换句话说，它代表了整个内部饼图的总影响。

我想直观地表示这种关系，以便通过绘制线条或箭头或内部饼图与外部图表上重新表示的部分（此处为橙色）之间的关系的其他指示来更容易解释. 我在截屏后使用绘画工具绘制了红色箭头。 我如何在 ECharts 中以编程方式获得类似箭头的东西，或者如果不可能，使用 javascript 和绘制箭头的标准？

旁注：请忽略内部饼图上的重叠标签。 这是由于 Echarts 中的一个错误，我还没有弄清楚，但这不是我现在要问的。

Answer 1

想通了...所以 ECharts 有一个系列类型“线”（与“线”不同），它可以使用坐标系统在图形上绘制线（带符号）：“cartesian2d”和一组开始/结束 x/ data.coords 的 y 值。

     {
      type: 'lines',
      name: "arrow",
      data: [{ coords: additionalLineData }],
      symbol: ["none","arrow"],
      symbolSize: 40,
      coordinateSystem: 'cartesian2d',
      lineStyle: {
        width: 5,
        color: "#777777",
        opacity: 1
      }

然后我不得不计算箭头应该放在图表上的什么位置，我用一些三角函数来解决这个问题：

   // get geometry of chart div
   const rect = currChartObj.getDom().getBoundingClientRect()

   // compute the size of our X-axis so that a unit of X and a unit of Y have the same pixel length (perfect square grid)
   xAxisMax = 100 * (rect.width / rect.height)

   // what percent of the outer pie does this database represent?
   const thisDbPctOfStorage = parseInt(currentStats[node.synonyms["OS_FILE_USED_SPACE_BYTES"]]) / parseInt(currentStats[node.synonyms["STORAGE_BYTES_ALLOCATED"]])

   // what is the degrees on a 360 degree circle of the midpoint of this database segment, given that the top of the circle starts at 90 degrees and diminishes clockwise in the opposite direction of our data values?
   const thisDBOuterShiftDeg=(90-(thisDbPctOfStorage * 360 * 0.5))

   // if midpoint goes negative, wrap around the 360 degree
   const thisDBOuterShiftDegrees= thisDBOuterShiftDeg < 0 ? 360 + thisDBOuterShiftDeg : thisDBOuterShiftDeg

   // convert to radians ( degrees * (pi/180) )
   const thisDbOuterPieRadians = thisDBOuterShiftDegrees * (3.1415926 / 180)

   // compute absolute center of pie charts
   const xMidPoint = Math.floor(xAxisMax / 2)
   const yMidPoint = Math.floor(yAxisMax / 2)

   // compute distance (length of ray) from absolute center to the middle of the outer pie chart
   const distanceToOutsideCenter = ((yAxisMax/2)-((yAxisMax-outsideInnerRadius)/2)) + ((outsideOuterRadius - outsideInnerRadius)/4)

   // compute distance (length of ray) from the absolute center to the outer edge of our inner pie chart
   const distanceToInsideOuterEdge = (yAxisMax/2)-((yAxisMax-insideRadius)/2)

   // using deltaX = sin(angle in rad) and deltaY = cos(angle in rad), find the new X, Y coordinates for the start and end of our arrow so it starts on the outer edge of the inner pie and ends in the
   // middle of the outer pie chart centered in the segment representing this database. This will be fed into the PieChart component as data for the lines series.
   innerToThisDbOuterLineData = [
                                 [xMidPoint + (distanceToInsideOuterEdge * Math.cos(thisDbOuterPieRadians)),yMidPoint + (distanceToInsideOuterEdge * Math.sin(thisDbOuterPieRadians))], // start
                                 [xMidPoint + (distanceToOutsideCenter * Math.cos(thisDbOuterPieRadians)),yMidPoint + (distanceToOutsideCenter * Math.sin(thisDbOuterPieRadians))] // end
                                ]

它还要求我放置一个“网格”选项，该选项覆盖 100% 的图表 div 和具有正确最大值的 x/y 轴，以便我的笛卡尔坐标与饼图对齐：

grid: {
  left: 0,
  right: 0,
  bottom: 0,
  containLabel: false
},
xAxis: {show: false, min: 0, max: xAxisMax},
yAxis: {show: false, min: 0, max: yAxisMax},

结果：