Echarts在线免费图表

 
            const source = [
   {
      "name": "从业",
      "data": [
         {
            "name": "其他",
            "num": "10",
         },
         {
            "name": "起重伤害",
            "num": "20",
         },
         {
            "name": "物体打击",
            "num": "30",
         },
         {
            "name": "漏水",
            "num": "40",
         },
         {
            "name": "坍塌",
            "num": "50",
         },
         {
            "name": "米线",
            "num": "50",
         },
         {
            "name": "酸辣",
            "num": "50",
         },
      ]
   },
   {
      "name": "基础建设项目",
      "data": [
         {
            "name": "其他伤害",
            "num": "177",
         },
         {
            "name": "起重伤害",
            "num": "6272",
         },
         {
            "name": "物体打击",
            "num": "11940",
         },
         {
            "name": "漏水",
            "num": "67",
         },
         {
            "name": "坍塌",
            "num": "10340",
         },
         {
            "name": "米线",
            "num": "50",
         },
         {
            "name": "酸辣",
            "num": "50",
         },
      ]
   },
   {
      "name": "公交运营",
      "data": [
         {
            "name": "其他伤害",
            "num": "100",
         },
         {
            "name": "起重伤害",
            "num": "200",
         },
         {
            "name": "物体打击",
            "num": "300",
         },
         {
            "name": "漏水",
            "num": "400",
         },
         {
            "name": "坍塌",
            "num": "500",
         },
         {
            "name": "米线",
            "num": "50",
         },
         {
            "name": "酸辣",
            "num": "50",
         },
      ]
   },
   {
      "name": "面条",
      "data": [
         {
            "name": "其他",
            "num": "110",
         },
         {
            "name": "起重伤害",
            "num": "220",
         },
         {
            "name": "物体打击",
            "num": "330",
         },
         {
            "name": "漏水",
            "num": "440",
         },
         {
            "name": "坍塌",
            "num": "550",
         },
         {
            "name": "米线",
            "num": "50",
         },
         {
            "name": "酸辣",
            "num": "50",
         },
      ]
   },
]

// x轴
let yData = source.map((it) => { return it.name });
// y轴
let xData = [];
source.forEach((el) => {
   xData = el.data.map((it) => { return it.name });
});
// 拼装数据
let echartsData = [];
source.forEach((i, indexI) => {
   i.data.forEach((k, indexK) => {
      echartsData.push([indexI, indexK, k.num]);
   })
});
// 渲染数据
let seriesData = echartsData.map(function (item) {
   return [item[1], item[0], item[2] || 0];
});
option = {
   backgroundColor: '#061740',
   tooltip: {
      position: 'top'
   },
   grid: {
      top: '15%',
      right: '1%',
      bottom: '8%',
      left: '15%',
   },
   xAxis: {
      type: 'category',
      data: xData,
      splitArea: {
         show: true
      },
      axisLabel: {
         interval: 0,
         textStyle: {
            color: '#FFF',
            fontSize: 12
         }
      },
      axisTick: {
         show: false,
      },
   },
   yAxis: {
      type: 'category',
      data: yData,
      splitArea: {
         show: true
      },
      axisLabel: {
         textStyle: {
            color: '#FFF',
            fontSize: 12
         }
      },
      axisTick: {
         show: false,
      },
   },
   visualMap: {
      min: 0,
      max: 10,
      calculable: true,
      orient: 'horizontal',
      left: 'center',
      top: '0%',
      inRange: {
         color: ['blue', 'green']
      }
   },
   series: [{
      type: 'heatmap',
      data: seriesData,
      label: {
         show: true
      },
      emphasis: {
         itemStyle: {
            shadowBlur: 10,
            shadowColor: 'rgba(0, 0, 0, 0.5)'
         }
      }
   }]
};