热力图

热力图主要通过颜色去表现数值的大小，必须要配合 visualMap 组件使用

可以应用在直角坐标系以及地理坐标系上，这两个坐标系上的表现形式相差很大，直角坐标系上必须要使用两个类目轴

import * as echarts from "echarts"
export default {
    install: (app: any) => {
        app.config.globalProperties.$leida = (id: any) => {
            var chartDom = document.getElementById(id)!;
            if (chartDom == null) {
                return
            }
            echarts.dispose(chartDom)
            var myChart = echarts.init(chartDom, "", { width: 800, height: 500 });
            const hours = ['1h', '2h', '3h', '4h', '5h', '6h', '7h', '8h', '9h', '10h', '11h', '12h'];
            const days = ['Saturday', 'Friday', 'Thursday', 'Wednesday', 'Tuesday', 'Monday', 'Sunday'];
            const data = [
                [0, 0, 5], [0, 1, 7], [2, 3, 10], [3, 5, 2], [5, 5, 1], [6, 4, 3], [10, 2, 7],
                [3, 3, 6], [11, 2, 8], [11, 3, 10], [12, 4, 6], [5, 6, 1], [10, 4, 4], [10, 3, 7],
                [8, 1, 1], [8, 2, 1], [9, 2, 1], [8, 5, 2], [8, 3, 2], [9, 6, 1], [9, 3, 7]
            ];
            var option = {
                tooltip: {
                    position: 'top'
                },
                xAxis: {
                    type: 'category',
                    data: hours
                },
                yAxis: {
                    type: 'category',
                    data: days
                },
                grid: {
                    height: '70%',
                    top: '10%'
                },
                visualMap: {
                    min: 0,
                    max: 10,
                    calculable: true,
                    orient: 'horizontal',
                    left: 'center',
                },
                series: [
                    {
                        name: '人力需求',
                        type: 'heatmap',
                        data: data,
                        label: {
                            show: true
                        }
                    }
                ]
            }
            myChart.setOption(option);
        }
    }
}