Echarts在线免费图表

 
            var chartData = {
	value: 30,
	total: 100,
};

let max = chartData.total;
let value = chartData.value;
option = {
      backgroundColor:"#daf3fd",
	title: {
		text: (value || '-') + '%',
		x: 'center',
		y: 'center',
		textStyle: {
			color: '#333333',
			fontSize: '80',
			fontWeight: '600',
		},
	},
	angleAxis: {
		axisLine: {
			show: false,
		},
		axisLabel: {
			show: false,
		},
		splitLine: {
			show: false,
		},
		axisTick: {
			show: false,
		},
		min: 0,
		max: 100,
		startAngle: 90,
	},
	radiusAxis: {
		type: 'category',
		axisLine: {
			show: false,
		},
		axisTick: {
			show: false,
		},
		axisLabel: {
			show: true,
		},
		data: [],
	},
	polar: {
		radius: '150%',
		center: ['50%', '50%'],
	},
	series: [
		// 极坐标系下柱状图
		// 实际值
		{
			type: 'bar',
			data: [value],
			z: 1,
			coordinateSystem: 'polar',
			barMaxWidth: 35,
			name: '采纳率',
			roundCap: 1,
			color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
					offset: 0,
					color: '#0062d8'
				},
				{
					offset: 0.5,
					color: '#008cec'
				},
				{
					offset: 1,
					color: '#5bd9ff'
				}
			])
			// color: 'rgba(97,93,228,1)',
		},
		// 背景图形
		{
			type: 'bar',
			data: [max],
			z: 0,
			silent: true,
			coordinateSystem: 'polar',
			barMaxWidth: 35,
			roundCap: true,
			color: '#cee7f9',
			barGap: '-100%',
		},
		// 尾端小圆点 饼图
		{
			type: 'pie',
			// 饼图大小跟外层极坐标系相同，需手动调试
			radius: '150%',
			center: ['50%', '50%'],
			hoverAnimation: false,
			startAngle: 180,
			endAngle: 0,
			silent: 1,
			z: 10,
			data: [
				// 实际值，背景色透明
				{
					name: '',
					value: value > 75 ? (25 - (100 - value)) / max : (25 + value) / 100,
					label: {
						show: false,
					},
					labelLine: {
						show: false,
					},
					itemStyle: {
						color: 'transparent',
					},
				},
				{
					// 画中间的图标
					value: 0,
					label: {
						position: 'inside',
						backgroundColor: '#0060ce',
						borderRadius: 15,
						padding: 15,
						borderWidth: 8,
						borderColor: '#ffffff',
					},
				},
				// 透明填充 angleAxis 的max相同 max : 2
				{
					value: value > 75 ? 1 - (25 - (100 - value)) / max : 1 - (25 + value) / 100,
					label: {
						show: false,
					},
					labelLine: {
						show: false,
					},
					itemStyle: {
						color: 'transparent',
					},
				},
			],
		}
	],
};