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

这篇具有很好参考价值的文章主要介绍了【uniapp】中 微信小程序实现echarts图表组件的封装。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

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

图例:

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

一、uniapp 安装 

npm i uniapp-echarts --save

 二、文件夹操作

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

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

 当前不操作此步骤的话,运行 -> 运行到小程序模拟器 -> 微信开发者工具 时,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>

    希望我的愚见能够帮助你哦~,若有不足之处,还望指出,你们有更好的解决方法,欢迎大家在评论区下方留言支持,大家一起相互学习参考呀~文章来源地址https://www.toymoban.com/news/detail-651667.html

到了这里,关于【uniapp】中 微信小程序实现echarts图表组件的封装的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 微信小程序使用Echarts-for-weixin实现图表动态更新数据、懒加载(干货满满!!!)

    后端开发入坑全栈之 微信小程序 + Echarts图表 上需求,如下: Apache Echarts是一个基于JavaScript的开源可视化图表库,用于创建各种类型图表,常用图表类型有柱状图、折线图、饼状图、散点图等等。废话不多说,直接上干货!耶✌ 1、下载Echart-for-weixin项目 echart-for-weixin 项目提

    2024年02月04日
    浏览(42)
  • 微信小程序中简单使用echarts图表

       1.复制组件至page同级目录下(ec-canvas) 2. 在js中引入 3.在wxml写个标签 样式我是这么设置的(在wcss),差不多大写微信里尺寸可以 4.编写数据咯(数据肯定是从接口传的,我就不写死了 直接方法也贴出来) 先创建对象 初始化图表 定义option 定义方法掉接口数据定义optio

    2024年02月09日
    浏览(51)
  • 解决微信小程序Echarts图表层级过高的方案

    在微信小程序中使用Echarts图表时,有时会遇到图表层级过高的问题。这可能导致图表无法正常显示或部分内容被遮挡。本文将介绍一种解决方案,通过修改Echarts图表的样式和配置,可以有效解决这个问题。 解决方案如下: 检查图表容器的样式 首先,我们需要检查图表容器

    2024年02月03日
    浏览(44)
  • 封装一个公用的【Echarts图表组件】的3种模板

    1、模板1:vue2+javascript 2、模板2:vue3+javascript vue3中,有的图表调用不到,初始化echarts时使用 shallowRef 3、模板3:vue3+typescript 1、vue2 2、vue3+js 3、vue3+ts 1、鼠标单击/左键事件 2、鼠标移入/进入事件 3、鼠标移出/离开事件 4、让图表跟随屏幕去自适应 5、轮播动画效果 需要配置

    2024年02月03日
    浏览(39)
  • 【微信小程序-原生开发】实用教程22 - 绘制图表(引入 echarts,含图表的懒加载-获取到数据后再渲染图表,多图表加载等技巧)

    微信小程序中使用 echarts 需使用官方提供的 ec-canvas 组件 点击下方链接,下载 ec-canvas 组件 https://gitcode.net/mirrors/ecomfe/echarts-for-weixin/-/tree/master 将其中的 ec-canvas 文件夹拷贝到微信小程序的分包中 ( 因 ec-canvas 组件较大,约 1M,若放在主包中很容易超出 2M 的大小限制,不了解

    2024年02月09日
    浏览(51)
  • uniapp-微信小程序,对子组件实现onShow效果

    背景:使用uni-app开发一个微信小程序,使用的vue子组件,发现在子组件里面不能使用onShow生命周期,但是可以在page里面可以调用,需要在使用uni.navigateBack()返回后,该组件能请求接口数据刷新 解决:父级组件中,在子组件上添加ref,在父级onShow中通过子组件ref调用方法 父组

    2024年02月11日
    浏览(40)
  • UNIAPP微信小程序使用Echarts

    ​ 最近要在uniapp做的小程序中使用echarts,网上搜了很多教程都很麻烦,这里提供一种简便快捷CV方案。 ​ 先说下图表选型的问题,如果你只用于微信小程序,可以使用本方案,Echarts丰富多样的图表和广大的开源图库都已使用。如果要考虑兼容性问题,比如兼容支付宝小程序

    2024年02月09日
    浏览(46)
  • uniapp 微信小程序使用echarts

    本文目的:通过分包的方式,尽可能在微信小程序中使用最新的echarts。 当然你也可以直接使用现成的uchart或者市场里别人封好的echarts. 准备工作 下载echarts-for-weixin源码。 复制 ec-canvas 文件夹以及下属文件,在uniapp项目中与pages同级的地方创建 wxcomponents 文件夹,将复制的文件

    2024年02月04日
    浏览(51)
  • uniapp微信小程序中使用echarts

    可以先随便建个文件夹,然后 npm init。运行下面的命令行,下载依赖 找到node_modulesmpvue-echarts下的文件,保留src文件夹,其他删除,复制mpvue-echarts文件夹到项目的components中 1.2、获取定制echarts的js文件 在https://echarts.apache.org/zh/builder.html定制echarts的js文件,然后下载,放到c

    2024年02月15日
    浏览(50)
  • 微信小程序---图片裁剪、旋转、预览、上传功能实现(已经封装成组件,需要的到资源下载)

    1、可以拍摄或选择本地图片上传图片数据 2、图片上传数据可以进行裁剪、选择、取消、裁剪后预览、上传以及限制大小,还可以缩放操作,需要的可以解除限制即可 1、点击图片上传按钮时,跳转页面到cropper进行图片选择剪切 wx.navigateTo({       url: `/pages/cropper/cropper?d

    2023年04月26日
    浏览(69)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包