关于在uni app中运用图表

今天写项目,需要在uni app中使用图表,我使用的是ucharts.

具体操作如下

1.下载

ucharts可以直接在uni app的插件市场下载安装.

先在插件市场下载ucharts,导入到自己要使用的图表的项目.

2.使用

先用在线生成工具生成自己想要的样式.

秋云uCharts图表组件

然后就是导入项目中,因为我一个页面要用很多不同的图表,所以我就把不同的图表给拆成不同的组件了.

在组件里面将刚刚在线生成的代码拷进去

最后就是把刚刚自己的样式配置给拷进去

3.展示

最后在自己的页面,引入组件就可以了

下面是我的组件代码

<template><view class="column-chart"><qiun-data-chartstype="column":chartData="chartData":opts="opts"background="#FFFFFF"/></view>
</template><script>
export default {name: "column-chart",data() {return {chartData: {categories: ["10/18","10/19","10/20","10/21","10/22","10/23","10/24"],series: [{"name": "开房率","data": [60,27,21,24,6,28,40]}],},opts: {"type": "column","canvasId": "","canvas2d": false,"background": "#FFFFFF","animation": true,"timing": "easeOut","duration": 1000,"color": ["#0E9CFF","#91CB74","#FAC858","#EE6666","#73C0DE","#3CA272","#FC8452","#9A60B4","#ea7ccc"],"padding": [15,15,0,5],"rotate": false,"errorReload": true,"fontSize": 10,"fontColor": "#333333","enableScroll": false,"touchMoveLimit": 60,"enableMarkLine": false,"dataLabel": true,"dataPointShape": true,"dataPointShapeType": "solid","tapLegend": true,"xAxis": {"disabled": false,"axisLine": true,"axisLineColor": "#CCCCCC","calibration": false,"fontColor": "#333333","fontSize": 12,"rotateLabel": false,"itemCount": 5,"boundaryGap": "center","disableGrid": true,"gridColor": "#CCCCCC","gridType": "solid","dashLength": 4,"gridEval": 1,"scrollShow": false,"scrollAlign": "left","scrollColor": "#A6A6A6","scrollBackgroundColor": "#EFEBEF","format": ""},"yAxis": {"disabled": false,"disableGrid": true,"splitNumber": 4,"gridType": "solid","dashLength": 8,"gridColor": "#CCCCCC","padding": 10,"showTitle": false,"data": [{"max": 100}]},"legend": {"show": false,"position": "bottom","float": "center","padding": 5,"margin": 5,"backgroundColor": "rgba(0,0,0,0)","borderColor": "rgba(0,0,0,0)","borderWidth": 0,"fontSize": 13,"fontColor": "#666666","lineHeight": 11,"hiddenColor": "#CECECE","itemGap": 10},"extra": {"column": {"type": "group","width": 12,"seriesGap": 2,"categoryGap": 3,"barBorderCircle": false,"linearType": "none","linearOpacity": 1,"colorStop": 0,"meterBorder": 1,"meterFillColor": "#FFFFFF","activeBgColor": "#000000","activeBgOpacity": 0.08,"meterBorde": 1},"tooltip": {"showBox": true,"showArrow": true,"showCategory": false,"borderWidth": 0,"borderRadius": 0,"borderColor": "#000000","borderOpacity": 0.7,"bgColor": "#000000","bgOpacity": 0.7,"gridType": "solid","dashLength": 4,"gridColor": "#CCCCCC","fontColor": "#FFFFFF","splitLine": true,"horizentalLine": false,"xAxisLabel": false,"yAxisLabel": false,"labelBgColor": "#FFFFFF","labelBgOpacity": 0.7,"labelFontColor": "#666666"},"markLine": {"type": "solid","dashLength": 4,"data": []}}}};}
}
</script><style lang="scss" scoped>
.column-chart {width: 100%;height: 100%;
}
</style>

4.总结

就我现在的需求来看,ucharts是比较好用的,直接傻瓜式生成,然后复制粘贴就可以了.

uni app中使用图表相关推荐

Android uni app 列表底部白条解决方案
uni app中android打开本地vue的列表会发现,底部有条白边. vue通过uni.getSystemInfoSync();方法获取系统信息,首次取值对,再次取值就出错 uni app每次启动 ...
vue插槽solt ，uni.app
一.什么是插槽? 插槽就是子组件提供给父组件使用的一个占位符,用<slot></solt>表示父组件可以在这个占位符中填充任何模板代码. 二.插槽的用法 1.创建一个子组件,在 ...
uni 在app中引入h5页面（uni编写）
关于在app中引入网页,使用的webview标签相对于uniapp 官网给出的webview使用方法在这里https://uniapp.dcloud.io/component/web-view 但是 ...
uni app(H5)中软键盘弹出,固定定位绝对定位元素位置发生错乱
一.问题如下最近用uni app写项目,发现H5软键盘弹起,导致我固定定位的按钮被顶了上去,如图二.解决方法 1.让其在输入框获取焦点时隐藏百度了许多,有让输入框获取焦点时让按钮隐藏的方法,失去 ...
uni app 调用网络打印机_uni-app 的使用体验总结
[实践] uni-app 的使用总结最近使用 uni-app 的感受. 使用体验没用之前以为真和 Vue 一样,用了之后才知道.有点类似 Vue 和小程序结合的感觉.写类似小程序的标签,有着小程 ...
uni-app框架开发app中出现的问题（持续更新中...）
uni-app框架开发app中出现的问题 ucharts图表第一次加载不显示 uview中图标不显示无法使用彩色iconfont 滚动回顶部监听横屏和录屏的变化 ucharts双指缩放24小时曲线 ...
切换 uniapp_万能前端框架uni app初探03：底部导航开发
前言本节我们使用uni app的底部导航功能,点击不同tab会显示不同页面,这个功能在实际项目开发中几乎是必备的. 一.基础知识 1.tabBar 如果应用是一个多 tab 应用,可以通过 tabB ...
在微信小程序中绘制图表（part3）
本期大纲 1.饼图绘制 2.如何添加动画效果 3.使用rollup构建项目相关阅读: 在微信小程序中绘制图表(part1) 在微信小程序中绘制图表(part2) 关注我的 github 项目查看完 ...
uni.app H5(微信公众号定位) uni.getLocation
最近在开发公众号,由于之前经常使用uni,app写APP,索性就用uni.app来开发公众号了, 不过也遇到了一个问题,就是在公众号的首页要获取用户的定位.我看了看官网的API 有个uni.getLo ...

uni app中使用图表