echarts 仪表盘半圆 渐变显示

 

"echarts": "^5.2.0", vue2.6

<template>
	<div :class="className" :style="{height:height,width:width}" id="myChart6" />
</template>

<script>
	import * as echarts from 'echarts';
	import resize from '@/utils/resize.js'

	export default {
		props: {
			className: {
				type: String,
				default: 'chart'
			},
			width: {
				type: String,
				default: '31vw'
			},
			height: {
				type: String,
				default: '23vh'
			},
			chartData: {
				type: Array,
				required: true
			},

		},
		data() {
			return {
				timer: 0,
			}
		},
		watch: {
			chartData: {
				deep: true,
				handler(val) {
					this.setOption(val)
				}
			},

		},
		mounted() {
			
			this.initChart();
		},
		beforeDestroy() {
			
		},
		methods: {
			
			initChart() {
				var myChart = echarts.init(document.getElementById('myChart6'));
				var option = {

					series: [{
							type: 'gauge',
							radius: '90%',
							center: ['50%', '60%'],
							startAngle: 180,
							endAngle: 0,
							min: 0,
							max: 100,
							splitNumber: 10,
							itemStyle: {
								color: '#1233A9'
							},
							progress: {
								show: true,
								width: 30
							},
							// pointer: {
							//   show: false
							// },
							pointer: {
								icon: 'path://M12.8,0.7l12,40.1H0.7L12.8,0.7z',
								length: '12%',
								width: 20,
								offsetCenter: [0, '-60%'],
								itemStyle: {
									color: 'auto'
								}
							},
							axisLine: {
								lineStyle: {
									width: 30,
									color: [
										[0.3, '#0F2864'],
										[0.7, '#0F2864'],
										[1, '#0F2864']
									]
									// color:['#0D257A'],
								},

							},
							axisTick: {
								distance: -45,
								splitNumber: 5,
								lineStyle: {
									width: 1,
									color: '#2FB5C0'
								}
							},
							splitLine: {
								distance: -48,
								length: 8,
								lineStyle: {
									width: 2,
									color: '#2FB5C0'
								}
							},
							axisLabel: {
								distance: 5,
								color: '#fff',
								fontSize: 12
							},
							anchor: {
								show: false
							},
							title: {
								show: false
							},
							detail: {
								valueAnimation: true,
								width: '100%',
								lineHeight: 30,
								borderRadius: 8,
								offsetCenter: [0, '-25%'],
								fontSize: 30,
								// fontWeight: 'bolder',
								// formatter: '{value} %',
								formatter: function(value) {
									return value + '%' + '\n' + '{dw|办结率}';
								},
								rich: {
									// 直接显示值写法
									value: {
										lineHeight: 20
									},
									dw: {
										fontSize: 16,
										textAlign: 'center',
										color: "#fff",
									},
								},
								color: '#fff'
							},
							data: [{
								value: 60
							}]
						},
						{
							type: 'gauge',
							radius: '90%',
							center: ['50%', '60%'],
							startAngle: 180,
							endAngle: 0,
							min: 0,
							max: 100,
							itemStyle: {
								color: {
									// color: '#2FAFBD'
									colorStops: [{
											offset: 0.1,
											color: 'rgba(47, 178, 191, 0.8)', // 0% 处的颜色
										},
										{
											offset: 0.5,
											color: 'rgba(41, 126, 124, 0.5)', // 100% 处的颜色
										},
										{
											offset: 1,
											color: 'rgba(34, 70, 135, 0.95)', // 100% 处的颜色
										},
									],
								}
							},
							progress: {
								show: true,
								width: 22
							},
							pointer: {
								// icon: 'path://M12.8,0.7l12,40.1H0.7L12.8,0.7z',
								length: '22%',
								width: 5,
								offsetCenter: ['2%', '-80%'],
								itemStyle: {
									color: '#30B8C2'
								}
							},
							// pointer: {
							//   show: false
							// },
							axisLine: {
								show: false
							},
							axisTick: {
								show: false
							},
							splitLine: {
								show: false
							},
							axisLabel: {
								show: false
							},
							detail: {
								show: false
							},
							data: [{
								value: 60
							}]
						}
					]

				};

				myChart.setOption(option);

				window.addEventListener('resize', function() {
					myChart.resize()
				})
				// window.addEventListener('resize', myChart.resize);


			},

		}
	}
</script>