开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第1天,点击查看活动详情

1. 需求: 饼状图和柱状图,并且多个页面都需引用

2.首先把下载的文件夹放在components组件问价夹里

 https://github.com/Zhuyi731/echarts-for-wx-uniapp

3. 组件页面引入文件夹

import uniEcCanvas from '@/components/reportManagement/uni-ec-canvas/uni-ec-canvas.vue'
import * as echarts from '@/components/reportManagement/uni-ec-canvas/echarts'

export default {
		components: {
			uniEcCanvas
		}
                }
                

4.组件html部分

5.父页面html部分

6.父页面data部分

  import outReport from "@/components/reportManagement/outReport.vue"
	import uniEcCanvas from '@/components/reportManagement/uni-ec-canvas/uni-ec-canvas.vue'
	import * as echarts from '@/components/reportManagement/uni-ec-canvas/echarts'
	let chart = null
	import {
		imStockInReport,
		imStockInList
	} from '@/request/api/reportManagement/inReport.js';
	import {
		locationList,
		houseList
	} from '@/request/api/common/common.js';
	import {
		getFoodUser
	} from '@/utils/token.js';
	import {getNowFormatDate} from '@/utils/array.js';
	export default {
		components: {
			outReport,
			uniEcCanvas
		},
		data() {
			return {
				size: '',
				page: 1,
				houseList: [],
				locationList: [],
				loading: false,
				storePointId: '',
				storeHouseId: '',
				beginDate:'',
				endDate:'',
				oneDate:getNowFormatDate(),
				inData: {},
				materialList: [],
				warehousing: [],
				ec: {
					lazyLoad: true
				},
				lineShow:true,
				pieShow:true,
				scrollTop: 0,
				pieOption: {
					tooltip: {
						trigger: 'item'
					},
					legend: {
						bottom: '5%',
						left: 'center'
					},
					series: [{
						type: 'pie',
						radius: ['30%', '50%'],
						center: ['50%', '45%'],
						label: {
							formatter: '{name|{b}}\n({value|{c}})',
							minMargin: 5,
							edgeDistance: 10,
							lineHeight: 15,
							rich: {
								value: {

								},
							}
						},
						itemStyle: {
							normal: {
								//每根柱子颜色设置
								color: function(params) {
									const colorList = ["#5470c6", "#91cc75", "#fac858", "#ee6666",
										"#73c0de"
									];
									return colorList[params.dataIndex];
								}
							}
						},
						emphasis: {
							itemStyle: {
								shadowBlur: 10,
								shadowOffsetX: 0,
								shadowColor: 'rgba(0, 0, 0, 0.5)'
							}
						},
						labelLine: {
							show: true
						},
						data: []
					}]
				}
			}
		}

7.父页面请求数据

onLoad() {
			this.getInReportList()
		},
		
		methods: {
			getInReportList() {
				imStockInReport({
						type: 2,
						roleId: getFoodUser().roleId,
						storePointId: this.storePointId,
						storeHouseId: this.storeHouseId,
						beginDate: this.beginDate == '' ? this.oneDate : this.beginDate,
						endDate: this.endDate == ''?  this.oneDate : this.endDate 
					})
					.then(res => {
						this.inData = res.inData
						this.materialList = res.materialList
						if (res.supplierData.length > 0) {
							this.pieOption.series[0].data = []
							res.supplierData.forEach(val => {
								this.pieOption.series[0].data.push({
									value: val.sumQty,
									name: val.customerName
								})
							})
							this.$nextTick(()=>{
								this.$refs.inReport.$refs.pieCanvas.init(this.initPieChart)
							})
							this.pieShow = true
						}else {
							this.pieShow = false
						}
						this.loading = true
					});
			},
			initPieChart(canvas, width, height, canvasDpr) {
				console.log(canvas, width, height, canvasDpr)
				chart = echarts.init(canvas, null, {
					width: width,
					height: height,
					devicePixelRatio: canvasDpr
				})
				canvas.setChart(chart)
				chart.setOption(this.pieOption)
				return chart
			},
		}