Echarts在线免费图表

 
            
const yData = ['LOSS', 'YDL', 'ZGZTQS', 'QKZTQS', 'GDKKL', 'DLWFTQ', 'YDDYTQ', 'CRYH'];
const xData = ['LOSS', 'YDL', 'ZGZTQS', 'QKZTQS', 'GDKKL', 'DLWFTQ', 'YDDYTQ', 'CRYH'];
const dataAll = {
   'LOSS': [1, -0.959, -0.956, 0.901, -0.012, 0.168, -0.137, -0.876],
   'YDL': [-0.959, 1, 0.948, -0.888, -0.081, -0.158, 0.043, 0.855,],
   'ZGZTQS': [-0.956, 0.948, 1, -0.982, 0.045, -0.021, 0.084, 0.957,],
   'QKZTQS': [0.901, -0.888, -0.982, 1, -0.065, -0.095, -0.06, -0.971,],
   'GDKKL': [-0.012, -0.081, 0.045, -0.065, 1, 0.409, 0.171, 0.072,],
   'DLWFTQ': [0.168, -0.158, -0.021, -0.095, 0.409, 1, -0.379, -0.002,],
   'YDDYTQ': [-0.137, 0.043, 0.084, -0.06, 0.171, -0.379, 1, 0.249,],
   'CRYH': [-0.876, 0.855, 0.957, -0.971, 0.072, -0.002, 0.249, 1,]
}
let pdata = [];
xData.forEach((item, index) => {
   yData.forEach((item2, index2) => {
      pdata.push([index2, index, dataAll[item][index2]]);
   })
});
option = {
   tooltip: {
      position: 'top'
   },
   grid: {
      height: '50%',
      top: '10%'
   },
   xAxis: {
      type: 'category',
      data: xData,
      splitArea: {
         show: true
      }
   },
   yAxis: {
      type: 'category',
      data: yData,
      splitArea: {
         show: true
      }
   },
   visualMap: {
      min: -1,
      max: 1,
      calculable: true,
      orient: 'horizontal',
      left: 'center',
      bottom: '15%'
   },
   series: [
      {
         name: 'Punch Card',
         type: 'heatmap',
         data: pdata,
         label: {
            show: true
         },
         emphasis: {
            itemStyle: {
               shadowBlur: 10,
               shadowColor: 'rgba(0, 0, 0, 0.5)'
            }
         }
      }
   ]
};