zaibei_charts/test/table/ChartTable4/index.js

import ChartTable1 from '../../../src/chart/table/ChartTable4/ChartTable4.js';

let chart=new ChartTable1(document.getElementsByClassName('c1')[0],{});
window.addEventListener('resize',()=>{
	chart.resize();
});

let option = {
	title:{},
	bg:{
		backgroundColor:"#000000"
	},
	grid:{
		left: "20%",
		right: "20%",
		top: "20%",
		bottom: "20%"
	},
	table: {
		borderWidth: 1,
		cornerColor: '#76aef4',
		borderColor: '#285da0',
		visibleNum:5,
		headFontSize:14,
		tableFontSize:14,
		leftBgColor:"#323232",
		rightBgColor:"#183860",
		headFontColor:"#ffffff",
		bodyFontColor: '#ffffff',

		headBgColor:"#b1bd2a",
		squareBgColor:"#d9e341",
		lineBgColor:"#b1bd2a",
		tableTextColor:"#ffffff",
		fillColor1:"#b1bd2a",
		fillColor2:"rgba(0,0,0,0.2)",
		rankingTop1:"#e71f49",
		rankingTop2:"#e76a1f",
		rankingTop3:"#e7991f",
		rankingTopTextColor:"#040a13"
	},
	series: [{
			name: '序号',

			data: [1, 2, 3, 4] //, 5,6, 7, 8, 9, 10
		},
		{
			name: '分类1',

			data: ['类型1','类型2','类型3','类型4']//,'类型5','类型6','类型7','类型8','类型9','类型10'],
		},
		{
			name: '属性2',

			data: ['属性1','属性2','属性3','属性4']//,'属性5','属性6','属性7','属性8','属性9','属性10'],
		}
		,
		{
			name: '属性3',

			data: ['属性1','属性2','属性3','属性4']//,'属性5','属性6','属性7','属性8','属性9','属性10'],
		},{
			name: '分类1',

			data: ['类型1','类型2','类型3','类型4']//,'类型5','类型6','类型7','类型8','类型9','类型10'],
		},
		{
			name: '属性2',

			data: ['属性1','属性2','属性3','属性4']//,'属性5','属性6','属性7','属性8','属性9','属性10'],
		}
		,
		{
			name: '属性3',

			data: ['属性1','属性2','属性3','属性4']//,'属性5','属性6','属性7','属性8','属性9','属性10'],
		}
	]
};
let option2 = {
	title:{},
	bg:{
		backgroundColor:"#000000"
	},
	grid:{
		left: "20%",
		right: "20%",
		top: "20%",
		bottom: "20%"
	},
	table: {
		borderWidth: 1,
		cornerColor: '#76aef4',
		borderColor: '#285da0',
		visibleNum:13,
		headFontSize:14,
		tableFontSize:14,
		leftBgColor:"#323232",
		rightBgColor:"#183860",
		headFontColor:"#ffffff",
		bodyFontColor: '#ffffff',

		// headBgColor:"#b1bd2a",
		// squareBgColor:"#d9e341",
		// lineBgColor:"#b1bd2a",
		// tableTextColor:"#ffffff",
		// fillColor1:"#b1bd2a",
		// fillColor2:"rgba(0,0,0,0.2)",
		// rankingTop1:"#e71f49",
		// rankingTop2:"#e76a1f",
		// rankingTop3:"#e7991f",
		// rankingTopTextColor:"#040a13"
	},
	series: [{
			name: '序号',

			data: [1, 2, 3, 4, 5,6, 7, 8, 9, 10,'类型2','类型3','类型4','类型5','类型6','类型7','类型8','类型9','类型10']
		},
		{
			name: '分类1',

			data: ['类型1','类型2','类型3','类型4','类型5','类型6','类型7','类型8','类型9','类型10','类型2','类型3','类型4','类型5','类型6','类型7','类型8','类型9','类型10'],
		},
		{
			name: '属性2',

			data: ['属性1','属性2','属性3','属性4','属性5','属性6','属性7','属性8','属性9','属性10','类型2','类型3','类型4','类型5','类型6','类型7','类型8','类型9','类型10'],
		}
		,
		{
			name: '属性3',

			data: ['属性1','属性2','属性3','属性4','属性5','属性6','属性7','属性8','属性9','属性10','类型2','类型3','类型4','类型5','类型6','类型7','类型8','类型9','类型10'],
		}
	]
};
setTimeout(() => {
	chart.setOption(option)
}, 2000);
setTimeout(() => {
	chart.setOption(option2)
}, 4000);