中国朝代更替图echarts custom配置项内容和展示

      var time_min = -2697;

// 数据【数据说明：朝代、开始纪年、结束纪年、主要人物、首都】
var data_chinese = [
	[ "炎黄", -2697, -2599, "神农 炎帝、轩辕 黄帝", "涿鹿（今河北涿鹿）" ],
	[ "尧唐", -2357, -2262, "唐帝 尧", "平阳 （今山西临汾）" ],
	[ "舜虞", -2262, -2029, "虞帝 舜", "蒲阪 （今山西永济）" ],
	
	[ "夏朝前期", -2029, -1981, "夏王 启、夏王 禹", "斟鄩（今河南洛阳）" ],
	[ "有穷", -1981, -1973, "有穷王 夷羿", "鉏（今河南滑县）" ],
	[ "寒朝", -1973, -1933, "寒王 寒浞", "寒水（今山东潍坊）" ],
	[ "夏朝后期", -1933, -1559, "夏王 少康", "阳城（今河南登封）" ],
	
	[ "商朝", -1559, -1300, "商王 汤", "亳（今河南商丘）" ],
	[ "商（殷）朝", -1300, -1046, "商（殷）王 盘庚", "殷（今河南安阳）" ],
	
	[ "西周", -1046, -771, "西周文王 姬昌、西周武王 姬发", "镐京（今陕西西安）" ],
	[ "东周", -770, -256, "东周平王 姬宜臼", "洛邑（今河南洛阳）" ],
	[ "东周春秋", -770, -475, "", "" ],
	[ "东周战国", -475, -221, "", "" ],

	[ "东周曹国", -1122, -487, "曹叔 姬振铎", "陶丘（今山东菏泽定陶）" ],
	[ "东周陈国", -1046, -478, "陈胡公 妫满", "株野（今河南柘城胡襄镇）、宛丘（今河南淮阳城关）" ],
	[ "东周吴国", -584, -473, "兴王 寿梦、顺王 诸樊、道王 阖闾", "姑苏（今江苏省苏州）" ],
	[ "东周晋国", -1040, -403, "唐叔虞 姬虞、晋文公 姬重耳", "绛（今山西翼城县）" ],
	[ "东周（姜）齐国", -1044, -386, "齐太公 吕尚、齐桓公 吕小白", "营丘（今山东临淄）" ],
	[ "东周郑国", -806, -375, "郑桓公 姬友、郑庄公 姬寤生", "郑邑（今陕西渭南华州）、新郑（今河南新郑）" ],
	[ "东周越国", -621, -306, "越侯 无壬、越王 勾践", "会稽（今绍兴越城）、琅琊（今山东临沂附近）、吴" ],
	[ "东周宋国", -1114, -286, "宋微子 子启、宋襄公 子兹甫、宋康王 子偃", "亳（今河南商丘）" ],
	[ "东周鲁国", -1043, -249, "鲁公 姬伯禽、鲁桓公 姬允", "曲阜（今山东曲阜市）" ],
	[ "东周韩国", -403, -230, "韩景侯 韩虔、韩康子 韩虎", "平阳（今临汾）、新郑（今河南新郑）" ],
	[ "东周魏国", -403, -225, "魏文侯 魏斯、魏武侯 魏击、魏惠王 魏罃", "安邑（今山西夏县）、大梁（今河南开封）" ],
	[ "东周楚国", -1042, -223, "熊绎、楚武王 熊通、楚庄王 熊旅", "丹阳（今湖北姊归）、郢都（今湖北荆州纪南城）" ],
	[ "东周燕国", -1044, -222, "召公 姬奭", "蓟（今北京市）" ],
	[ "东周赵国", -403, -222, "赵烈侯 赵籍、赵敬侯 赵章、赵武灵王 赵雍", "邯郸（今河北邯郸）" ],
	[ "东周（田）齐国", -386, -221, "齐太公 田和、齐威王 田辟疆", "营丘（今山东临淄）" ],
	[ "东周卫国", -1115, -209, "卫康叔 姬封、卫武公 姬扬", "朝歌（今河南鹤壁淇县）" ],
	[ "东周秦国", -768, -207, "秦非子 嬴非、秦穆公 嬴任好、秦惠王 嬴宁", "咸阳（今陕西咸阳市东西安市西北）" ],

	[ "秦朝", -221, -207, "秦始皇 嬴政", "咸阳（今陕西咸阳）" ],
	[ "西楚", -206, -202, "西楚霸王 项羽", "彭城（今江苏徐州）" ],
	
	[ "西汉", -202, 8, "西汉高祖 刘邦", "长安（今陕西西安）" ],
	[ "新朝", 8, 23, "新太祖 王莽", "长安（今陕西西安）" ],
	[ "玄汉", 23, 25, "玄汉更始帝 刘玄", "长安（今陕西西安）" ],
	[ "东汉", 25, 220, "东汉光武帝 刘秀", "洛阳（今河南洛阳" ],

	[ "曹魏", 220, 266, "魏武帝 曹操、魏文帝 曹丕", "洛阳（今河南洛阳）" ],
	[ "蜀汉", 221, 263, "蜀汉昭烈帝 刘备、后主 刘禅", "成都（今四川成都）" ],
	[ "孙吴", 222, 280, "吴大帝 孙权", "建业（今江苏南京）" ],

	[ "西晋", 266, 316, "西晋武帝 司马炎", "洛阳（今河南洛阳）" ],
	[ "东晋", 317, 420, "东晋元帝 司马睿", "建康（今江苏南京）" ],

	[ "十六国前赵（匈奴）", 304, 329, "高祖光文皇帝 刘渊", "平阳（今山西临汾）、长安（陕西西安）" ],
	[ "十六国成汉（西南氐族）", 306, 347, "太宗武皇帝 李雄", "成都（今四川成都）" ],
	[ "十六国前凉（汉）", 314, 363, "高祖明王 张寔", "姑臧（今甘肃武威）" ],
	[ "十六国后赵（羯族）", 319, 351, "高祖明皇帝 石勒", "襄国（今河北邢台）" ],
	[ "十六国前燕（鲜卑）", 337, 370, "太祖文明皇帝 慕容皝", "龙城（今辽宁朝阳）" ],
	[ "十六国前秦（氐）", 351, 394, "世宗明皇帝 苻健", "长安（今陕西西安）" ],
	[ "十六国后秦（羌）", 384, 417, "太祖武昭皇帝 姚苌", "长安（今陕西西安）" ],
	[ "十六国后燕（鲜卑）", 384, 407, "世祖成武皇帝 慕容垂", "中山（今河北定州）" ],
	[ "十六国西秦（鲜卑）", 385, 431, "烈祖宣烈王 乞伏国仁", "苑川（今甘肃榆中）" ],
	[ "十六国后凉（氐）", 386, 403, "太祖懿武皇帝吕光", "略阳（今甘肃平凉）" ],
	[ "十六国南凉（鲜卑）", 397, 414, "烈祖武王 拓跋乌孤", "西平（今青海西宁）" ],
	[ "十六国北凉（卢水胡）", 397, 439, "太祖武宣王 沮渠蒙逊", "张掖（今甘肃张掖）" ],
	[ "十六国南燕（鲜卑）", 398, 410, "世宗献武皇帝 慕容德", "广固（今山东益都）" ],
	[ "十六国西凉（汉）", 407, 421, "太祖昭武王 李暠", "酒泉（今甘肃酒泉）" ],
	[ "十六国胡夏（匈奴）", 407, 431, "世祖烈武皇帝 赫连勃勃", "统万城（今陕西靖边）" ],
	[ "十六国北燕（高句丽）", 407, 436, "燕惠懿帝 高云", "和龙（今辽宁朝阳）" ],

	[ "南朝刘宋", 420, 479, "刘宋武帝 刘裕", "建康（今江苏南京）" ],
	[ "南朝南齐", 479, 502, "南齐高帝 萧道成", "建康（今江苏南京）" ],
	[ "南朝南梁", 502, 557, "梁武帝 萧衍", "建康（今江苏南京）" ],
	[ "南朝南陈", 557, 589, "陈武帝 陈霸先", "建康（今江苏南京）" ],

	[ "北朝北魏", 386, 557, "北魏道武帝 拓跋珪、北魏孝文帝 元宏", "平城（今河南洛阳）、洛阳（今山西大同）" ],
	[ "北朝东魏", 534, 550, "东魏孝静帝 元善见", "邺城（今河北邺镇）" ],
	[ "北朝西魏", 535, 557, "西魏文帝 元宝炬", "长安（今陕西西安）" ],
	[ "北朝北齐", 550, 577, "北齐文宣帝 高洋", "邺城（今河北邺镇）" ],
	[ "北朝北周", 557, 581, "北周孝闵帝 宇文觉", "长安（今陕西西安）" ],

	[ "隋朝", 581, 618, "隋文帝 杨坚", "长安（今陕西西安）" ],
	[ "唐朝前期", 618, 690, "唐高祖 李渊", "长安（今陕西西安）" ],
	[ "武周", 690, 705, "武周武后 武则天", "神都洛阳（今河南洛阳）" ],
	[ "唐朝后期", 705, 907, "唐中宗 李显", "长安（今陕西西安）" ],

	[ "五代后梁", 907, 923, "后梁太祖 朱温", "汴京（今河南开封）" ],
	[ "五代后唐", 923, 936, "后唐庄宗 李存勖", "洛阳（今河南洛阳）" ],
	[ "五代后晋", 936, 947, "后晋高祖 石敬瑭", "汴京（今河南开封）" ],
	[ "五代后汉", 947, 950, "后汉高祖 刘知远（暠）", "汴京（今河南开封）" ],
	[ "五代后周", 951, 960, "后周太祖 郭威", "汴京（今河南开封）" ],

	[ "十国南楚", 896, 951, "楚武穆王 马殷", "长沙府（今湖南长沙）" ],
	[ "十国南吴", 902, 937, "南吴太祖 杨行密", "广陵（今江苏广陵）" ],
	[ "十国前蜀", 907, 925, "前蜀太祖 王建", "成都（今四川成都）" ],
	[ "十国南汉", 917, 971, "南汉高祖 刘龑", "兴王府（今广东广州）" ],
	[ "十国吴越", 907, 978, "吴越太祖 钱镠", "杭州、越州（今浙江杭州）" ],
	[ "十国闽国", 909, 945, "闽太祖王 审知", "长乐府（今福建福州）、建州（今福建建瓯）" ],
	[ "十国荆南", 924, 963, "楚武信王 高季兴", "江陵府（今湖北秭归）" ],
	[ "十国后蜀", 933, 966, "后蜀高祖 孟知祥", "成都（今四川成都）" ],
	[ "十国南唐", 937, 975, "唐烈祖 李昪", "江宁府（今江苏南京）" ],
	[ "十国北汉", 951, 979, "北汉世祖 刘崇", "太原府（今山西太原）" ],

	[ "辽朝（契丹）", 916, 1125, "辽太祖 耶律阿保机", "上京（今内蒙古巴林左旗）" ],
	[ "北宋", 960, 1127, "北宋太祖 赵匡胤", "东京（今河南开封）" ],
	[ "西夏", 1038, 1227, "西夏景宗 李元昊", "兴庆【中兴】（今宁夏银川）" ],
	[ "南宋", 1127, 1279, "南宋高宗 赵构", "临安（今浙江杭州）" ],
	[ "金朝", 1115, 1234, "金太祖 完颜阿骨打", "中京（今北京市）" ],
	[ "大蒙古国", 1206, 1271, "蒙古（元）太祖 成吉思汗孛儿只斤·铁木真", "曲雕阿兰（今蒙古国肯特省）" ],

	[ "元朝", 1271, 1368, "元（蒙古）世祖 孛儿只斤·忽必烈", "大都（今北京市）" ],
	[ "明朝", 1368, 1644, "明太祖 朱元璋、明成祖 朱棣", "应天（今江苏南京）、京师（今北京市）" ],
	[ "后金", 1616, 1636, "后金（清） 太祖爱新觉罗·努尔哈赤", "盛京（今辽宁沈阳）" ],
	[ "大顺", 1644, 1644, "闯王 李自成", "应天（今江苏南京）、京师（今北京市）" ],
	[ "清朝", 1644, 1911, "清（后金）太宗 爱新觉罗·皇太极、清世祖顺治皇帝 爱新觉罗·福临", "盛京（今辽宁沈阳）、京师（今北京市）" ],

	[ "中华民国前期", 1911, 1915, "", "北平 （今北京市）" ],
	[ "中华帝国", 1915, 1916, "洪宪帝 袁世凯", "北平 （今北京市）" ],
	[ "伪满洲", 1932, 1945, "康德帝 爱新觉罗·溥仪", "应天（今江苏南京）、京师（今北京市）" ],
	[ "中华民国", 1916, 2019, "", "北平 （今北京市）" ],
	[ "中华人民共和国", 1949, 2019, "", "北京市" ],
];
var time_max = 2019;

