echarts仪表盘

<!-- echartscom.vue -->
<template>
	<div class="charttest">
		<div style="width:180px;height:160px;" :id="echarts" class="echarts" ref="echarts">
		</div>
	</div>
</template>

<script>
	let echarts = require('echarts/lib/echarts')
	// 引入柱状图组件
	require('echarts/lib/chart/gauge')
	// 引入提示框和title组件
	require('echarts/lib/component/tooltip')
	require('echarts/lib/component/title')
	export default {
		//接收的数值
		props: {
			totalCount: {
				default: ''
			},
			totalCountMax: {
				default: ''
			},
		},
		name: 'echartscom',
		data() {
			return {
				tUnDeal: '22',
				tDealing: '44',
				tDealed: '3',
				totalValue: '',
				totalMaxValue: '',
			};
		},
		mounted() {

			if (this.totalValue != null) {
				this.drawCharts();
			}
		},
		watch: {
			//对接收的数值进行监听
			totalCount: {
				immediate: true,
				handler: function(value) {
					this.totalValue = value;
				}
			},
			totalCountMax: {
				immediate: true,
				handler: function(value) {
					this.totalMaxValue = value;
				}
			},
			//判断有数值在进行方法调用渲染
			totalValue: function() {
				if (this.totalValue != null) {
					this.drawCharts()
				}
			}
		},
		methods: {
			drawCharts() {
				var myChart = echarts.init(document.getElementById(this.echarts));
				let option = {
					series: [{
						//半径
						radius: 85,
						type: 'gauge',
						min: 0,
						//仪表盘最大值，更换为自己的数字
						max: this.totalMaxValue,
						//起始角度。圆心 正右手侧为0度，正上方为90度，正左手侧为180度。
						startAngle: 210,
						//结束角度。
						endAngle: -30,
						//显示刻度值的数量
						splitNumber: 1,
						center: ['50%', '60%'],
						itemStyle: {
							//完成的环度的渐变色
							normal: {
								color: {
									colorStops: [{
										offset: 0,
										color: '#2783CD' // 0% 处的颜色
									}, {
										offset: 1,
										color: '#0EFCFF' // 100% 处的颜色
									}],
								}
							},
							shadowColor: 'rgba(0,138,255,0.45)',
							shadowBlur: 10,
							shadowOffsetX: 2,
							shadowOffsetY: 2
						},
						progress: {
							show: true,
							//两端是否是圆弧
							roundCap: false,
							//仪表盘线的宽度
							width: 30
						},
						
						//指针我这边没有用到，就设置了show: false,
						pointer: {
							icon: 'path://M2090.36389,615.30999 L2090.36389,615.30999 C2091.48372,615.30999 2092.40383,616.194028 2092.44859,617.312956 L2096.90698,728.755929 C2097.05155,732.369577 2094.2393,735.416212 2090.62566,735.56078 C2090.53845,735.564269 2090.45117,735.566014 2090.36389,735.566014 L2090.36389,735.566014 C2086.74736,735.566014 2083.81557,732.63423 2083.81557,729.017692 C2083.81557,728.930412 2083.81732,728.84314 2083.82081,728.755929 L2088.2792,617.312956 C2088.32396,616.194028 2089.24407,615.30999 2090.36389,615.30999 Z',
							length: '75%',
							width: 16,
							offsetCenter: [0, '5%'],
							show: false,
						},
						axisLine: {
							//两端是否是圆弧
							roundCap: false,
							lineStyle: {
								//仪表盘线的宽度
								width: 30,
								color: [
									[1, new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
											offset: 0.1,
											color: "#051C48"
										},
										{
											offset: 0.6,
											color: "#051C48"
										},
										{
											offset: 1,
											color: "#051C48"
										}
									])]
								]
							},

						},
						axisTick: {
							splitNumber: 50,
							show: false,
							lineStyle: {
								width: 50,
								color: '#999'
							}
						},
						//分隔线样式。
						splitLine: {
							length: 12,
							lineStyle: {
								width: 3,
								color: '#999'
							},
							show: false,
						},
						axisLabel: {
							//内边刻度距离
							distance: 15,
							color: '#fff',
							fontSize: 12,


						},
						title: {
							show: false
						},
						detail: {
							width: '50%',
							borderRadius: 8,
							offsetCenter: [-5, '-5%'],
							valueAnimation: true,
							color: '#00EDFF',
						},
						data: [{
							//仪表盘的数值
							value: this.totalValue
						}]
					}]
				};
				myChart.setOption(option)
			}
		},
		computed: {
			echarts() {
				return 'echarts' + Math.random() * 100000;
			}
		},

		components: {}
	};
</script>

<style></style>