vue echarts5 热力图不同方格设置颜色 heatmap visualMap

<template>
  <div class="home">
    <div id="main" style="width: 800px; height: 400px"></div>
  </div>
</template>

<script>
import * as echarts from 'echarts'

export default {
  methods: {
    drawChart() {
      const myChart = echarts.init(document.getElementById('main'))
      const xdata = ['new', 'active', 'closed', 'total']
      const ydata = ['张三', '李四', '王五', '总计']
      let data = [
        [0, 0, 10],
        [0, 1, 10],
        [0, 2, 10],
        [0, 3, 30],
        [1, 0, 10],
        [1, 1, 10],
        [1, 2, 10],
        [1, 3, 30],
        [2, 0, 10],
        [2, 1, 10],
        [2, 2, 10],
        [2, 3, 30],
        [3, 0, 30],
        [3, 1, 30],
        [3, 2, 30],
        [3, 3, 90]
      ]
      data = data.map(function(item) {
        let color = '#fff'

        if (item[0] === 0) {
          color = 'red'
        } else if (item[0] === 1) {
          color = 'blue'
        } else if (item[0] === 2) {
          color = 'green'
        }

        if (item[1] === 3) {
          color = '#fff'
        }

        return {
          itemStyle: {
            color
          },
          value: [item[0], item[1], item[2]]
        }
      })

      const option = {
        tooltip: {
          position: 'top'
        },
        animation: false,
        grid: {
          height: '50%',
          top: '10%'
        },
        xAxis: {
          type: 'category',
          data: xdata,
          position: 'top',
          splitArea: {
            show: true
          }
        },
        yAxis: {
          type: 'category',
          data: ydata,
          splitArea: {
            show: true
          }
        },
        visualMap: {
          min: 0,
          max: 10,
          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)'
              }
            }
          }
        ]
      }

      myChart.setOption(option)
    }
  },
  mounted() {
    this.drawChart()
  }
}
</script>