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',
            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; // 表格线行高
// 循环绘制表格
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: 2000,
            y2: 0,
        },
    });
}
return list;
}
// 绘制表格varvar
var lineList = getTableLine(letftTitle.length+1);
// 绘制表格数据
function DrawTable(value) {
let str = '';
str += '{table|' + value +'}\n{table|';
var lieIndex = tableHead.indexOf(value)
for (let i = 0; i < totalArr.length; i++) {
    str += totalArr[i][lieIndex] +'}\n{table|'
}
str += '}';
return str;
}
let color = ['#5470c6', '#fac858', '#73c0de','#ee6666','#3ba272','#fc8452','#9a60b4','#ea7ccc'];
option = {
// 颜色配置
color: color,
legend: {
    orient: 'horizontal',
    top: 10,
    data: letftTitle
    },
// 左侧标题配置
title: [
    {   
        text: ForName(letftTitle),
        bottom: 45 - letftTitle.length,
        left: 0,
        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
},
toolbox: {
    show: true,
    feature: {
        saveAsImage: {},
    },
},
dataZoom: {
    show: true,
    realtime: true,
    start: 0,
    end: 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',
        scale: true,
        minInterval: 1,
        splitLine: {
            show: false,
        },
        min: function (v) {
            return Math.max(v.min - 10, 0);
        },
    },
],
series: SeriesData(),
graphic: lineList,
};