UNIAPP微信小程序使用Echarts

UNIAPP微信小程序使用Echarts

1. 前言

​ 最近要在uniapp做的小程序中使用echarts，网上搜了很多教程都很麻烦，这里提供一种简便快捷CV方案。

​ 先说下图表选型的问题，如果你只用于微信小程序，可以使用本方案，Echarts丰富多样的图表和广大的开源图库都已使用。如果要考虑兼容性问题，比如兼容支付宝小程序、APP、百度小程序……这里推荐使用uchart。缺点就是图表样式没有Echarts丰富。

2. 下载EchartsForWx插件

需要首先确保本机安装了Hbuilder

1. 打开插件市场的**echarts-for-wx**插件。点击使用Hbuilder导入插件。

2. 导入插件后，在项目目录会有一个js_sdk的文件夹生成。复制js_sdk下的uni-ec-canvas到根目录的components目录。

3. 自定义Echarts组件

​ 在根目录的components文件夹下此时已经有了一个uni-ec-canvas的组件。我们这里新建一个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>

4. 使用组件

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

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

5. 效果图

6. Echarts各式各样的定制化图表

1. Made A Pie https://madeapie.com 复刻Make A Pie
2. Echarts社区makeapie https://www.makeapie.cn/echarts 复刻Make A Pie
3. MCChart http://echarts.zhangmuchen.top/#/index
4. PPChart http://ppchart.com/
5. ISQQW https://www.isqqw.com/homepage
6. chartsdev http://chartsdev.com/ 复刻Make A Pie