// 提取Y轴的数组
var data_categories = [];
for(var i=0; i<data_chinese.length; i++){
	data_categories[i] = data_chinese[i][0];
}

function renderItem(params, api) {
	var categoryIndex = api.value(0);
	var start = api.coord([api.value(1), categoryIndex]);
	var end = api.coord([api.value(2), categoryIndex]);
	var height = api.size([0, 1])[1] * 0.6;

	var rectShape = echarts.graphic.clipRectByRect({
		x: start[0],
		y: start[1] - height / 2,
		width: end[0] - start[0],
		height: height
	}, {
		x: params.coordSys.x,
		y: params.coordSys.y,
		width: params.coordSys.width,
		height: params.coordSys.height
	});

	return rectShape && {
		type: 'rect',
		shape: rectShape,
		style: api.style()
	};
}

option = {

	// 设置图表的标题
	title: {
		text: '中国朝代更替图',
		left: 'left'
	},

	// 设置浮动提示框的内容
	tooltip: {
        axisPointer: {
            type: 'cross'
        },
		formatter: function (params) {
			var params_return = "";
			params_return += params.marker;
			params_return += params.name;
			params_return += '<br/>主要人物: '+ params.value[3];
			params_return += '<br/>主要地区: '+ params.value[4];
			params_return += '<br/>开始时间: ';
			if(params.value[1] < 0){ params_return += '公元前'+ Math.abs(params.value[1]) +'年'; }else{ params_return += Math.abs(params.value[1]) +'年'; }
			params_return += '<br/>结束时间: ';
			if(params.value[2] < 0){ params_return += '公元前'+ Math.abs(params.value[2]) +'年'; }else{ params_return += Math.abs(params.value[2]) +'年'; }
			return params_return; 
		}
	},

	// 设置X轴与Y轴的放大器
	dataZoom: [{
		yAxisIndex: [0],
		type: 'slider',
		show: true,
		realtime: true,
		start: 0,
		end: 20,
		left: '1%',
	},{
		xAxisIndex: [0],
		type: 'slider',
		show: true,
		realtime: true,
		start: 0,
		end: 100,
		bottom: '5%',
	}],

	// 设置图表外边框距
	grid: {
		top: '5%',
		bottom: '15%',
		left: '13%',
		right: '3%',
	},

	// 设置X轴的参数
	xAxis: {
		name: '年',
		splitNumber: 10,
		min: time_min,
		max: time_max,
		splitLine: {
			show: true
		},
        axisLabel: {
            formatter: function (val) {
				if(val < 0){ return 'BC'+ Math.abs(val) }else{ return Math.abs(val) }
            },
        },
	},

	// 设置Y轴的参数
	yAxis: {
		data: data_categories,
		scale: true,
		splitLine: {
			show: true
		}
	},

	// 设置图表内容
	series: [{
		type: 'custom',
		renderItem: renderItem,
		itemStyle: {
			normal: {
				opacity: 0.8
			}
		},
		encode: {
			x: [1, 2],
			y: 0
		},
		data: data_chinese,
	}],
};