【uniapp】中 微信小程序实现echarts图表组件的封装

 插件地址：echarts-for-uniapp - DCloud 插件市场

图例：

一、uniapp 安装 

npm i uniapp-echarts --save

 二、文件夹操作

将 node_modules 下的 uniapp-echarts 文件夹复制到 components 文件夹下

 当前不操作此步骤的话，运行 -> 运行到小程序模拟器 -> 微信开发者工具 时，echarts图表显示不出来

原因：运行到小程序打包过程中，此插件不在小程序文件包内

三、地址引入

根据当前插件放的地址进行引入

import * as echarts from "@/components/uniapp-echarts/static/echarts.min.js";
import uniChart from "@/components/uniapp-echarts/components/uni-chart/uni-chart.vue"; 

四、组件封装 echartLine.vue

<template>
  <view class="content">
    <uniChart :option="person.option" />
  </view>
</template>

<script setup>
import { reactive, shallowRef, onMounted } from 'vue'
import * as echarts from "@/components/uniapp-echarts/static/echarts.min.js";
import uniChart from "@/components/uniapp-echarts/components/uni-chart/uni-chart.vue"; 

const props = defineProps({
    id: {
        type: String,
        required: true
    },
    datas:{
        type: Array,
        required: true
    }
})
let person=reactive({
	userScore:[],
	userAvgScore:[], 
	xTime:[], // x轴数据
	max: 600, // 最大数值
    option: {}
})

onMounted(()=>{
    load()
    GetEchar()
})
const load=()=>{
    // 指定配置项和数据
    person.userScore = props.datas.map(f => { return f.score })
    person.userAvgScore = props.datas.map(f => { return f.avgScore })
    person.xTime = props.datas.map(f => { return f.name })
}

const GetEchar = () => {
	person.option = {
	  tooltip: {
		trigger: 'axis',
		formatter: function (params) {
		  return params[0].name+'\n'
		  +option.legend.data[0].name+'：'+person.userScore[params[0].dataIndex]+'分\n'
		  +option.legend.data[1].name+'：'+person.userAvgScore[params[0].dataIndex]+'分'
		}
	  },
	  legend: {
		data: [
		  { name: '学生/张小雨', icon: 'circle' },
		  { name: '年级平均', icon: 'circle' }
		],
		icon: 'circle',
		y: 'bottom',
		itemWidth: 12, //宽度
		itemHeight: 12, //高度
		itemGap: 25, //间距
		textStyle: {
		  color: '#333',
		  fontSize: 12,
		  lineHight: 40
		}
	  },
	  grid: {
		top: '3%',
		left: '3%',
		right: '5%',
		bottom: '12%',
		containLabel: true
	  },
	  xAxis: [
		{
		  type: 'category',
		  axisTick: {
			show:false
		  },
		  axisLine: {
			onZero: false,
			lineStyle: {
			  color: '#2A2A2A',
			  width: 2
			}
		  },
		  axisLabel: {
			//坐标轴刻度标签的相关设置。
			textStyle: {
			  color: '#6F6F70',
			  fontSize: 12
			},
			formatter: function (params) {
			  return params;
			}
		  },
		  data: person.xTime
		}
	  ],
	  yAxis: [
		{
		  type: 'value',
		  axisTick: {
			show:false
		  },
		  axisLine: {
			show:false
		  },
		  max: person.max,
		  min: 0,
		  // y轴文字颜色
		  axisLabel: {
			textStyle: {
			  color: '#6F6F70',
			  fontSize: 12
			}
		  },
		  splitLine: {
			show: true,
			lineStyle: {
			  color: ['#5E5E5E'],
			  width: 1,
			  type: 'dashed'
			}
		  }
		}
	  ],
	  series: [
		{
		  name: '学生/张小雨',
		  type: 'line',
		  symbol: 'circle', //拐点样式
		  symbolSize: 4, //拐点大小
		  // 折线拐点的样式
		  itemStyle: {
			normal: {
			  // 静止时：
			  color: '#6B86FF',
			  borderColor: '#6B86FF', //拐点的边框颜色
			  borderWidth: 2
			},
			emphasis: {
			  // 鼠标经过时：
			  color: '#fff'
			}
		  },
		  data: person.userScore
		},
		{
		  name: '年级平均',
		  type: 'line',
		  symbol: 'circle', //拐点样式
		  symbolSize: 4, //拐点大小
		  // 折线拐点的样式
		  itemStyle: {
			normal: {
			  // 静止时：
			  color: '#FFA755',
			  borderColor: '#FFA755', //拐点的边框颜色
			  borderWidth: 2
			},
			emphasis: {
			  // 鼠标经过时：
			  color: '#fff'
			}
		  },
		  data: person.userAvgScore
		}
	  ]
	};
}
</script>
<style>
.content {
    width: 375px;
    height: 250px;
}
</style>

五、页面调用

<EchartLine v-if="person.studentScore && person.studentScore.length > 0" :id="'studentGrade'" :datas="person.studentScore" />

<script setup>
import { reactive } from 'vue'
import EchartLine from "@/components/echarts/echartLine.vue"

let person=reactive({
	// 学生总成绩
	studentScore:[
		{name:'7月5日',score:10,avgScore:90},
		{name:'7月6日',score:93,avgScore:80},
		{name:'7月7日',score:60,avgScore:70},
		{name:'7月8日',score:50,avgScore:70},
		{name:'7月9日',score:86,avgScore:50}
	]
})
</script>

六、避坑

1、解决echarts层级太高 

在手机端运行时，出现 echarts层级太高，导致滑动到图表上时，滑不动的情况

解决方法：

在复制的 uniapp-echarts 文件夹包下，找到 components -> uni-chart  ->  uni-chart.vue 文件，添加 scroll-view 将 canvas 标签包裹一层，其中 canvas 要有@touchstart ，否则真机不生效。

如下代码

<!-- #ifdef MP-WEIXIN || MP-QQ -->
<scroll-view :scroll-top="scrollTop" scroll-y="true" class="scroll-Y"
	@scrolltoupper="upper" @scrolltolower="lower" @scroll="scroll">
	<canvas
		v-if="useNewCanvas"
		type="2d"
		:id="canvasId"
		class="uni-canvas"
		:canvas-id="canvasId"
		@click="click"
		@touchstart="touchStart"
		@touchmove.stop="touchMove"
		@touchend="touchEnd"
		force-use-old-canvas="true"
	/>
	<canvas
		v-else
		:id="canvasId"
		class="uni-canvas"
		:canvas-id="canvasId"
		@click="click"
		@touchstart="touchStart"
		@touchmove.stop="touchMove"
		@touchend="touchEnd"
		force-use-old-canvas="true"
	/>
</scroll-view>
<!-- #endif -->

同时需要修改样式

<style>
.scroll-Y{
	height: 100%;
	position: relative;
	left: 50%;
	transform: translate(-50%);
}
.uni-canvas {
	width: 100%;
	height: 100%;
	display: block;
	z-index: -1 !important;
}
</style>

    希望我的愚见能够帮助你哦~，若有不足之处，还望指出，你们有更好的解决方法，欢迎大家在评论区下方留言支持，大家一起相互学习参考呀~