Echarts 饼图和仪表盘组合图表教程：将图例显示在右侧

本文将介绍如何使用Echarts将饼图和仪表盘组合成图表，并详细说明如何将图例显示在右侧。

图表配置

以下代码展示了如何将饼图和仪表盘组合成图表，并设置图例位置。

option1 = {
        title: {
          text: '车辆所有权构成（辆）',
          left: 'center',
        },
        tooltip: {
          trigger: 'item',
        },
        legend: {
          left: '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属性: legend 属性控制图例的显示。
left属性: left: 'left' 将图例位置调整到右侧。

总结

通过修改 legend 的 left 属性，可以将 Echarts 饼图和仪表盘组合图表的图例显示在右侧。本文提供了详细的代码示例，希望能帮助您更好地理解和运用 Echarts 库。