记录工作中常用的echart 图，免得后面遇到忘记了又要重新调图。

1.饼图方式显示完成率

只需要传一个percent比例就行了

image.png

let percent = 60

option = {
        tooltip: {
          trigger: 'item',
          formatter: (param) => {
            return `${param.marker}${param.percent}%`;
          }
        },
        series: [
          {
            type: 'pie',
            radius: ['70%', '95%'],
            avoidLabelOverlap: false,
            emphasis: {
              label: {
                show: false
              }
            },
            labelLine: {
              show: false
            },
            data: [
              {
                // 背景
                tooltip: {
                  show: false
                },
                emphasis: {
                  disabled: true
                },
                value: 100 - percent,
                name: 'bg',
                itemStyle: {
                  color: '#dddddd'
                },
                label: {
                  show: false
                }
              },
              { // 占比
                label: {
                  show: true,
                  position: 'center',
                  formatter: (param) => {
                    return [`{a|${param.percent}%}`, `{b|完成率}`].join('\n');
                  },
                  rich: {
                    a: {
                      fontSize: 28
                    },
                    b: {
                      fontSize: 12
                    }
                  }
                },
                value: percent
              }
            ]
          }
        ]
      };

2.纵向的柱状图，右侧显示对应对应详情

实现思路：为了保证在数据改变情况下右侧信息能始终与左侧坐标轴对齐，这里复制一份现有数据并设置透明度为0（当做背景），并使其y轴在右边，右侧显示的信息实际上就是y轴的label，tooltip重写来过滤掉背景柱子。

image.png

let materials = [
  {
    label: '物料1',
    availableTime: 10, // 预计可用时间
    hourConsume: 8 // 小时消耗量
  },
  {
    label: '物料2',
    availableTime: 20, // 预计可用时间
    hourConsume: 10 // 小时消耗量
  },
  {
    label: '物料3',
    availableTime: 3, // 预计可用时间
    hourConsume: 4 // 小时消耗量
  }
];
let xData = materials.map((item) => item.label); // 坐标轴数据
let series = [
  {
    name: '库存',
    type: 'bar',
    data: [10, 20, 4]
  },
  {
    name: '仓存',
    type: 'bar',
    data: [5, 15, 20]
  }
];

option = {
  tooltip: {
    confine: true,
    trigger: 'axis',
    axisPointer: {
      type: 'shadow'
    },
    formatter: (param) => {
      // 横坐标时间格式化
      let bStr = '';
      param.forEach((item) => {
        if (item.seriesName === 'hidden') return; // tooltip 不显示此系列
        let val = Array.isArray(item.value) ? item.value[1] : item.value; // 数组类型如时间趋势图，后面一个才是值

        bStr += `<div style="display: flex;justify-content: space-between;align-items: center;"><span style="margin-right: 10px;">${item.marker}${item.seriesName}</span><span>${val}</span></div>`; // 需注意小数点可能需要转换
      });
      return `<div><div>${param[0].axisValue}</div>${bStr}</div>`;
    }
  },
  grid: {
    left: 0,
    top: 40,
    bottom: 0,
    right: 0,
    containLabel: true
  },
  xAxis: [
    {
      type: 'value',
      axisLine: { show: false },
      axisLabel: { show: false },
      axisTick: { show: false },
      splitLine: { show: false }
    }
  ],
  yAxis: [
    {
      type: 'category',
      axisLine: { show: true },
      axisTick: { show: false },
      splitLine: { show: false },
      data: xData,
      axisLabel: { show: true }
    },
    {
      // 右侧文本 - formatter yAxis label实现，免得对不齐
      type: 'category',
      axisLine: { show: false },
      axisTick: { show: false },
      splitLine: { show: false },
      data: xData,
      position: 'right',
      axisLabel: {
        show: true,
        lineHeight: 18,
        formatter: (paramLabel) => {
          let finItem =
            materials.find((item) => item.label === paramLabel) || {};
          let arr = [
            `{normal|预计可用时间：}{bold|${finItem.availableTime}时}`,
            `{normal|小时消耗量：}{bold|${finItem.hourConsume}t}`
          ];
          return arr.join('\n');
        },
        rich: {
          normal: {
            fontSize: 12
            // color: '#000',
          },
          bold: {
            fontSize: 12,
            // color: '#000',
            fontWeight: 'bold'
          }
        }
      }
    }
  ],
  legend: {
    left: 0,
    data: series.map((item) => item.name)
  },
  series: [
    ...series,
    // 数据背景 - 用于对齐右侧文本
    ...series.map((item) => {
      return {
        ...item,
        silent: true,
        name: 'hidden',
        yAxisIndex: 1,
        itemStyle: {
          opacity: 0
        }
      };
    })
  ]
};

若对你有帮助，请点个赞吧，若能打赏不胜感激，谢谢支持！
本文地址：//www.greatytc.com/p/9bfd19ea493a?v=1726822098915，转载请注明出处，谢谢。

参考：echarts