要设置legend右边显示对应的数据,可以在legend中添加data属性,并将其设置为对应的数据项名称。例如,将legend的data属性设置为['外租车辆', '自有企业'],即可让legend右边显示'外租车辆'和'自有企业'这两个数据项的名称。

修改后的代码如下:

option = {
  title: {
    text: '车辆所有权构成(辆)',
    left: 'center'
  },
  tooltip: {
    trigger: 'item'
  },
  legend: {
    top: '5%',
    right: 'right', // 将legend位置设置为右边
    orient: 'vertical',
    data: ['外租车辆', '自有企业'] // 设置legend的data属性为对应的数据项名称
  },
  series: [
    {
      name: 'Access From',
      type: 'pie',
      radius: ['40%', '70%'],
      avoidLabelOverlap: false,
      label: {
        show: false,
        position: 'center'
      },
      emphasis: {
        label: {
          show: false,
          fontSize: '40',
          fontWeight: 'bold'
        }
      },
      labelLine: {
        show: false
      },
      data: [
        { value: 32.6, name: '外租车辆' },
        { value: 67.4, name: '自有企业' },
      ]
    },
    
    // 就是这里!
    {
      name: '',
      z: -1,
      type: 'gauge',
      radius: '-50%',
      center: [`50%`, `50%`],
      // 配置中间的数字
      detail: {
        // 调节数字位置
        offsetCenter: [0, 20],
        fontSize: 30,
      },
      pointer: {
        show: false,
      },
      axisTick: {
        show: false,
      },
      axisLine: {
        show: false,
      },
      splitLine: {
        show: false,
      },
      axisLabel: {
        show: false,
      },
      // 中间的字和数字 数据
      data: [
        {
          value: 180135,
          name: '总计',
        },
      ],
    },
  ]
};
option = title text车辆所有权构成辆 leftcenter tooltip trigger item legend top 5 left right topcenter orientvertical series name Access From type pie radi

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

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