【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>

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/44218.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

JavaScript函数式编程【进阶】

作者&#xff1a;20岁爱吃必胜客&#xff08;坤制作人&#xff09;&#xff0c;近十年开发经验, 跨域学习者&#xff0c;目前于海外某世界知名高校就读计算机相关专业。荣誉&#xff1a;阿里云博客专家认证、腾讯开发者社区优质创作者&#xff0c;在CTF省赛校赛多次取得好成绩。…

prompt-engineering-note(面向开发者的ChatGPT提问工程学习笔记)

介绍&#xff1a; ChatGPT Prompt Engineering Learning Notesfor Developers (面向开发者的ChatGPT提问工程学习笔记) 课程简单介绍了语言模型的工作原理&#xff0c;提供了最佳的提示工程实践&#xff0c;并展示了如何将语言模型 API 应用于各种任务的应用程序中。 此外&am…

如何解决使用npm出现Cannot find module ‘XXX\node_modules\npm\bin\npm-cli.js’错误

遇到问题&#xff1a;用npm下载组件时出现Cannot find module ‘D&#xff1a;software\node_modules\npm\bin\npm-cli.js’ 问题&#xff0c;导致下载组件不能完成。 解决方法&#xff1a;下载缺少的npm文件即可解决放到指定node_modules目录下即可解决。 分析问题&#xff1…

关于docker-compose up -d在文件下无法运行的原因以及解决方法

一、确认文件下有docker-compose.yml文件 二、解决方法 检查 Docker 服务是否运行&#xff1a; 使用以下命令检查 Docker 服务是否正在运行&#xff1a; systemctl status docker 如果 Docker 未运行&#xff0c;可以使用以下命令启动它&#xff1a; systemctl start docker …

基于51单片机直流电机PWM调速液晶1602显示设计

一、系统方案 本文主要研究了利用MCS-51系列单片机控制PWM信号从而实现对直流电机转速进行控制的方法。本文中采用了三极管组成了PWM信号的驱动系统&#xff0c;并且对PWM信号的原理、产生方法以及如何通过软件编程对PWM信号占空比进行调节&#xff0c;从而控制其输入信号波形等…

React快速入门

最近需要学到react&#xff0c;这里进行一个快速的入门&#xff0c;参考react官网 1.创建和嵌套组件 react的组件封装是个思想&#xff0c;我这里快速演示代码&#xff0c;自己本身也不太熟悉。 代码的路径是src底下的App.js function MyButton() {return (<button>I…

软件开发方法:复用与扩展

软件开发方法&#xff1a;复用与扩展 一、面向对象二、进一步认识 一、面向对象 封装 工程上的意义&#xff1a;屏蔽细节&#xff0c;隔离变化 public、protected、private 继承 工程上的意义&#xff1a;复用 多态工程上的意义&#xff1a;高内聚&#xff0c;低耦合 —— 面…

centos7在线安装 jdk1.8+tomcat+mysql8+nginx+docker

centos7 在线安装jdk1.8 yum install -y java-1.8.0-openjdk.x86_64 java默认安装路径/usr/lib/jvm/&#xff1b; 加入环境变量配置&#xff0c;在/etc/profile 配置文件中加入 java 环境变量&#xff1a; vim /etc/profile ​ #java 环境变量内容&#xff1a; ​ #java环境变量…

poste邮件服务器搭建

关于poste poste是一款开源邮件服务软件&#xff0c;可以很方便的搭建&#xff1a;SMTP IMAP POP3 反垃圾邮件 防病毒 Web 管理 Web 电子邮件&#xff0c;支持以下特性。 SPF、DKIM、DMARC、SRS 的原生实现&#xff0c;带有简单的向导用于检测木马、病毒、恶意软件的防…

密码学学习笔记(二十):DSA签名与X.509证书

数字签名 下图是一个制作以及使用数字签名过程的通用模型。 假设Bob发送一条消息给Alice&#xff0c;尽管消息并不重要&#xff0c;也不需要保密&#xff0c;但他想让Alice知道消息确实是他本人发的。出于这个目的&#xff0c;Bob利用一个安全的散列函数&#xff0c;比如SHA-…

