Echarts在线免费图表

 
            // 数据
const data = {
	name: 'XX第二医院',
	rank: 0,
	people: 500,
	children: [{
			name: '呼吸内科',
			rank: 1,
			people: 100,
			collapsed: false
		},
		{
			name: '内分泌科',
			rank: 2,
			people: 100,
			collapsed: false
		},
		{
			name: '心内科',
			rank: 3,
			people: 100,
			collapsed: false
		},
		{
			name: '骨科',
			rank: 4,
			people: 100,
			collapsed: false
		},
		{
			name: '普外科',
			rank: 5,
			people: 100,
			collapsed: false,
			children: [{
					name: '麻醉',
					rank: 6,
					people: 20,
					collapsed: true
				},
				{
					name: '护理',
					rank: 7,
					people: 20,
					collapsed: true
				},
				{
					name: '放射',
					rank: 8,
					people: 20,
					collapsed: true
				},
				{
					name: '材料',
					rank: 9,
					people: 20,
					collapsed: true
				},
				{
					name: '病例',
					rank: 10,
					people: 20,
					collapsed: true
				}
			]
		},
	]
};
// 数图配置项
var option = {
   backgroundColor: "#fff",
	series: [{
		type: 'tree',
		data: [data],
		top: '1%',
		left: '20%',
		bottom: '1%',
		right: '20%',
		symbolSize: 7,
		label: {
			position: 'left',
			verticalAlign: 'middle',
			align: 'left',
			fontSize: 12,
			backgroundColor: '#7049f0',
			color: '#fff',
			borderRadius: 5,
			width: 200,
			formatter: function(params) {
				return [
					`{name|${params.data.name}}
`,
					`{subtitle|排名：${params.data.rank}}
`,
					`{subtitle|人数：}`,
					`{num|${params.data.people}}`,
					`{padding|}`
				].join('');
			},
			rich: {
				name: {
					fontSize: 15,
					fontWeight: 'bold',
					padding: [10, 20]
				},
				subtitle: {
					padding: [0, 20, 5, 20]
				},
				num: {
					color: 'yellow',
					padding: [0, 0, 5, -20]
				},
				padding: {
					padding: [5, 0]
				}
			}
		},
		leaves: {
			label: {
				position: 'left',
				verticalAlign: 'middle',
				align: 'left'
			}
		},
		emphasis: {
			focus: 'descendant'
		},
		edgeShape: 'polyline', // 折线连接线
		roam: true, // 可移动,可缩放
		expandAndCollapse: true,
		animationDuration: 550,
		animationDurationUpdate: 750
	}]
};