Echarts在线免费图表

 
            let colors = [
					new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
							offset: 0,
							color: '#81D3F8'
						},
						{
							offset: 1,
							color: '#81D3F8'
						}
					]),
					new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
							offset: 0,
							color: '#30BD81'
						},
						{
							offset: 1,
							color: '#30BD81'
						}
					]),
					new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
							offset: 0,
							color: '#FDA700'
						},
						{
							offset: 1,
							color: '#FDA700'
						}
					]),
					new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
							offset: 0,
							color: '#99FF99'
						},
						{
							offset: 1,
							color: '#99FF99'
						}
					]),
					new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
							offset: 0,
							color: '#FFFF02'
						},
						{
							offset: 1,
							color: '#FFFF02'
						}
					])
				];
				let textColors = ['#81D3F8', '#30BD81', '#FDA700', '#99FF99' , '#FFFF02'];
				let datas = [{
					name: '招投标',
					value: 1,
					unit1: '个',
					jointorder: '占比',
					value2: 20,
					unit2: '%'

				}, {
					name: '规划中',
					value: 2,
					unit1: '个',
					jointorder: '占比',
					value2: 30,
					unit2: '%'
				}, {
					name: '建设中',
					value: 3,
					unit1: '个',
					jointorder: '占比',
					value2: 40,
					unit2: '%'
				},{
					name: '已完工',
					value: 3,
					unit1: '个',
					jointorder: '占比',
					value2: 40,
					unit2: '%'
				}];
				let option = {
					backgroundColor: "#040F25",
					title: {
		text: '总数量\n2230',
		top: '45%',
		left: '50%',
		textAlign: 'center',
		textStyle: {
			color: 'white',
			fontSize: '24px',
			lineHeight: 30
		}
	},
					tooltip: {
						trigger: 'item',
						formatter: '{b}\n{c}条',
						backgroundColor: 'rgba(8,49,107,0.9)', //设置背景颜色
						borderColor: 'rgba(8,49,107,0.9)', //设置边框颜色
						textStyle: {
							color: 'white' //设置文字颜色
						}
					},
					legend: {
					  left: 'left',
					  bottom: 0,    
					  data: ['A类事件', 'B类事件', 'C类事件', '三星事件', '五星事件'],
					  itemWidth: 10, // 设置宽度
					  itemHeight: 8, // 设置高度
					  itemGap: 8, // 设置间距
					  textStyle: {
					    color: '#fff',// 文字颜色
					    fontFamily: 'Source Han Sans CN', // 字体系列
					    fontSize: 12 // 字体大小
					  }
					},
					series: [{
						type: 'pie',
						center: ['50%', '50%'],
						radius: ['45%', '65%'],
						itemStyle: {
							color: params => {
								return colors[params.dataIndex];
							}
						},
						label: {
							show: true,
							width: 250,
							truncate: 'none',
							formatter: params => {
								let color = 'blue';
								let showText = `${params.name}\n${params.value}`;
								let showSubText = `${params.jointorder}${params.value2}`;
								let currentSubject=datas.find(item=>item.name==params.name);
								if (params.dataIndex === 0) {
									color = 'purple';
									showText = `${params.name}{${color}|${params.value}}个`;
									showSubText = `${currentSubject.jointorder}{${color}|${currentSubject.value2}}%`;
								} else if (params.dataIndex === 1) {
									color = 'green';
									showText = `${params.name}{${color}|${params.value}}个`;
									showSubText = `${currentSubject.jointorder}{${color}|${currentSubject.value2}}%`;
								} else if (params.dataIndex === 2) {
									color = 'blue';
									showText = `${params.name}{${color}|${params.value}}个`;
									showSubText = `${currentSubject.jointorder}{${color}|${currentSubject.value2}}%`;
								} else if (params.dataIndex === 3) {
									color = 'cyan';
									showText = `${params.name}{${color}|${params.value}}个`;
									showSubText = `${currentSubject.jointorder}{${color}|${currentSubject.value2}}%`;
								} else if (params.dataIndex === 4) {
									color = 'yellow';
									showText = `${params.name}{${color}|${params.value}}个`;
									showSubText = `${currentSubject.jointorder}{${color}|${currentSubject.value2}}%`;
								} else if (params.dataIndex === 5) {
									color = 'yellow';
									showText = `其他`;
								}
								const circle = 'hr' + color.slice(0, 1).toUpperCase() + color.slice(1)
									.toLowerCase();
								return `${showText}\n{${circle}|}\n${showSubText}`;
							},
							color: '#fff',
							fontSize: 12,
							lineHeight: 15,
							rich: {
								yellow: {
									color: textColors[4],
									fontSize: 12
								},
								cyan: {
									color: textColors[3],
									fontSize: 12
								},
								green: {
									color: textColors[1],
									fontSize: 12
								},
								blue: {
									color: textColors[2],
									fontSize: 12
								},
								purple: {
									color: textColors[0],
									fontSize: 12
								},
								hrYellow: {
									backgroundColor: textColors[4],
									borderRadius: 3,
									width: 3,
									height: 3,
									padding: [3, 3, 0, 0]
								},
								hrGreen: {
									backgroundColor: textColors[1],
									borderRadius: 3,
									width: 3,
									height: 3,
									padding: [3, 3, 0, 0]
								},
								hrCyan: {
									backgroundColor: textColors[3],
									borderRadius: 3,
									width: 3,
									height: 3,
									padding: [3, 3, 0, 0]
								},
								hrBlue: {
									backgroundColor: textColors[2],
									borderRadius: 3,
									width: 3,
									height: 3,
									padding: [3, 3, 0, 0]
								},
								hrPurple: {
									backgroundColor: textColors[0],
									borderRadius: 3,
									width: 3,
									height: 3,
									padding: [3, 3, 0, 0]
								}
							}
						},
						labelLine: {
							length: 10,
							length2: 10,
							lineStyle: {
								width: 1
							}
						},
						data: datas,
						z: 0
					}]
				};