Linux中deluser和userdel的区别

在Linux系统中&#xff0c;deluser 和 userdel 都是用于删除用户账户的命令&#xff0c;但它们来自不同的用户管理工具&#xff0c;具有一些区别&#xff1a; userdel&#xff1a; userdel 是一个较底层的命令&#xff0c;通常用于删除用户账户。它的主要功能是从系统文件&…

uniapp websocket机制 心跳 重连

在开发程序过程中通信功能还是比较常用到的&#xff0c;本文主要介绍的是uniapp中websocket的使用 websocket建立连接后&#xff0c;断开、心跳机制重新链接的一个过程。 关于uni.connectSocket可仔细阅读uniapp官网中的uni.connetSocket以及连接socket创建的实例SocketTask …

POJ 1064 Cable master 二分搜索

一、思路 再本题目中&#xff0c;输入的所有数字都是只有两位小数&#xff0c;输出的答案也是两位小数&#xff0c;为了简单&#xff0c;我直接把每个数字乘以100&#xff0c;变成整数&#xff0c;然后去二分搜索&#xff0c;二分搜素的比较条件为数组所有元素都除以middle&am…

【小梦C嘎嘎——启航篇】vector 以及日常使用的接口介绍

【小梦C嘎嘎——启航篇】vector 日常使用的接口介绍&#x1f60e; 前言&#x1f64c;vector 是什么&#xff1f;vector 比较常使用的接口 总结撒花&#x1f49e; &#x1f60e;博客昵称&#xff1a;博客小梦 &#x1f60a;最喜欢的座右铭&#xff1a;全神贯注的上吧&#xff01…

TypeScript入门指南

TypeScript学习总结内容目录&#xff1a; TypeScript概述 TypeScript特性。Javascript与TypeScript的区别 * TypeScript安装及其环境搭建TypeScript类型声明 * 单个类型声明&#xff0c;多个类型声明 * 任意类型声明 * 函数类型声明 * unknown类型…

css-flex使用

文章目录 flex弹性容器属性flex-directionflex-wrapflex-flowalign-itemsjustify-contentalign-content主轴和侧轴 弹性元素默认大小属性flex-growflex-shrinkalign-selfflex-basisflexorder 高度坍塌flex布局子元素宽度超出父元素 flex 弹性盒&#xff0c;伸缩盒&#xff0c;…

micropython SSD1306/SSD1315驱动

目录 简介 代码 功能 显示ASCII字符 ​编辑 画任意直线 画横线 画竖线 画矩形 画椭圆 画立方体 画点阵图 翻转 反相 滚动 横向滚动 纵向滚动 奇葩滚动 简介 我重新写了一个驱动&#xff0c;增加了一些功能&#xff0c;由于我的硬件是128*64oled单色I2C&#xff0c;我只…

【数据结构】如何用队列实现栈?图文详解(LeetCode)

LeetCode链接&#xff1a;225. 用队列实现栈 - 力扣&#xff08;LeetCode&#xff09; 本文默认读者已经掌握栈与队列的基本知识 或者先看我的另一篇博客&#xff1a;【数据结构】栈与队列_字节连结的博客-CSDN博客 做题思路 由于我们使用的是C语言&#xff0c;不能直接使用队…

vue中使用html2canvas+jsPDF实现pdf的导出

导入依赖 html2canvas依赖 npm install html2canvasjspdf依赖 npm install jspdfpdf导出 以导出横向&#xff0c;A4大小的pdf为例 规律&#xff1a;1. html2canvas 中&#xff0c;在保持jsPDF中的宽高不变的情况下&#xff0c;设置html2canvas中的 width 和 height 值越小&a…

npm 不是内部或外部命令,也不是可运行的程序或批处理文件。

遇到问题&#xff1a; 1.遇到问题&#xff1a;npm 不是内部或外部命令&#xff0c;也不是可运行的程序或批处理文件。 2.遇到问题&#xff1a;或者使用npm安装插件时会出现 XXX\node\node_modules\npm不可用 情况 如下图&#xff1a; 分析问题&#xff1a; nodejs在nodejs官网…