tnblog
首页
视频
资源
登录

uni-app中使用uCharts图表,微信小程序使用图表,饼图,柱状图,折线图等

3583人阅读 2024/3/14 15:00 总访问:735685 评论:0 收藏:0 手机
分类: 前端

官方文档:

https://www.ucharts.cn/v2/#/guide/index

插件使用,可以直接导入uni-app项目中

https://ext.dcloud.net.cn/plugin?id=271

演示与查看代码地址

https://www.ucharts.cn/v2/#/demo/index

uCharts饼图示例

  1. <template>
  2. <view class="charts-box">
  3. <qiun-data-charts type="pie" :opts="opts" :chartData="chartData" />
  4. </view>
  5. </template>
  6. <script>
  7. export default {
  8. data() {
  9. return {
  10. chartData: {},
  11. //您可以通过修改 config-ucharts.js 文件中下标为 ['pie'] 的节点来配置全局默认参数,如都是默认参数,此处可以不传 opts 。实际应用过程中 opts 只需传入与全局默认参数中不一致的【某一个属性】即可实现同类型的图表显示不同的样式,达到页面简洁的需求。
  12. opts: {
  13. color: ["#1890FF","#91CB74","#FAC858","#EE6666","#73C0DE","#3CA272","#FC8452","#9A60B4","#ea7ccc"],
  14. padding: [5,5,5,5],
  15. enableScroll: false,
  16. extra: {
  17. pie: {
  18. activeOpacity: 0.5,
  19. activeRadius: 10,
  20. offsetAngle: 0,
  21. labelWidth: 15,
  22. border: true,
  23. borderWidth: 3,
  24. borderColor: "#FFFFFF",
  25. linearType: "custom"
  26. }
  27. }
  28. }
  29. };
  30. },
  31. onReady() {
  32. this.getServerData();
  33. },
  34. methods: {
  35. getServerData() {
  36. //模拟从服务器获取数据时的延时
  37. setTimeout(() => {
  38. //模拟服务器返回数据,如果数据格式和标准格式不同,需自行按下面的格式拼接
  39. let res = {
  40. series: [
  41. {
  42. data: [{"name":"一班","value":50},{"name":"二班","value":30},{"name":"三班","value":20},{"name":"四班","value":18},{"name":"五班","value":8}]
  43. }
  44. ]
  45. };
  46. this.chartData = JSON.parse(JSON.stringify(res));
  47. }, 500);
  48. },
  49. }
  50. };
  51. </script>
  52. <style scoped>
  53. /* 请根据实际需求修改父元素尺寸,组件自动识别宽高 */
  54. .charts-box {
  55. width: 100%;
  56. height: 300px;
  57. }
  58. </style>

欢迎加群讨论技术,1群:677373950(满了,可以加,但通过不了),2群:656732739。有需要软件开发,或者学习软件技术的朋友可以和我联系~(Q:815170684)

评价

uni-app开始时间与结束时间(结束时间大于开始时间)picker编写

利用uni-app官网里面picker插件代码当点击开始时间后结束时间要大于选择后的开始时间,点击结束时间后开始时间要小于开始时...

uni-app用法与html标签的变化

以前是html标签,比如,现在是小程序组件,比如。那么标签和组件有什么区别,不都是用尖括号包围起来一段英文吗?其实标签...

uni-app无法导入插件

点击网页中右上角的插件导入,可以打开项目,但是就是无法导入插件。是因为,要登录!hbuilder里边也要登录才行,他这个应...

使用uni-app的云端一体插件

初次使用uni-app的云端一体插件步骤还是有点多,也有一些坑,在这里把使用过程记录一下。 一:先下载需要的插件在插件右上...

uni-app中list插件图标问题

如图:他使用uni-icons实现的如果只有text就不会有图标有时候贴的文档不是太完善,还是要下一个完整的插件来对比一下

uni-app发起请求

代码如下:uni.request({ url:&#39;接口地址&#39;, success:(result)=&gt;{ my.lists=result.data; } })注意你的...

uni-app官方文档

https://uniapp.dcloud.io/

uni-app运行与调试

上边有菜单,可以运行到浏览器,也可以运行到内置浏览器运行到内置浏览器的效果:

uni-app引入外部资源引入外网样式

很简单代码如下:&lt;style&gt; @import&#39;http://image.tnblog.net/amazeui.min.css&#39;; &lt;/style&gt; &lt;st...

uni-app设置起始页

很简单,在pages.json里边配置即可。

uni-app页面无法跳转问题

首先检查一下有没有在pages里边配置没有配置不行的哦或者看看你的跳转方式对不对,如果跳转的是底部菜单,但是你用的是uni....

uni-app 删除失败 setting denied access to....

删除的时候如果文件夹下面还有页面,这样直接删除文件夹是会报错的:删除失败 setting denied access to....这种情况就直接...

uni-app中引入外部js

可以使用代码如下:varscript=document.createElement(&#39;script&#39;); script.src=&quot;http://image.tnblog.net/jqu...

uni-app dom操作

比如引入外部js需要用到的dom操作:varscript=document.createElement(&#39;script&#39;); script.src=&quot;http://image....

uni-app使用web-view引入页面

代码如下:&lt;template&gt; &lt;viewclass=&quot;h5-html&quot;&gt; &lt;web-view:webview-styles=&quot;webviewStyl...

uni-app真机调试

很简单只要手机开启了usb调试,然后hbuilderx会自动获取到手机的然后运行到手机即可华为手机开启use调试:一直点击版本号进...
真诚,善良,美好,温柔,皆是你
排名
9
文章
120
粉丝
5
评论
5
ICP备案 :渝ICP备18016597号-1
网站信息:2018-2025TNBLOG.NET
技术交流:群号656732739
联系我们:contact@tnblog.net
公网安备:50010702506256
欢迎加群交流技术