echart仪表盘定制显示不同的月份与指针定位

最近在处理定制的大屏看板时。收到一个需求。 原本只是简单的显示一个产量就可以了。但是产品经理跟客户沟通后。他们想要刻度分12等分。每个刻度对应不同的月份去展示每个月的产量。并且需要指针指向当前的月份

一开始的自信满满。到真下手后发觉真的只能用邪魔歪道来解决，

1.第一个问题。仪表盘确实是可以12等分。但是这个12等分是按你的echart设置的最大数目。然后按echart的内部逻辑去显示应的数据，每个月份的产量有高有低。不可能是按你的数值依次递增

2.第二个问题。总产量的数字指向的也是data的[]数据，也就是说你每个月的数据不一样。指向的针并不是按你划的12等分的指向月来。而是仪表的数值指向

针对这俩个问题。先看实现的效果图，echart用type的gauge实现,

如何解决第一个问题

1.首先我们需要手动创建每个月的数据结构，并把后台的每个月的数据数组monthList赋值过去。没有月份的数据就手动创建并为0

 const completeMonthData = Array.from({ length: 12 }, (_, index) => {
        const month = index + 1;
        const existingData = this.monthList.find((data) => data.Month === month);

        return existingData || { Month: month, TotalCBDefine3: 0 }; // 如果没有数据，则补充为默认值
      });

2.关健的一步。由于我们知道echart这个12等分是按你的echart设置的最大数目，因此我们可以通过计算每个月的echart的间隔数目来得到singleStep步长,这里12等分通过效果图可以知道就是11的间隔

  每一个间隔的数量 = 总产量/11  即  const singleStep = Math.floor(总产量 / 11);

然后我们可以通过axisLabel的formatter来显示对应的月份

formatter: (value) => {
          console.log(value, 'value==');
          let monthIndex = Math.floor(value / singleStep); // 计算月份索引
              if (monthIndex >= 0 && monthIndex < completeMonthData.length) {
                const current = Math.round(completeMonthData[monthIndex].TotalCBDefine3);
                return `${monthIndex + 1}月: ${current}`;
              }
              return '';
            },

如何解决第二个问题

解决了第一个问题。其实第二个问题也好解决。echart中 data中的值就是指针所指的值 series[0].data = [{ value: currentValue, name: '年度总产量' }]

currentValue 我们可以通过singleStep步长并且获取当前月来计算出所得的值。这个值就会指向对应的月份

let currentValue = Number(dayjs().month()) * singleStep; //当前月的数量,目地是为了指针在某个刻度上