Echarts在线免费图表

 
            // 隔三位加入逗号
function changeNumberToStr(data) {
   data = data || '-'
   let strArr = data.toString().split(".");
   let letterArr = (strArr[0] || 0).split("");
   let result = [];
   let counter = 0;
   for (let i = letterArr.length - 1; i >= 0; i--) {
      counter++;
      result.unshift(letterArr[i]);
      if (!(counter % 3) && i != 0) {
         result.unshift(',');
      }
   }
   if (strArr.length > 1) {
      return result.join('') + "." + strArr[1];
   } else {
      return result.join('')
   }
}
// 总数据列表
totalData = []
for (var i = 1; i < 11; i++) {
   obj = {
      name: '数据' + i,
      dataList: []
   }
   for (var j = 1; j < 7; j++) {
      obj1 = {
         label: 'x' + j,
         value: 500 * j
      }
      obj.dataList.push(obj1)
   }
   totalData.push(obj)
}
series = [];
yNameData = totalData[0]?.dataList.map(
   (x) => x.label
);
// 女
totalData.forEach((item, index) => {
   series.push({
      name: item.name,
      type: "bar",
      stack: "right",
      barWidth: 9,
      data: item.dataList.map((x) => x.value),
   });
})
// 男
totalData.forEach((item, index) => {
   series.push({
      name: item.name,
      type: "bar",
      stack: "right",
      barWidth: 9,
      data: item.dataList.map((x) => `-${x.value}`),
   });
})

option = {
   //你的代码
   backgroundColor: '#fff',
   grid: {
      left: "10%",
      right: "4%",
      top: 10,
      bottom: "13%",
      containLabel: true,
   },
   tooltip: {},
   title: {
      text: '男左女右'
   },
   xAxis: [
      {
         type: "value",
         axisTick: {
            show: false,
         },
         axisLine: {
            show: false,
         },
         axisLabel: {
            textStyle: {
               fontSize: 10,
               color: "#727781",
            },
         },
      },
   ],
   yAxis: {
      type: "category",
      data: yNameData,
      inverse: true,
      axisTick: {
         show: false,
      },
      axisLine: {
         lineStyle: {
            color: "#C1CBE5",
         },
      },
      axisLabel: {
         textStyle: {
            fontSize: 14,
            color: "#727781",
         },
      },
   },
   series,
};