首页
视频
资源
登录
原
uni-app中使用uCharts图表,微信小程序使用图表,饼图,柱状图,折线图等
293
人阅读
2024/3/14 15:00
总访问:
523573
评论:
0
收藏:
0
手机
分类:
前端
<img src="https://img.tnblog.net/arcimg/xiuxin3/5d77825891d14887b19a8afc0cc6ae64.png" style="width:399px;height:auto;align:center"> #### 官方文档: 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饼图示例 ``` <template> <view class="charts-box"> <qiun-data-charts type="pie" :opts="opts" :chartData="chartData" /> </view> </template> <script> export default { data() { return { chartData: {}, //您可以通过修改 config-ucharts.js 文件中下标为 ['pie'] 的节点来配置全局默认参数,如都是默认参数,此处可以不传 opts 。实际应用过程中 opts 只需传入与全局默认参数中不一致的【某一个属性】即可实现同类型的图表显示不同的样式,达到页面简洁的需求。 opts: { color: ["#1890FF","#91CB74","#FAC858","#EE6666","#73C0DE","#3CA272","#FC8452","#9A60B4","#ea7ccc"], padding: [5,5,5,5], enableScroll: false, extra: { pie: { activeOpacity: 0.5, activeRadius: 10, offsetAngle: 0, labelWidth: 15, border: true, borderWidth: 3, borderColor: "#FFFFFF", linearType: "custom" } } } }; }, onReady() { this.getServerData(); }, methods: { getServerData() { //模拟从服务器获取数据时的延时 setTimeout(() => { //模拟服务器返回数据,如果数据格式和标准格式不同,需自行按下面的格式拼接 let res = { series: [ { data: [{"name":"一班","value":50},{"name":"二班","value":30},{"name":"三班","value":20},{"name":"四班","value":18},{"name":"五班","value":8}] } ] }; this.chartData = JSON.parse(JSON.stringify(res)); }, 500); }, } }; </script> <style scoped> /* 请根据实际需求修改父元素尺寸,组件自动识别宽高 */ .charts-box { width: 100%; height: 300px; } </style> ```
欢迎加群讨论技术,1群:677373950(满了,可以加,但通过不了),2群:656732739
👈{{preArticle.title}}
👉{{nextArticle.title}}
评价
{{titleitem}}
{{titleitem}}
{{item.content}}
{{titleitem}}
{{titleitem}}
{{item.content}}
只若初见
如果有缘,错过了还会重来,如果无缘,相遇了也会离开
博主信息
排名
6
文章
6
粉丝
16
评论
8
文章类别
架构
9篇
后端
3篇
.net
8篇
前端
52篇
nginx
1篇
.net core
6篇
EF
5篇
随笔
8篇
数据库
9篇
k8s
0篇
consul
1篇
git
1篇
uniapp
3篇
mysql
1篇
linux
1篇
最新文章
最新评价
{{item.articleTitle}}
{{item.blogName}}
:
{{item.content}}
关于我们
ICP备案 :
渝ICP备18016597号-1
网站信息:
2018-2024
TNBLOG.NET
技术交流:
群号656732739
联系我们:
contact@tnblog.net
欢迎加群
欢迎加群交流技术