Echarts在线免费图表

 
            // prettier-ignore
const hours = [
    '0', '1', '2'
];
// prettier-ignore
const days = [
    '0', '1', '2'
];
// prettier-ignore
const data = [
  [0, 0, 0], [0, 1, 0], [0, 2, 0],
  [1, 0, 0], [1, 1, 0], [1, 2, 0],
  [2, 0, 0], [2, 1, 0], [2, 2, 0]
].map(function (item) {
    return [item[1], item[0], item[2] || '-'];
});

option = {
  tooltip: {
    show: false
  },
  legend: {
    data: ['缺陷', '预警', '正常']
  },
  grid: {
    height: '50%',
    top: '10%'
  },
  xAxis: {
    type: 'category',
    data: hours,
    splitArea: {
      show: true
    }
  },
  yAxis: {
    type: 'category',
    data: days,
    splitArea: {
      show: true
    }
  },
  series: [
    {
      name: 'Punch Card',
      type: 'heatmap',
      data: data
    },
    {
      type: 'scatter',
      symbolSize: function (val) {
        return 30;
      },
      itemStyle: {
        color: {
          type: 'radial',
          x: 0.5,
          y: 0.5,
          r: 0.5,
          colorStops: [{
              offset: 0, color: 'rgba(0, 0, 0, 0.1)' // 0% 处的颜色
          }, {
              offset: 1, color: 'rgba(0, 0, 0, .5)' // 100% 处的颜色
          }],
          global: false // 缺省为 false
        },
        borderColor: {
          type: 'radial',
          x: 0.5,
          y: 0.5,
          r: 0.5,
          colorStops: [{
              offset: 0, color: 'rgba(239, 250, 255, 0.1)' // 0% 处的颜色
          }, {
              offset: 1, color: 'rgba(239, 250, 255, 0.1)' // 100% 处的颜色
          }],
          global: false // 缺省为 false
        }
      },
      data: data
    },
    
    {
      type: 'scatter',
      name: '缺陷',
      symbolSize: function (val) {
        return 30;
      },
      tooltip: {
       show: true,
       trigger: 'item'
      },
      itemStyle: {
        color: {
          type: 'radial',
          x: 0.5,
          y: 0.5,
          r: 0.5,
          colorStops: [{
              offset: 0, color: '#FF987A' // 0% 处的颜色
          }, {
              offset: 1, color: '#ED3C17' // 100% 处的颜色
          }],
          global: false // 缺省为 false
        },
        borderColor: {
          type: 'radial',
          x: 0.5,
          y: 0.5,
          r: 0.5,
          colorStops: [{
              offset: 0, color: '#FF5E34' // 0% 处的颜色
          }, {
              offset: 1, color: '#EDA317' // 100% 处的颜色
          }],
          global: false // 缺省为 false
        }
      },
      data: [[0, 2, 1],]
    },
    {
      type: 'scatter',
      name: '预警',
      symbolSize: function (val) {
        return 30;
      },
      tooltip: {
       show: true,
       trigger: 'item'
      },
      itemStyle: {
        color: {
          type: 'radial',
          x: 0.5,
          y: 0.5,
          r: 0.5,
          colorStops: [{
              offset: 0, color: '#FFD37A' // 0% 处的颜色
          }, {
              offset: 1, color: '#EDA317' // 100% 处的颜色
          }],
          global: false // 缺省为 false
        },
        borderColor: {
          type: 'radial',
          x: 0.5,
          y: 0.5,
          r: 0.5,
          colorStops: [{
              offset: 0, color: '#FFD034' // 0% 处的颜色
          }, {
              offset: 1, color: '#FFF4E0' // 100% 处的颜色
          }],
          global: false // 缺省为 false
        }
      },
      data: [[1, 1, 1]]
    },
    {
      type: 'scatter',
      name: '正常',
      symbolSize: function (val) {
        return 30;
      },
      tooltip: {
       show: true,
       trigger: 'item'
      },
      itemStyle: {
        color: {
          type: 'radial',
          x: 0.5,
          y: 0.5,
          r: 0.5,
          colorStops: [{
              offset: 0, color: '#8AE8CD' // 0% 处的颜色
          }, {
              offset: 1, color: '#32B887' // 100% 处的颜色
          }],
          global: false // 缺省为 false
        },
        borderColor: {
          type: 'radial',
          x: 0.5,
          y: 0.5,
          r: 0.5,
          colorStops: [{
              offset: 0, color: '#23E09F' // 0% 处的颜色
          }, {
              offset: 1, color: '#E0FFF7' // 100% 处的颜色
          }],
          global: false // 缺省为 false
        }
      },
      
      data: [[2, 0, 1]]
    },
  ]
};