Echarts在线免费图表

 
            let data = {
   xdata: ['a', 'b', 'c', 'd', 'e'],
   data1: [10, 20, 30, 40, 50],
   data2: [11, 22, 30, 30, 30],
}
function maxInArrays(...arrays) {
   // 确保所有数组的长度相同
   if (arrays.length === 0) return [];
   const length = arrays[0].length;
   for (let array of arrays) {
      if (array.length !== length) {
         throw new Error("所有数组的长度必须相同");
      }
   }

   // 计算每个位置上的最大值
   const maxValues = [];
   for (let i = 0; i < length; i++) {
      let maxVal = arrays[0][i];
      for (let array of arrays) {
         if (array[i] > maxVal) {
            maxVal = array[i];
         }
      }
      maxValues.push(maxVal);
   }

   return maxValues;
}
let sort = maxInArrays(data.data1, data.data2);
let color = ['#0071db', '#ff4868']
option = {
   //你的代码
   xAxis: [
      {
         type: 'category',
         data: data.xdata,
      },
      {
         type: 'category',
         position: 'bottom',
         data: data.xdata,
      },
   ],
   backgroundColor: "#fff",
   yAxis: {
      type: 'value'
   },
   legend: {},
   color: color,
   series: [
      {
         name: 'bar1',
         data: data.data1,
         type: 'bar',
         xAxisIndex: 0
      },
      {
         name: 'bar2',
         data: data.data2,
         type: 'bar',
         xAxisIndex: 0
      },

      {
         data: sort.map((v) => 0),
         type: 'bar',
         xAxisIndex: 1,
         barWidth: 1,
         markPoint: {
            symbolSize: 0,
            data: [
               ...sort.map((v, k) => {
                  return {
                     label: {
                        show: true,
                        position: 'top',
                        formatter: (fp) => {
                           return `{i1|}bar1:${data.data1[fp.dataIndex]}\n{z|}\n{i2|}bar2:${data.data2[fp.dataIndex]}`
                        },
                        rich: {
                           z: {
                              height: 6,
                           },
                           i1: {
                              width: 10,
                              height: 10,
                              borderRadius: 10,
                              backgroundColor: color[0]
                           },
                           i2: {
                              width: 10,
                              height: 10,
                              borderRadius: 10,
                              backgroundColor: color[1]
                           }
                        }
                     },
                     coord: [k, v]
                  }
               })
               // {
               //    name: '某个坐标',
               //    coord: [0, 20]
               // },
            ]
         }
      }
   ]
};