直接上代码
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,
};
推荐链接
发表评论