UNIAPP微信小程序使用Echarts

前言

1.在uni-app中进行数据分析时使用到了echarts,于是在网上搜索了许多教程都很麻烦而且还没有效果对于我这样的小白来说简直是一种折磨.

2.因为我目前只用uni-app在进行微信小程序的学习其余的兼容性目前咱不晓得!!!下面记录一下我解决的方法

下载Echarts插件

1.插件地址:echarts-for-wx - DCloud 插件市场

点击确定!

2.导入插件以后会生成一个js_sdk文件夹

3.在项目中新建一个components文件夹然后将js_sdk文件夹下的uni-ec-canvas复制过去并右击components文件夹新建组件pieChart

4.pieChart组件内容如下:

<template>
	<view>
		<uni-ec-canvas class="uni-ec-canvas" id="uni-ec-canvas" ref="canvas" canvas-id="uni-ec-canvas" :ec="ec">
		</uni-ec-canvas>
	</view>
</template>

<script>
	import uniEcCanvas from '@/components/uni-ec-canvas/uni-ec-canvas.vue'
	import * as echarts from '@/components/uni-ec-canvas/echarts'
	let chart = null
	export default {
		components: {
			uniEcCanvas
		},
		props: {
			abnormal: {
				type: Number,
				// 定义是否必须传
				required: true,
				// 定义默认值
				default: 0
			},
			absence: {
				type: Number,
				// 定义是否必须传
				required: true,
				// 定义默认值
				default: 0
			},
		},
		data() {
			return {
				ec: {
					//是否懒加载
					lazyLoad: true
				},
			}
		},
		methods: {
			initChart(canvas, width, height, canvasDpr) {
				chart = echarts.init(canvas, null, {
					width: width,
					height: height,
					devicePixelRatio: canvasDpr
				})
				canvas.setChart(chart)
				var data=[{value:this.abnormal, name:'正常',"itemStyle":{"normal":{"color":"#00CCB8"}}},
					{value:this.absence, name:'异常',"itemStyle":{"normal":{"color":"#FFCB96"}}}];
				var dataName = data.reduce((per,cur,i)=>{per[i]=cur.name;return per},[]);
				var a=0;
				for(var i=0; i<data.length; i++)
				{
					a+=data[i].value;
				}
				data.push({value:a, name:'__other', itemStyle:{normal:{color:'rgba(0,0,0,0)'}}});
				let option = {
					legend: {
						orient: "horizontal",//图例的布局，水平布局、垂直布局
						icon:'circle',
						bottom:50,
						textStyle: {//图例字体样式
							color: "#00CCB8",
							fontSize: 15,
							fontFamily: "微软雅黑"
						},
						data:dataName,
						formatter: e =>{
							let val=0;
							data.forEach(el => {
								if(e == el.name) val = el.value
							});
							return `${e}${val}天`
						}
					},
					series : [
						{
							name: '上下班统计',
							type: 'pie',
							startAngle:-180,
							radius : '95%',
							center: ['50%', '60%'],
							data:data,
							itemStyle: {
								borderRadius:0,
								borderColor:'#fff',
								borderWidth:5
							},

							label: {
								normal: {
									show: false,
								},
							},
							labelLine: {
								normal: {
									show: false
								}
							},
						}
					]
				};
				chart.setOption(option)
				return chart
			},
		},
		mounted() {
			this.$refs.canvas.init(this.initChart)
		}
	}
</script>
<style>
	.uni-ec-canvas {
		width: 100%;
		height: 500rpx;
		display: block;
		margin-top: 30rpx;
	}
</style>

5,最后在pages文件夹下需要引入组件的页面中使用

<template>
	<view>
		<pie-chart :abnormal="abnormal" :absence="absence"></pie-chart>
	</view>
</template>

<script>
	import pieChart from '@/components/pieChart/pieChart.vue'
	let chart = null
	export default {
		components: {
			pieChart
		},
		data() {
			return {
				abnormal:10,
				absence:19,
			}
		},
	}
</script>

6.运行结果如下:

需要注意插件中内置的echarts.js源文件太大,但是一个项目用不到那么多的数据展示图,因此可以到ECharts 在线构建

中进行定制!!!版本尽量选择5.0以下的,因为高版本的我还没用过