uni-app插入ucharts(echarts)图表,支持H5，APP，小程序

这是uni-app里通用的图表方法，从ucharts官网上整理的
链接: https://pan.baidu.com/s/1vMkVr2A_ycZ95Slj6_-xCg 提取码: 2e61 复制这段内容后打开百度网盘手机App，操作更方便哦
压缩包打开后这是个主要的文件夹放在根目录上

然后直接在需要的vue文件里引入（下面代码是个样例，根据自己情况而定）

<qiun-data-charts type="column" :chartData="chartsDataColumn1" />

type属性就是你要用的图表样式，chartData就是要绑定的图表配置，具体使用去https://www.ucharts.cn/ ucharts官网的在线工具配置，配置好了直接粘贴过来

注意不要忘了给他一个画布大小

划重点：如果渲染不出来就把HBuilder软件关了，重新启动运行一下

做完这些，基本是没问题的，下面再详细说一下图表配置问题：

标准数据格式1：（折线图、柱状图、区域图等需要categories的直角坐标系图表类型）

chartData:{categories: ["2016", "2017", "2018", "2019", "2020", "2021"],series: [{name: "目标值",data: [35, 36, 31, 33, 13, 34]}, {name: "完成量",data: [18, 27, 21, 24, 6, 28]}]
}

标准数据格式2：（饼图、圆环图、漏斗图等不需要categories的图表类型）

chartData:{series: [{name: "groupA",data: [{name: "一班",value: 50}, {name: "二班",value: 30}, {name: "三班",value: 20}, {name: "四班",value: 18}, {name: "五班",value: 8}]}]
}

注：其他特殊图表类型，请参考mockdata文件夹下的数据格式（从官网查看）
https://gitee.com/uCharts/uCharts
上压缩包链接（ucharts教程官网打不开，可从这下载）
链接: https://pan.baidu.com/s/123NMCEQ_l0BEOfnIOqVoHQ 提取码: xwv2 复制这段内容后打开百度网盘手机App，操作更方便哦

下面这个截图就是官网教程整个示例文件的内容
其他基本图表可以参考ucharts.vue文件里的内容

uni-app中插入图表的基本操作就这样，其他操作还是建议去官网阅读
https://gitee.com/uCharts/uCharts#%E5%9F%BA%E6%9C%AC%E7%94%A8%E6%B3%95

uni-app插入ucharts(echarts)图表,支持H5，APP，小程序相关推荐

java大型多店铺商城源码java多店铺商城系统b2b2c， b2 springboot架构。支持pc＋h5＋小程序＋安卓app＋苹果app
java大型多店铺商城源码java多店铺商城系统b2b2c, b2 springboot架构.支持pc+h5+小程序+安卓app+苹果app
app vue 真机运行_uni-app黑魔法：小程序自定义组件运行到H5平台
引言移动互联网的初期,囿于设备硬件性能限制,流量以原生App为主,iOS.Android是当时两大平台. 随着硬件及OS的更新换代,H5可承载的体验逐步完善,为提高开发效率.节约资源(复用代码)以及 ...
uniapp判断当前运行环境 app h5 微信小程序
仅3.4.10+版本以上才支持,如果您的hbuilderX版本不是这个版本的需要先升级一下版本 hbuilderx下载选择3.4.11及以上版本 const type = uni.getSystem ...
【微信小程序】使用uni-app——开发首页搜索框导航栏（可同时兼容APP、H5、小程序）
目录前言 App.H5效果小程序效果一.兼容APP.H5的方式二.兼容小程序三.实现同时兼容前言首页都会提供一个搜索框给到客户,让客户自己去搜索自己想要的内容,这里就需要导航栏,来实现搜 ...
uniapp （H5、小程序、app）地图导航
H5地图导航腾讯地图 window.location.href = http://apis.map.qq.com/uri/v1/marker?marker=coord:lat,lng;addr:ad ...
uniapp实现下拉刷新及上拉（分页）加载更多（app，H5，小程序均可使用）
开门见山地说,在移动端开发中,80%的项目都会涉及到列表展示,而有了列表不可避免的需求就是列表的下拉刷新和上拉加载更多.本篇文章主要介绍在使用uniapp开发移动端的过程中,比较好用的一个下拉及上拉组 ...
Web、app、H5、小程序测试的区别
单纯从功能测试的层面上来讲的话,APP 测试.web 测试和H5测试在流程和功能测试上是没有区别的. Web项目或pc项目都是在电脑上进行测试的.常见的PC项目架构有BS架构和CS架构的,BS架构就是 ...
知识付费系统源码，可直接打包成app、H5、小程序
知识付费,在近几年来,越来越受到大家的关注.知识付费系统源码是将知识通过互联网渠道变现的方式.以知识为载体,通过付费获得在线知识以及在线学习所带来的收益.知识付费平台主要以分享知识内容,内容分为直播. ...
【uni-app】只支持在微信小程序运行的导入外部3d模型
1.解决问题 uniapp 导入3d模型,在微信小程序端运行.只支持在微信小程序端使用,若要支持 h5 和 APP端,可以查看这篇,点击这里只导入了3d模型,未设置让模型动. 2.导入模型格式 gl ...

uni-app插入ucharts(echarts)图表,支持H5，APP，小程序

uni-app插入ucharts(echarts)图表,支持H5，APP，小程序

uni-app插入ucharts(echarts)图表,支持H5，APP，小程序相关推荐

最新文章

热门文章