echarts-堆叠柱图 表格

直接上代码

let dataArr = [
    {
         "测试1": 24,
        "测试2": 12,
        "测试3": 67,
        "测试4": 54,
        "测试5": 23,
        "测试6": 56,
        "Title": "表头1",
    },
    {
        "测试1": 24,
        "测试2": 78,
        "测试3": 24,
        "测试4": 22,
        "测试5": 24,
        "测试6": 56,
        "Title": "表头2",
    },
    {
         "测试1": 24,
        "测试2": 12,
        "测试3": 78,
        "测试4": 66,
        "测试5": 87,
        "测试6": 56,
        "Title": "表头3",
    },
    {
        "测试1": 24,
        "测试2": 54,
        "测试3": 35,
        "测试4": 75,
        "测试5": 54,
        "测试6": 56,
        "Title": "表头4",
    },
    {
        "测试1": 24,
        "测试2": 87,
        "测试3": 25,
        "测试4": 57,
        "测试5": 24,
        "测试6": 56,
        "Title": "表头5",
    },
    {
       "测试1": 24,
        "测试2": 75,
        "测试3": 24,
        "测试4": 35,
        "测试5": 24,
        "测试6": 56,
        "Title": "表头6",
    },
    {
       "测试1": 24,
        "测试2": 77,
        "测试3": 57,
        "测试4": 85,
        "测试5": 24,
        "测试6": 56,
        "Title": "表头7",
    },
    {
        "测试1": 24,
        "测试2": 7,
        "测试3": 75,
        "测试4": 12,
        "测试5": 24,
        "测试6": 56,
        "Title": "表头8",
    }
];
// 取表头
let tableHead = [];
for(var e = 0;e < dataArr.length;e++) {
    tableHead.push(dataArr[e].Title);
}
let totalArr = [];
// 左侧标题
var letftTitle = ["测试1","测试2","测试3","测试4"];
function SeriesData() {
    let arr = [];
    for(var i = 0;i < letftTitle.length;i++) {
        let arr2 = [];
        for(var e = 0;e < tableHead.length;e++) {
            let obj = dataArr.find(x => x.Title == tableHead[e]);
            if(Object.keys(obj).find(x => x == letftTitle[i])){
                let a = obj[Object.keys(obj).find(x => x == letftTitle[i])];
                arr2.push(a);
            }
        }
        // 将数据汇总
        totalArr.push(arr2);
         let obj = {
            name: letftTitle[i],
            type: 'bar',
            stack: 'total',
            barWidth: '20%', // Set the bar width
            barMaxWidth: '50%', // Set the maximum bar width
            label: {
                show: true,
                position: 'top',
            },
            yAxisIndex: 0,
            data: arr2,
        }
        arr.push(obj);
    }
    return arr;
}
 
function fucIcon() {
    let obj = {};
    for(var i = 0;i < letftTitle.length;i++) {
        obj[i] =  {fontSize: 20,color: color[i]};
    }
    return obj;
}
// 左侧标题显示
function ForName(NameArr) {
let TitleName = '';
for (var i = 0; i < NameArr.length; i++) {
    TitleName += '{'+i+'|● }' + NameArr[i] + '\n';
}
return TitleName;
}
// 绘制表格线
function getTableLine(num) {
    var list = [];
    var bottom = (letftTitle.length * 30) + 65; // 可根据表格行数高度动态调整
    var height = 30; // 表格线行高
    // 添加边界线
    list.push({
        type: 'line',
        left: 25,
        bottom: bottom+30 - num  * height ,
        style: {
            fill: '#333',
        }, 
        // 线条
        shape: {
            x1: 0,
            y1: 0,
            x2: 0,
            y2: (num-1) * height,
        },
    });
 
    // 循环绘制表格
    for (var i = 0; i < num; i++) {
        list.push({
            type: 'line',
            bottom: bottom - i * height,
            right: 80,
            style: {
                fill: '#333',
            }, 
            // 线条
            shape: {
                x1: 0,
                y1: 0,
                x2: 830,
                y2: 0,
            },
        });
    }
    return list;
}
// 绘制表格线行数
var lineList = getTableLine(letftTitle.length+1);
// 绘制表格数据
function DrawTable(value) {
let str = '';
str += '{table|' + value +'}\n{table|';
for (let i = 0; i < totalArr.length; i++) {
    str += totalArr[i][i] +'}\n{table|'
}
str += '}';
return str;
}
let color = ['#5470c6', '#fac858', '#73c0de','#ee6666','#3ba272','#fc8452','#9a60b4','#ea7ccc'];
option = {
// 颜色配置
color: color,
legend: {
    orient: 'horizontal',
    bottom: 10,
    data: letftTitle
    },
// 左侧标题配置
title: [
    {text:'各地区大数据产业对外投资金额',left:'center'},
    {   
        text: ForName(letftTitle),
        bottom: 30 - letftTitle.length,
        left:30,
        textStyle: {
            lineHeight: 30,
            fontSize: 13,
            fontWeight: 'normal',
            formatter: function (value) {
                return '{table|' + value + '}';
            },
            rich: fucIcon()
        },
    },
],
// 表格边距配置
grid: {
    bottom: (letftTitle.length * 30) + 100, // 可根据表格行数动态调整高度
    left: 100,
    right: 80,
    top:50
},
xAxis: [
    {
        type: 'category',
        boundaryGap: true,
        data: tableHead,
        axisTick: {
            length: (letftTitle.length * 30) + 35,
        },
        axisLabel: {
            formatter: function (value, index) {
                var indexNum = 0;
                for (var i = 0; i < tableHead.length; i++) {
                    if (value == tableHead[i]) {
                        indexNum = i;
                    }
                }
                return (DrawTable(value));
            },
            rich: {
                table: {
                    height: 30, //表格内数据行高
                    lineHeight:30,
                    align: 'center',
                    verticalAlign: 'bottom',
                },
            },
        },
    },
],
yAxis: [
    {
        type: 'value',
        name: '对外投资金额（万元）',
        nameGap: 50,  // y轴name与横纵坐标轴线的间距
            nameLocation: "middle", // y轴name处于y轴的什么位置
            "nameTextStyle":{
              "fontSize":14,
              "fontWeight":700
            } ,
        scale: true,
        minInterval: 1,
        splitLine: {
            show: true,
        },
        min: function (v) {
            return Math.max(v.min - 10, 0);
        },
    },
],
series: SeriesData(),
graphic: lineList,
};复制