如何设置 legend,让其右边显示对应的数据内容:

要设置 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: '总计',
        },
      ],
    },
  ]
};
ECharts 图表:如何在 legend 中显示数据项名称

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

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