Echarts在线免费图表

 
            // prettier-ignore
const hours = [
    'co2', 'so2', 'no','ph'
];
// prettier-ignore
const days = [
    'co2', 'so2', 'no','ph'
];
// prettier-ignore
const data = [[0, 0, 1], [0, 1, -2],  [0, 2, 0.2],[0, 3, 0.3],
[1, 0, 1], [1,1,1],  [1,2,1],[1, 3, 0.3],
[2, 0, 1], [2, 1, -2],  [2, 2, 0.2],[2, 3, 0.3],
[3, 0, 1], [3, 1, -2],  [3, 2, 0.2],[3, 3, 0.3]]
    .map(function (item) {
    return [item[1], item[0], item[2] || '-'];
});
option = {
  tooltip: {
    position: 'top'
  },
  grid: {
    height: '50%',
    top: '10%'
  },
  xAxis: {
    type: 'category',
    data: hours,
    splitArea: {
      show: true
    }
  },
  yAxis: {
    type: 'category',
    data: days,
    splitArea: {
      show: true
    }
  },
  visualMap: {
    min: -1,
    max: 1,
    calculable: true,
    orient: 'horizontal',
    left: 'center',
    bottom: '15%'
  },
  series: [
    {
      name: 'Punch Card',
      type: 'heatmap',
      data: data,
      label: {
        show: true
      },
      emphasis: {
        itemStyle: {
          shadowBlur: 10,
          shadowColor: 'rgba(0, 0, 0, 0.5)'
        }
      }
    }
  ]
};