echarts热力图根据正负数展示不同的样式

heatmap.js

// 横坐标
var x_axis = ['', '', '', '', '', '', '', ''];
// 纵坐标
var y_axis = [
    '8.华夏兴华H',
    '7.华夏兴华A',
    '6.华夏稳盛',
    '5.华夏翔阳LOF',
    '4.华夏成长',
    '3.华夏回报2号',
    '2.华夏回报H',
    '1.华夏回报A'
];
// 颜色渐变 红 -> 白 -> 绿
const colors = ['#ff0000', '#ffffff', '#4cd137'];

// 原始数据
const sources = [
    [],
    [1.0],
    [0.98, 1.0],
    [0.89, -0.87, 0.9],
    [0.78, 0.78, -0.78, -0.7],
    [0.98, 0.98, -0.97, 0.85, 0.78],
    [0.72, 0.68, 0.73, 0.84, 0.41, 0.66],
    [0.65, 0.65, 0.65, 0.76, 0.41, 0.66, 1.0]
];

// 存储真实展示的值
const real = new Map();

// 获取展示数据
const getShowDatas = () => {
    const size = sources.length;
    const offset = size - 1;
    // 初始化一个二维数组,填充0
    const datas = Array.from(Array(size)).map(() => Array(size).fill(0));
    for (let i = 0; i < size; i++) {
        for (let j = 0; j < size; j++) {
            // 斜角对称翻转图像
            const x = offset - j
            const y = i
            // 这里是表格里的汉字
            if (i === j) {
                datas[x][y] = [x, y, 0];
                real.set(`${x}_${y}`, y_axis[j]);
                continue;
            }

            // 右上角的值
            if (sources[i][j]) {
                datas[x][y] = [x, y, sources[i][j]];
                real.set(`${x}_${y}`, '');
                continue;
            }

            // 左下角
            datas[x][y] = [x, y, 0];
            // 如果值不小于0，用红色字体
            if (sources[j][i] >= 0) {
                real.set(`${x}_${y}`, `{red|${sources[j][i]}}`);
                continue;
            }
            // 小于0用绿色
            real.set(`${x}_${y}`, `{green|${sources[j][i]}}`);
        }
    }

    let data = [];

    for (let i = 0; i < datas.length; i++) {
        data.push(...datas[i]);
    }

    return data;
};
const data = getShowDatas();

option = {
    title: {
        text: '回报',
        left: 'center'
    },
    animation: false,
    grid: {
        height: '50%',
        y: '10%'
    },
    xAxis: {
        type: 'category',
        data: x_axis,
        splitArea: {
            show: true
        }
    },
    yAxis: {
        type: 'category',
        data: y_axis,
        splitArea: {
            show: true
        }
    },
    visualMap: {
        min: -1,
        max: 1,
        calculable: true,
        left: 'left',
        bottom: '15%',
        color: colors
    },
    series: [
        {
            name: '',
            type: 'heatmap',
            data: data,
            label: {
                normal: {
                    color: '#000000',
                    show: true,
                    formatter: function (params) {
                        const data = params.data;
                        const key = `${data[0]}_${data[1]}`;
                        return real.get(key);
                    },
                    rich: {
                        red: {
                            color: '#ff0000',
                            backgroundColor: '#fff'
                        },
                        green: {
                            color: '#4cd137',
                            backgroundColor: '#fff'
                        }
                    }
                }
            },
            itemStyle: {
                borderWidth: 1,
                borderColor: '#d88273',
                emphasis: {
                    shadowBlur: 5,
                    shadowColor: 'rgba(0, 0, 0, 0.2)'
                }
            }
        }
    ]
};