车辆所有权构成（辆）饼图和仪表盘图表配置

本篇文章介绍了如何配置ECharts图表，实现车辆所有权构成饼图和仪表盘的展示。饼图展示了外租车辆和自有企业车辆的占比，仪表盘展示了车辆总计数量。文章还详细说明了如何将图例整体显示在右侧，并展示name和value在图例右侧。

图表配置代码

option1 = {
  title: {
    text: '车辆所有权构成（辆）',
    left: 'center',
  },
  tooltip: {
    trigger: 'item',
  },
  legend: {
    left: 'left',
    top: 'center',
    orient: 'vertical',
    formatter: function (name) {
      var value;
      pic1data.forEach((item) => {
        if (item.name === name) {
          value = item.value;
        }
      });
      return `${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的属性left为'left'，top为'center'，并设置orient为'vertical'，这样图例就会显示在右侧，并且name和value会显示在图例的右侧。

代码解析

title：设置图表标题，包括标题内容和位置。
tooltip：设置提示框，用于鼠标悬停在图表上时显示数据信息。
legend：设置图例，包括位置、方向、内容格式等。
series：设置图表系列，包括饼图和仪表盘。

总结

通过以上代码配置，可以实现车辆所有权构成饼图和仪表盘的展示，并根据需求调整图例的位置。