echarts自定义heatmap的样式

要自定义 ECharts 中的 Heatmap 样式，可以使用 ECharts 提供的 visualMap 组件，通过设置 visualMap 配置项中的 color 属性来控制颜色。同时，可以使用 ECharts 提供的 formatter 属性来自定义 Heatmap 中数据的显示格式。

以下是一个简单的例子，可以通过设置 visualMap 中的 color 属性，来自定义 Heatmap 的颜色：

option = {
    // 定义 Heatmap
    series: [{
        type: 'heatmap',
        data: [[0, 0, 10], [0, 1, 20], [1, 0, 30], [1, 1, 40]],
        label: {
            show: true
        }
    }],
    // 定义 visualMap，控制颜色
    visualMap: {
        min: 0,
        max: 50,
        calculable: true,
        orient: 'horizontal',
        left: 'center',
        bottom: '10%',
        color: ['#d94e5d','#eac736','#50a3ba'],
    }
};

在上述代码中，我们首先定义了一个 Heatmap，并指定了数据和是否显示标签。然后，我们定义了 visualMap，并设置了最小值、最大值、方向、位置和颜色。在这里，我们使用了一个包含三种颜色的数组，分别是红色、黄色和蓝色。

除了颜色，我们还可以使用 formatter 属性来自定义 Heatmap 中数据的显示格式。例如，我们可以将每个数据项的值显示为百分数：

option = {
    // 定义 Heatmap
    series: [{
        type: 'heatmap',
        data: [[0, 0, 10], [0, 1, 20], [1, 0, 30], [1, 1, 40]],
        label: {
            show: true,
            formatter: function(params){
                return (params.value * 100).toFixed(2) + '%';
            }
        }
    }],
    // 定义 visualMap，控制颜色
    visualMap: {
        min: 0,
        max: 50,
        calculable: true,
        orient: 'horizontal',
        left: 'center',
        bottom: '10%',
        color: ['#d94e5d','#eac736','#50a3ba'],
    }
};

在上述代码中，我们在 label 中定义了 formatter 属性，使用了 JavaScript 中的 toFixed() 方法将数据转换为百分数并保留两位小数。这样，我们就可以自定义 Heatmap 中数据的显示格式了。