Echarts在线免费图表

 
            // x轴数据
const xAxisData = ['列1', '列2', '列3', '列4']
// legend图例数据
const legends = ['类型1', '类型2', '类型3', '']
// 表的y轴数据
const yAxisData2 = legends
// 数据源
const data1 = [12, 8, 4, 7]
const data2 = [8, 6, 2, 3]
const data3 = [4, 3, 1, 2]
// 表头
const data4 = [0, 1, 2, 3] // 表头，不能直接用汉字，只能用下标


// 表的数据处理
function set2Data() {
    // 源数据
    const oriData = [data1, data2, data3, data4]
    // 返回数据
    const resData = []
    // 处理数据
    oriData.forEach((col, index) => { // 列
        col.forEach((row, idx) => { // 行
            resData.push([idx, index, row]) // [列下标, 行下标, 值]
        })
    })
    return [{data: resData}]
}

// 表的数据源
const series2Data = set2Data()

// 图表的series处理
const series2 = series2Data.map(({ data }) => ({
    xAxisIndex: 1,
    yAxisIndex: 1,
    gridIndex: 1,
    data,
    type: 'heatmap',
    tooltip: { show: false },
    label: {
        show: true,
        formatter: function(params) {
            let v = params.data[2]
            // 表头
            if(params.data[1] === 3) {
                v = xAxisData[params.data[2]]
            }
            return v
        }
    },
    emphasis: {
        itemStyle: {
            shadowBlur: 25,
            shadowColor: 'rgba(0, 0, 0, 0.5)'
        }
    },
    itemStyle: {
        color: '#fff',
        borderColor: '#666',
        borderWidth: 1,
        borderType: 'solid',
    },
}))

const labelOption = {
    show: true,
    position: 'top'
};
const option = {
    grid: [
        // 柱状图的grid
        {
            left: '8%',
            right: '10%',
            top: '5%',
            bottom: '26%',
            containLabel: true,
        },
        // 表的grid
        {
            left: '10%',
            right: '10%',
            top: '76%',
            bottom: '6%',
            // containLabel: true,
        }
    ],
    tooltip: {
        trigger: 'axis',
        axisPointer: {
            type: 'shadow'
        }
    },
    legend: {
        icon: 'rect',
        itemWidth: 12,
        itemHeight: 12,
        data: legends,
        show: true,
        bottom: '2%',
    },
    xAxis: [
        // 柱状图的x轴
        {
            type: 'category',
            axisTick: { show: false },
            data: xAxisData,
            axisLabel: {
                show: false,
                textStyle: {
                    color: '#000',
                    fontSize: 12,
                },
            },

        },
        // 图表的x轴
        {
            type: 'category',
            gridIndex: 1,
            data: xAxisData,
            axisLabel: {
                show: false,
            },
            axisLine: {
                show: false,
            },
            axisTick: {
                show: false,
            },
            splitArea: {
                show: true,
            },
        }
    ],
    yAxis: [
        // 柱状图的y轴
        {
            type: 'value',
            splitLine: { show: true }
        },
        // 图表的y轴
        {
            type: 'category',
            gridIndex: 1,
            data: yAxisData2,
            axisLine: {
                show: false,
            },
            axisTick: {
                show: false,
            },
            splitArea: {
                show: true,
            },
        }
    ],
    series: [
        {
            name: legends[0],
            xAxisIndex: 0,
            yAxisIndex: 0,
            gridIndex: 0,
            type: 'bar',
            barGap: 0,
            label: labelOption,
            emphasis: {
                focus: 'series'
            },
            data: data1,
            itemStyle: {
                color: '#4874cb',
            },
            barGap: '50%',
        },
        {
            name: legends[1],
            xAxisIndex: 0,
            yAxisIndex: 0,
            gridIndex: 0,
            type: 'bar',
            label: labelOption,
            emphasis: {
                focus: 'series'
            },
            data: data2,
            itemStyle: {
                color: '#ee822f',
            },
        },
        {
            name: legends[2],
            xAxisIndex: 0,
            yAxisIndex: 0,
            gridIndex: 0,
            type: 'bar',
            label: labelOption,
            emphasis: {
                focus: 'series'
            },
            data: data3,
            itemStyle: {
                color: '#f2ba02',
            },
        },
    ].concat(series2)
};