echarts uniapp 如何使用echarts做统计图

这是第一版   引入了echarts.min.js 可以自行去官网下载

<template>
	<view class="ak-data">
		<view class="ak-index-data">
			<view class="ak-data-status-box">
				<view class="ak-data-status">
					<view class="ak-data-title">
						<view class="ak-data-basic"></view>
						<view class="ak-status-title">曲房数量统计</view>
					</view>
					<view class="ak-status-tabs">
						<view class="ak-status-list">
							<view class="ak-status-icon" style="background: #3188F3;"></view>
							<view>正常</view>
						</view>
						<view class="ak-status-list">
							<view class="ak-status-icon" style="background: #FAD867;"></view>
							<view>停机</view>
						</view>
						<view class="ak-status-list">
							<view class="ak-status-icon" style="background: #E63900;"></view>
							<view>故障</view>
						</view>
					</view>
				</view>
				<view class="ak-echarts-list">
					<view :prop="normal" id="Necharts" :change:prop="echarts.updateEcharts" class="ak-normal-count"></view>
					<view :prop="watting" id="Wecharts" :change:prop="echarts.updateEcharts" class="ak-normal-count"></view>
					<view :prop="fault" id="Fecharts" :change:prop="echarts.updateEcharts" class="ak-normal-count"></view>
				</view>
			</view>
			
			
			<view class="ak-data-insption">
				<view class="ak-data-title">
					<view class="ak-data-basic"></view>
					<view class="ak-status-title">巡检次数统计</view>
				</view>
				<!-- <view style="width: 800rpx; overflow: scroll;"> -->
				<view :prop="insOption" id="insEcharts" :change:prop="echarts.updateEcharts" style="height: 400rpx; font-size: 18rpx;"></view>
				<!-- </view> -->
			</view>
			
			
			<view class="ak-data-insption" v-if="isShow">
				<view class="ak-data-title">
					<view class="ak-data-basic"></view>
					<view class="ak-status-title">报警类别统计</view>
				</view>
				<view :prop="type" id="typeEcharts" :change:prop="echarts.updateEcharts" style="height: 380rpx; margin: 20rpx 0"></view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [],
				number: 0,
				isShow: true,
				type: {
					legend: {
						orient: 'vertical',
						left: 'right'
					},
					series: [{
					 // name: 'Nightingale Chart',
						type: 'pie',
						radius: [40, 60],
						center: ['42%', '64%'],
						// roseType: 'area',
						labelLine: {
							length2: 5
						},
						itemStyle: {
							emphasis: {
								shadowBlur: 10,
								shadowOffsetX: 0,
								shadowColor: 'rgba(0, 0, 0, 0.5)'
							},
							normal: {
								label: {
									show: true,
									formatter: '{d}%'
								},
								labelLine: {
									show: true
								}
							}
						},
						data: [{
					 		  value: 0,
								name: '电器故障'
							},
							{
								value: 0,
								name: '机械故障'
							},
							{
								value: 0,
								name: '物料原因故障'
							}
						]
					}]
				},
				insOption: {
					tooltip: {
						trigger: 'axis',     
						axisPointer: {
							type: 'shadow'
						}
					},
					grid: {
						top: 15,
						bottom: 33
					},
					legend: {},
				
					xAxis: {
						nameTextStyle: {
							fontSize: 8
						},
						axisLabel: {
							interval: 0, //如果设置为 1，表示『隔一个标签显示一个标签』，如果值为 2，表示隔两个标签显示一个标签，以此类推。
				
							rotate: '-45', // 刻度标签旋转的角度,在类目轴的类目标签显示不下的时候可以通过旋转防止标签之间重叠。
				
						},
						data: ['03月', '蒸炉2', '蒸炉3', '蒸炉4', '蒸炉5', '蒸炉6', '蒸炉7']
					},
					yAxis: [{
						type: 'value'
					}],
					series: [{
							type: 'bar',
							stack: 'Ad',
							barWidth: 10,
							itemStyle: {
								color: '#FFF31C'
							},
							emphasis: {
								focus: 'series'
							},
							data: [20, 18, 19, 23, 29, 33, 31]
						},
						{
							type: 'bar',
							stack: 'Ad',
							barWidth: 20,
							itemStyle: {
								color: '#3E7CEB'
							},
							emphasis: {
								focus: 'series'
							},
							data: [15, 23, 20, 15, 19, 33, 41]
						}
					]
				},
				normal: {
					series: [{
						type: 'gauge',
						startAngle: 90,
						endAngle: -270,
						pointer: {
							show: false
						},
						progress: {
							show: true,
							overlap: false,
							roundCap: true,
							itemStyle: {
								color: 'rgb(49, 136, 243)',
							}
						},
						axisLine: {
							lineStyle: {
								width: 5
							}
						},
						splitLine: {
							show: false,
							distance: 0,
							length: 10
						},
						axisTick: {
							show: false
						},
						axisLabel: {
							show: false,
						},
						data: [{
							value: 50,
							detail: {
								offsetCenter: ['0%', '0%']
							}
						}],
						title: {
							fontSize: '14rpx'
						},
						detail: {
							fontSize: '15rpx',
							color: '#333',
							formatter: '{value}'
						}
					}]
				},
				watting: {
					series: [{
						type: 'gauge',
						startAngle: 90,
						endAngle: