要显示legend对应的value值,需要在formatter函数中添加name.value属性。修改后的代码如下:

option = {
  title:{
    text:'车辆所有权构成(辆)',
    left:'center'
  },
  tooltip: {
    trigger: 'item'
  },
  legend: {
    left: 'right',
    top:'center',
    orient:'vertical',
    formatter: function (name) {
      return `${name}|${name.value}`; //返回出图例所显示的内容是名称+百分比
    },
  },
  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: 20,
      },
      pointer: {
        show: false,
      },
      axisTick: {
        show: false,
      },
      axisLine: {
        show: false,
      },
      splitLine: {
        show: false,
      },
      axisLabel: {
        show: false,
      },
      // 中间的字和数字 数据
      data: [
        {
          value: 180135,
          name: '总计',
        },
      ],
    },
  ]
};

这样修改后,legend将显示为 "外租车辆|32.6" 和 "自有企业|67.4"。

option = title text车辆所有权构成辆 leftcenter tooltip trigger item legend left right topcenter orientvertical formatter function name return $name$namevalue; 返回出图例所

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

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