Echarts在线免费图表

 
            var interval = ['七列', '六列', '五列', '四列', '三列', '二列', '一列'];
var penetration = ["一层", "二层", "三层", "四层", "五层", "一层", "二层", "三层", "四层", "五层"];
var data = [
    [0, 0, 1], [0, 1, 1], [0, 2, 1], [0, 3, 1], [0, 4, 0], [0, 5, 0], [0, 6, 1], [0, 7, 1], [0, 8, 0], [0, 9, 0],
    [1, 0, 0], [1, 1, 0], [1, 2, 0], [1, 3, 0], [1, 4, 0], [1, 5, 0], [1, 6, 1], [1, 7, 1], [1, 8, 0], [1, 9, 0],
    [2, 0, 0], [2, 1, 1], [2, 2, 1], [2, 3, 1], [2, 4, 0], [2, 5, 0], [2, 6, 1], [2, 7, 1], [2, 8, 0], [2, 9, 0],
    [3, 0, 1], [3, 1, 1], [3, 2, 2], [3, 3, 0], [3, 4, 0], [3, 5, 0], [3, 6, 1], [3, 7, 1], [3, 8, 0], [3, 9, 0],
    [4, 0, 0], [4, 1, 1], [4, 2, 0], [4, 3, 1], [4, 4, 0], [4, 5, 0], [4, 6, 1], [4, 7, 1], [4, 8, 0], [4, 9, 0],
    [5, 5, 0], [5, 6, 1], [5, 7, 1], [5, 8, 0], [5, 9, 0],
    [6, 5, 0], [6, 6, 1], [6, 7, 1], [6, 8, 0], [6, 9, 0],
    [7, 5, 0], [7, 6, 1], [7, 7, 1], [7, 8, 0], [7, 9, 0],
    [8, 5, 0], [8, 6, 1], [8, 7, 1], [8, 8, 0], [8, 9, 0],
    [9, 5, 0], [9, 6, 1], [9, 7, 1], [9, 8, 0], [9, 9, 0],

];
data = data.map(function (item) {
    return {
        value: item,
        itemStyle: {
            normal: {
                color: item[2] == 0 ? '#ccc' : 'green',
                borderWidth: 10, // 调整块间距
                borderRadius: 10, // 设置圆角
                borderColor: "#4472C4"
            }

        }
    }

});
var bgColor = "transparent";
option = {
    //backgroundColor:bgColor,
    legend: {
        textStyle:{
            color:"#fff"
        },
        data: [
            {
                name: "有货",
                itemStyle: {
                    color: "green"
                }
            },
            {
                name: "无货",
                itemStyle: {
                    color: "#ccc"
                }
            }
        ],
        show: true,
    },
    tooltip: {
        position: 'top'
    },
    grid: {
        height: '80%',
        top: '10%'
    },
    xAxis: {
        nameTextStyle: {
            fontSize: 15,
            color: '#bef8ff',
        },
        axisLabel: {
            color: '#bef8ff',
        },
        axisLine: {
            show: false
        },
        axisTick: {
            show: false
        },
        type: 'category',
        data: interval,
        position: "top",
        splitLine: {
            show: true,
            lineStyle: {
                color: bgColor, //同背景色
                width: 10,
            },
        },
    },
    yAxis: {
        nameTextStyle: {
            fontSize: 15,
            color: '#bef8ff',
        },
        axisLabel: {
            color: '#bef8ff',
        },
        type: 'category',
        data: penetration,
        axisLine: {
            show: false
        },
        axisTick: {
            show: false
        },
        splitLine: {
            show: true,
            lineStyle: {
                color: bgColor, //同背景色
                width: 10,
            },
        },
    },
    visualMap: {
        type: 'piecewise',
        left: '70%',
        top: '70%',
        calculable: true,
        realtime: false,
        splitNumber: 2,
        inRange: {
            color: [
                '#CCC',
                'green',
            ]
        },
        text: ['有货', '无货']
    },
    series: [{
        name: '',
        type: 'heatmap',
        data: data,
        itemStyle: {
            normal: {
                borderWidth: 2, // 调整块间距  
                borderRadius: 4, // 设置圆
                //color: '#f5f7fa'
                color: bgColor
            }
        },
        label: {
            show: true,
        },
        emphasis: {
            itemStyle: {
                shadowBlur: 10,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
            }
        },
    }]
};