Echarts在线免费图表

 
            const list = [
];
const header = [];

for(let i = 0;i < 100;i++){
   header.push({ name: 'title'+i })
}
const item = {};
header.forEach(f=>{
   item[f.name] = (Math.random()*1000).toFixed(2);
})
for(let i = 0;i < 10;i++){
   list.push(item)
}

const lineColor = 'white'

const tbody =
   list.map(m => {
      const row = header.map(t => ({ name: m[t.name] || '', value: 1 }));
      console.log(row)
      return {
         type: 'bar',
         stack: 'table',
         data: row,
         barWidth: '100%',
         label: {
            show: true,
            formatter: '{b}'
         }
      }
   })

option = {
   backgroundColor: 'black',
   color: ['rgba(0,0,0,0)'],
   dataZoom: [{
      show: true,
      startValue:0,
      endValue:10,
      xAxisIndex:0,
      zoomLock: true,
      height:'0',
   }],
   xAxis: {
      data: header.map(m => (m.name)),
      splitNumber: header.length + 1,
      axisTick: {
         show: false
      },
      axisLabel: {
         show: false
      },
      splitLine: {
         show: true,
         lineStyle: {
            color: lineColor
         }
      },
      axisLine: {
         show: true,
         lineStyle: {
            color: lineColor
         }
      }
   },
   yAxis: {
      splitNumber: list.length + 1,
      axisTick: {
         show: false
      },
      axisLabel: {
         show: false
      },
      splitLine: {
         show: true,
         lineStyle: {
            color: lineColor
         }
      }
   },
   series: [
      ...tbody,
      {
         type: 'bar',
         name: 'header',
         stack: 'table',
         data: header.map((m) => ({ name: m.name, value: 1 })),
         barWidth: '100%',
         // color:'yellow',
         label: {
            show: true,
            formatter: '{b}'
         }
      },
   ]
};