UNiapp微信小程序Ucharts

效果图如下

以上为加载接口所得数据的玫瑰图与折线图

具体步骤如下

1,将插件导入Hbuiler 所需要的项目中(插件地址:秋云 ucharts echarts 高性能跨全端图表组件 - DCloud 插件市场)

2,导入成功是这样的

3,打开Ucharts官方地址(uCharts官网 - 秋云uCharts跨平台图表库) 各种图形应有尽有,如下

4,选择自己需要的图形,这里我用玫瑰图,折线图举例

 

选择喜欢的类型点击查看代码 ,支持很多app,小程序,我这里用的UNiapp 原生代码

 

5,复制代码到自己项目页面中,调整好css,我的代码如下

      a,页面代码


<view class="echartPieClass"><canvas canvas-id="oCwSurlEYAHlHHJgTshuROhNgUmUHblO" id="oCwSurlEYAHlHHJgTshuROhNgUmUHblO" class="charts" @touchend="tap"/>
</view>
<view class="echartPieClass"><canvas canvas-id="shSXlKCaGHqXyosxTHYDuRySdVunSfAT" id="shSXlKCaGHqXyosxTHYDuRySdVunSfAT" class="charts" @touchend="tap1"/>
</view>

   b,js,css代码

<script>
//引入插件js
import uCharts from '@/uni_modules/qiun-data-charts/js_sdk/u-charts/u-charts.js';
var uChartsInstance = {};//玫瑰图
uChartsInstance1 = {};//折线图
export default {data() {return {pieList:[],nameList:[],pricesList:[],cWidth: 750,cHeight: 500};},onReady() {this.MtypeName();//加载接口//这里的 750 对应 css .charts 的 widththis.cWidth = uni.upx2px(750);//这里的 500 对应 css .charts 的 heightthis.cHeight = uni.upx2px(500);},methods: {MtypeName(){this.$api.getTypeNameList({}).then(res => {let list=res.result;let lists="",names="",prices="";for(var i=0;i<list.length;i++){if(i<list.length-1){lists+="{"+'"name"'+":"+'"'+list[i].typename+'"'+","+'"value"'+":"+list[i].allmoney+"}"+",";names+='"'+list[i].typename+'"'+",";prices+='"'+list[i].allmoney+'"'+",";}else{lists+="{"+'"name"'+":"+'"'+list[i].typename+'"'+","+'"value"'+":"+list[i].allmoney+"}";names+='"'+list[i].typename+'"';prices+='"'+list[i].allmoney+'"';}}lists="["+lists+"]";names="["+names+"]";prices="["+prices+"]";this.pieList=JSON.parse(lists);this.nameList=JSON.parse(names);this.pricesList=JSON.parse(prices);this.getServerData();this.getServerData1();})},getServerData() {//模拟从服务器获取数据时的延时setTimeout(() => {//模拟服务器返回数据,如果数据格式和标准格式不同,需自行按下面的格式拼接let res = {series: [{data: this.pieList,//[{"name":"一班","value":50},{"name":"二班","value":30},{"name":"三班","value":20},{"name":"四班","value":18},{"name":"五班","value":8}]}]};this.drawCharts('QQHmcQkBhELdeWwqdBQfxiWPRNZmAMaE', res);}, 500);},drawCharts(id,data){const ctx = uni.createCanvasContext(id, this);uChartsInstance[id] = new uCharts({type: "rose",context: ctx,width: this.cWidth,height: this.cHeight,series: data.series,animation: true,background: "#FFFFFF",color: ["#1890FF","#91CB74","#FAC858","#EE6666","#73C0DE","#3CA272","#FC8452","#9A60B4","#ea7ccc"],padding: [5,5,5,5],enableScroll: false,legend: {show: true,position: "left",lineHeight: 25},extra: {rose: {type: "area",minRadius: 50,activeOpacity: 0.5,activeRadius: 10,offsetAngle: 0,labelWidth: 15,border: false,borderWidth: 2,borderColor: "#FFFFFF"}}});},tap(e){uChartsInstance[e.target.id].touchLegend(e);uChartsInstance[e.target.id].showToolTip(e);},getServerData1() {let res = {categories:this.nameList,//["2020-12-10","2020-12-11","2020-12-12","2020-12-13","2020-12-14","2020-12-15","2020-12-16","2020-12-17","2020-12-18"],series: [{name: "支出/收入",data:this.pricesList//[10,5,1,8,0,1,30,20,13]}]};this.drawCharts1('shSXlKCaGHqXyosxTHYDuRySdVunSfAT', res);},drawCharts1(id,data){const ctx = uni.createCanvasContext(id, this);uChartsInstance1[id] = new uCharts({type: "line",context: ctx,width: this.cWidth,height: this.cHeight,categories: data.categories,series: data.series,animation: true,background: "#FFFFFF",color: ["#1890FF","#91CB74","#FAC858","#EE6666","#73C0DE","#3CA272","#FC8452","#9A60B4","#ea7ccc"],padding: [15,10,0,15],enableScroll: false,legend: {},xAxis: {disableGrid: true},yAxis: {gridType: "dash",dashLength: 2},extra: {line: {type: "straight",width: 2,activeType: "hollow"}}});  },tap1(e){uChartsInstance1[e.target.id].touchLegend(e);uChartsInstance1[e.target.id].showToolTip(e);}}};
</script><style scoped>.charts{width: 750rpx;height: 500rpx;}
.echartPieClass{float: left;width: 96%;margin-left: 2%;margin-top: 20px;background-color: #fff;}
</style>

所有过程就这些,非常容易上手。

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

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

相关文章

相对定位语法:css+xpath基础语法使用-定位页面元素

文章目录 CSS相对定位获取元素关系定位顺序关系 XPath相对定位基础语法顺序关系-通过索引获取元素选取元素 总结 ✨✨✨学习的道路很枯燥&#xff0c;希望我们能并肩走下来&#xff01; 编程真是一件很奇妙的东西。你只是浅尝辄止&#xff0c;那么只会觉得枯燥乏味&#xff0c…

uniapp小程序上传pdf文件

<template><view class="mainInnBox"><view class="formBox"><!-- 注意,如果需要兼容微信小程序,最好通过setRules方法设置rules规则 --><u-form :model="form" ref="uForm" :rules="rules"&g…

韦东山嵌入式linux系列-具体单板的 LED 驱动程序

笔者使用的是STM32MP157的板子 1 怎么写 LED 驱动程序&#xff1f; 详细步骤如下&#xff1a; ① 看原理图确定引脚&#xff0c;确定引脚输出什么电平才能点亮/熄灭 LED ② 看主芯片手册&#xff0c;确定寄存器操作方法&#xff1a;哪些寄存器&#xff1f;哪些位&#xff1f;…

STM32 BootLoader 刷新项目 (三) 程序框架搭建及刷新演示

STM32 Customer BootLoader 刷新项目 (三) 程序框架搭建 文章目录 STM32 Customer BootLoader 刷新项目 (三) 程序框架搭建典型工作流程 1. 硬件原理图介绍1.1 USART硬件介绍1.2 LED和按键介绍 2. STM32 CubeMX工程搭建2.1 创建工程2.2 系统配置2.3 USART串口配置2.4 配置按键G…

GD32 MCU上电跌落导致启动异常如何解决

大家是否碰到过MCU上电过程中存在电源波动或者电压跌落导致MCU启动异常的问题&#xff1f;本视频将会为大家讲解可能的原因以及解决方法&#xff1a; GD32 MCU上下电复位波形如下图所示&#xff0c;上电过程中如果存在吃电的模块&#xff0c;比如wifi模块/4G模块/开启某块电路…

10校大满贯!中国内地高校2024年1-6月CNS发文统计出炉

随着全球科研竞争的日趋激烈&#xff0c;CNS&#xff08;Cell、Nature、Science&#xff09;作为科学领域的三大顶级期刊&#xff0c;不仅是科研成果的展示平台&#xff0c;更是各国科研实力比拼的重要战场。近年来&#xff0c;中国高校在国际科研舞台上的表现愈发抢眼&#xf…

排队问题--逆序对应用

对于逆序对&#xff0c;我们可以用树状数组的方式来求&#xff0c;但是值得注意的是&#xff0c;我们逆序对一般求的是比这个元素小的个数&#xff08;位置可以是前或者后&#xff09;&#xff0c;那么求比这个元素大的个数怎么办&#xff0c;我们可以用 i - query() !!! 每个元…

生物安全柜验证:气流流型、粒子、浮游菌等参考标准

生物安全柜也是制药行业常见设备&#xff0c;根据GMP的要求&#xff0c;需对生物安全柜定期进行验证确认&#xff0c;确保生物安全柜的性能满足GMP洁净厂房的相关要求。 生物安全柜是实验室的基本设备&#xff0c;也是生物安全实验室的一级安全隔离屏障。其最重要的作用就是气流…

Windows与Linux双机热备软件推荐

网络数据安全在如今信息化的时代越来越变得举足轻重&#xff0c;因此服务器维护和管理也成为企业健康稳定运营的一项重要工作。但实际情况是很多公司并没有配备专业的运维人员&#xff0c;一般都会通过一些管理软件维护或者主机托管给服务商。整理6款服务器的Windows与Linux双机…

JAVA-----异常处理

一、定义 在 Java 中&#xff0c;异常&#xff08;Exception&#xff09;是指程序在执行过程中遇到的不正常情况&#xff0c;这些情况可能导致程序无法继续执行或产生错误的结果。异常可以是 Java 标准库中提供的内置异常类&#xff0c;也可以是开发人员自定义的异常类。 二、…

PyTorch面部表情识别项目实战

新书速览|PyTorch深度学习与企业级项目实战-CSDN博客 本书案例比较丰富、比较完整&#xff0c;可以用于课题研究、毕业论文素材&#xff0c;值得大家收藏。 人脸表情是人类信息交流的重要方式&#xff0c;它所包含的人体行为信息与人的情感状态、精神状态、健康状态等有着极为…

关于Ubuntu22.04中的Command ‘vim‘ not found, but can be installed with:

前言 在Ubuntu终端编辑文本内容时需要利用vim&#xff0c;但新安装的虚拟机中并未配置vim&#xff0c;本文记录了vim的安装过程。 打开终端后&#xff0c;在home目录中输入 vim test.txt但提示报错&#xff0c;提示我们没有找到vim&#xff0c;需要通过以下命令进行安装&…

yearrecord——一个类似痕迹墙的React数据展示组件

介绍一下自己做的一个类似于力扣个人主页提交记录和GitHub主页贡献记录的React组件。 下图分别是力扣个人主页提交记录和GitHub个人主页的贡献记录&#xff0c;像这样类似痕迹墙的形式可以比较直观且高效得展示一段时间内得数据记录。 然而要从0实现这个功能还是有一些麻烦得…

等保-Linux等保测评

等保-Linux等保测评 1.查看相应文件&#xff0c;账户xiaoming的密码设定多久过期 rootdengbap:~# chage -l xiaoming Last password change : password must be changed Password expires : pass…

mysql5.7版本字符集编码

默认character_set_databaselatin1 当你字段插入中文值的时候&#xff0c;会报错。 所以修改为了character_set_databaseutf8既可以。 character_set_server他的范围更大&#xff0c;属于服务器级别。

LeetCode 852, 20, 51

目录 852. 山脉数组的峰顶索引题目链接标签二分思路代码 三分思路代码 20. 有效的括号题目链接标签思路代码 51. N 皇后题目链接标签思路回溯如何保证皇后之间无法互相攻击 代码 852. 山脉数组的峰顶索引 题目链接 852. 山脉数组的峰顶索引 标签 数组 二分查找 二分 思路…

逍遥模拟器安装Magisk和EDXPosed教程

资源下载&#xff1a; 逍遥模拟器安装Magisk和EDXPosed教程 - 多开鸭资源下载&#xff1a; MagiskEDXP教程文件 单独的逍遥模拟器使用的版本EDXPosed打包下载&#xff08;下载之后解压出来一共4个文件&#xff09;&#xff1a; 如果要按本教程安装就务必使用这里的安装包&…

爬虫(一)——爬取快手无水印视频

前言 最近对爬虫比较感兴趣&#xff0c;于是浅浅学习了一些关于爬虫的知识。爬虫可以实现很多功能&#xff0c;非常有意思&#xff0c;在这里也分享给大家。由于爬虫能实现的功能太多&#xff0c;而且具体的实现方式也有所不同&#xff0c;所以这里开辟了一个新的系列——爬虫…

用AI生成Springboot单元测试代码太香了

你好&#xff0c;我是柳岸花开。 在当今软件开发过程中&#xff0c;单元测试已经成为保证代码质量的重要环节。然而&#xff0c;编写单元测试代码却常常让开发者头疼。幸运的是&#xff0c;随着AI技术的发展&#xff0c;我们可以利用AI工具来自动生成单元测试代码&#xff0c;极…

基于单片机的停车场车位管理系统设计

1.简介 停车场车位管理系统是日常中随处可见的一种智能化车位管理技术&#xff0c;使用该技术可以提高车位管理效率&#xff0c;从而减轻人员车位管理工作负荷。本系统集成车牌识别、自动放行、自助缴费等技术&#xff0c;并且具备车位占用状态实时监测与车位数量实时统计、查询…