要在圆环的中间固定显示文字'总计',可以通过设置一个额外的 series 来实现。该 series 的 type 为'custom',并设置为圆环的中间位置。

以下是修改后的代码示例:

option = {
  title: {
    text: '车辆所有权构成(辆)',
    left: 'center',
    top: 'top',
  },
  tooltip: {
    trigger: 'item'
  },
  legend: {
    top: 'center',
    left: 'right',
    orient: 'vertical'
  },
  series: [
    {
      name: 'Access From',
      type: 'pie',
      radius: ['40%', '70%'],
      avoidLabelOverlap: false,
      label: {
        show: false,
        position: 'center'
      },
      emphasis: {
        label: {
          show: true,
          fontSize: 40,
          fontWeight: 'bold'
        }
      },
      labelLine: {
        show: false
      },
      data: [
        { value: 32.6, name: '外租车辆' },
        { value: 67.4, name: '自有企业' },
      ]
    },
    {
      name: 'Total',
      type: 'custom',
      renderItem: function(params, api) {
        var categoryIndex = api.value(0);
        var start = api.coord([0, categoryIndex]);
        var end = api.coord([1, categoryIndex]);
        var height = api.size([0, 1])[1] * 0.6;

        return {
          type: 'text',
          position: [start[0], start[1] - height],
          style: {
            text: '总计',
            fill: '#000',
            fontSize: 16,
            fontWeight: 'bold',
            textAlign: 'center'
          }
        };
      },
      data: [0], // 设置一个空的data,不参与圆环的绘制
    }
  ]
};

在上面的示例中,我们添加了一个额外的 series,类型为'custom'。在 renderItem 函数中,我们通过 api.coord 方法获取到圆环的起始坐标和结束坐标,然后在起始坐标的上方绘制了文字'总计'。

注意,我们将该 series 的 data 设置为一个空的数组 [0],这样它不会参与圆环的绘制,只会显示我们设置的文字'总计'。

Echarts圆环图中间固定显示文字:总计

原文地址: https://www.cveoy.top/t/topic/lowj 著作权归作者所有。请勿转载和采集!

免费AI点我,无需注册和登录