此插件为ucharts的二次封装,旨在简化ucharts的使用过程!
目录结构为:
components/u-charts/u-charts.vue //图表组件文件
components/u-charts/js/chartsUtil.js //为图表初始化和通用函数的二次封装文件
components/u-charts/js/u-charts.js|u-charts.min.js //此文件为ucharts的原文件,请根据ucharts的版本自行升级。
使用说明:
···
<template>
<view>
<uCharts :show="canvas" :canvasId="arr[0].id" :chartType="arr[0].chartType" :extraType="arr[0].extraType" :cWidth="cWidth" :cHeight="cHeight" :opts="arr[0].opts" :ref="arr[0].id"/>
</view>
</template>
```
参数说明:
show-显示或隐藏图表
canvasId-画布id
chartType-图表基本类型
exraType-图表扩展类型
opts-图表横轴和纵轴等主要数据
cWidth-图表宽度
cHeight-图表高度
ref-$ref.xxx组件函数引用声明
```
<script>
import uCharts from '@/components/u-charts/u-charts.vue';
export default {
components: { uCharts },
data() {
return {
canvas: true,
cWidth:uni.upx2px(750),
cHeight:uni.upx2px(400),
arr: [{
opts: ColumnMeter,
chartType: "column",
extraType: "meter",
id: "c2"
}]
}
},
}
</script>
···
#demo.vue
```
<template>
<view class="container">
<block v-for="(item, index) in arr" :key="index">
<view v-if="item.group" class="title uni-text-gray fl-row">
<view class="ml10 mt10 mb10 i-cube"></view><text class="ml30">{{item.group}}</text>
</view>
<view v-if="item.btn" class="bgwh fl-row p10">
<view :style="{width: (100-item.btn.length*20)+'%',}"></view>
<block v-for="(val, key) in item.btn" :key="key" >
<button :class="[key%2==0?'s-btn s-btn-hover':'s-btn1 s-btn1-hover']" @tap="change(index,val.type,val.etype)">{{val.title}}</button>
</block>
</view>
<view class="bgwh qiun-title-bar tc" >
<view class="f30 g6">{{item.title}}</view>
</view>
<view class="bgwh">
<uCharts :scroll="item.opts.enableScroll" :show="canvas" :canvasId="item.id" :chartType="item.chartType" :extraType="item.extraType" :cWidth="cWidth" :cHeight="cHeight" :opts="item.opts" :ref="item.id"/>
</view>
</block>
</view>
</template>
<script>
import uCharts from '@/components/u-charts/u-charts.vue';
import crt from '@/components/u-charts/js/chartsUtil.js';
export default {
data() {
return {
canvas: true,
cWidth:'',
cHeight:'',
arr: []
}
},
components: { uCharts },
onLoad(e) {
this.init()
},
onReady() {
},
methods: {
init(){
this.cWidth=uni.upx2px(750);
this.cHeight=uni.upx2px(400);
this.getServerData();
this.query()
},
query(){
// this.findFamilyQYByList()
},
jump(url, title='',to=3) {
// this.$api.jump(url,title,to)
},
change(idx,type,etype){
this.$refs[this.arr[idx].id][0].changeData(this.arr[idx].id,this.arr[idx].opts,type,etype)
},
async findFamilyQYByList() {
var data={
loading: true,
url:this.HostURL + this.serviceSRV,
data:{
p_service: 'familySjService',
p_method: 'findFamilyQYByTotalList',
startTime: this.startTime,
endTime: this.endTime,
regcodes: this.divisionCode[0],
pageNo: 1, // 1-第几页
pageSize: 10, // 10-每页记录条数
token: this.token,
}
}
var res=await this.$api.get(data)
var result=this.$api.ErrTip(res)
if (result&&result.list) {
var Column={type:'column',categories:[],series:[{name:'户数',data:[]}]}//柱状图
result.list.forEach((e)=>{
if(e.name&&e.cnt){
Column.categories.push(e.name);
Column.series[0].data.push(e.cnt);
}
})
this.$refs[this.arr[2].id][0].changeData(this.arr[2].id,Column,'column','group')
}
},
async getServerData() {
var sample=crt.getSampleData()
// var data={loading: true,url:'https://www.ucharts.cn/data.json'}
// var res=await this.$api.get(data)
// var result=this.$api.ErrTip(res)
// if (result&&result.data) {
var LineA = { enableScroll:false, unit: '套' }
LineA.categories = sample.LineA.categories//result.data.LineA.categories
LineA.series = sample.LineA.series//result.data.LineA.series
var LineB={rotate:false, enableScroll:false, unit: '套' }
// LineB.extra={line:{width:10}}
LineB.categories = sample.LineB.categories//result.data.LineB.categories
LineB.series = sample.LineB.series//result.data.LineB.series
var Column={ enableScroll:false, unit: '套' }
Column.categories = sample.ColumnB.categories//result.data.ColumnB.categories
Column.series = sample.ColumnB.series//result.data.ColumnB.series
var ColumnMeter = { enableScroll:false, unit: '' }
ColumnMeter.categories = sample.ColumnMeter.categories//result.data.ColumnMeter.categories
ColumnMeter.series = sample.ColumnMeter.series//result.data.ColumnMeter.series
var serverData = [{
group:'商品房预(现)售供应情况分析',
title:'兵团商品房预(现)售供应月度情况',
btn:[{title:'折线图',type:'line',etype:'straight'},{title:'柱状图',type:'column',etype:'group'},{title:'区域图',type:'area',etype:'curve'},],
opts: LineA,
chartType: "line",
extraType: "default",
id: "c0"
}, {
title:'各师商品房预(现)售供应情况',
btn:[{title:'折线图',type:'line',etype:'straight'},{title:'柱状图',type:'column',etype:'group'},{title:'区域图',type:'area',etype:'curve'},],
opts: Column,
chartType: "column",
extraType: "group",
id: "c1"
}, {
group:'商品房[住宅]预(现)售供应情况分析',
title:'兵团商品房预(现)售供应月度情况',
opts: ColumnMeter,
chartType: "column",
extraType: "meter",
id: "c2"
}, {
title:'各师商品房预(现)售供应情况',
opts: LineB,
chartType: "line",
extraType: "curve",
id: "c3"
}, {
title:'兵团商品房预(现)售供应月度情况',
btn:[{title:'分组图',type:'column',etype:'group'},{title:'堆叠图',type:'column',etype:'stack'},{title:'温度计图',type:'column',etype:'meter'}],
opts: Column,
chartType: "column",
extraType: "stack",
id: "c4"
}, {
group:'商品房预(现)售供应类别',
title:'兵团商品房预(现)售供应月度情况',
btn:[{title:'饼状图',type:'pie'},{title:'圆环图',type:'ring'}],
opts: sample.Pie,//result.data.Pie,
chartType: "pie",
id: "c5"
}, {
title:'兵团商品房预(现)售供应月度情况',
btn:[{title:'饼状图',type:'pie'},{title:'圆环图',type:'ring'}],
opts: sample.Ring,//result.data.Ring,
chartType: "ring",
id: "c6"
}, {
title:'兵团商品房预(现)售供应月度情况',
opts: sample.Gauge,//result.data.Gauge,
chartType: "gauge",
id: "c7"
}, {
title:'兵团商品房预(现)售供应月度情况',
btn:[{title:'面积图',type:'rose',etype:'area'},{title:'半径图',type:'rose',etype:'radius'},],
opts: sample.Pie,//result.data.Pie,
chartType: "rose",
extraType: "radius",
id: "c8"
}];
this.arr = serverData;
// return
// }
// this.$api.tip("网络错误,小程序端请检查合法域名");
},
}
}
</script>
<style>
page {
display: block;
height: 100%;
background-color: #efeff4;
}
.fl-row { display: flex; flex-direction: row; }
.bgwh { background-color: #FFFFFF; }/*白色*/
.g6 { color: #666; }/*浅黑*/
.tc { text-align: center; }
.f30 { font-size: 30upx; }
.p10{ padding: 10upx; }
.mt10{margin-top: 10upx;}
.mb
没有合适的资源?快使用搜索试试~ 我知道了~
温馨提示
本人十余年JAVA架构设计经验,擅长JAVA高可用、分布式、高并发系统架构设计。有志于做JAVA系统性的技术提升的同学可与我联系,交个朋友哦~ 本人十余年JAVA架构设计经验,擅长JAVA高可用、分布式、高并发系统架构设计。有志于做JAVA系统性的技术提升的同学可与我联系,交个朋友哦~ 本人十余年JAVA架构设计经验,擅长JAVA高可用、分布式、高并发系统架构设计。有志于做JAVA系统性的技术提升的同学可与我联系,交个朋友哦~
资源推荐
资源详情
资源评论
收起资源包目录
《毕业设计&代码复用》--基于uniapp+Springboot跨平台的项目任务管理系统设计毕业源码案例设计.zip (1690个子文件)
RandomDataUtil.class 45KB
ExcelUtil.class 22KB
SysUser.class 15KB
Convert.class 13KB
SysUserServiceImpl.class 13KB
JSONObject.class 12KB
ShiroConfig.class 12KB
TaskController.class 12KB
SysOperLog.class 10KB
ReflectUtils.class 10KB
SysMenuServiceImpl.class 10KB
BaseServiceImpl.class 10KB
BaseEntity.class 10KB
SysUserOnline.class 9KB
SysDeptServiceImpl.class 9KB
SysRoleServiceImpl.class 8KB
DateUtils.class 7KB
Task.class 7KB
SysMenu.class 7KB
FileUploadUtils.class 7KB
LogAspect.class 6KB
SysDept.class 6KB
HttpUtils.class 6KB
HttpClientUtils.class 6KB
KickoutSessionFilter.class 6KB
ChartController.class 6KB
ProjectController.class 6KB
UserRealm.class 6KB
OnlineWebSessionManager.class 6KB
BaseController.class 6KB
SysLogininfor.class 6KB
SysRole.class 5KB
StringUtils.class 5KB
ProjectuserController.class 5KB
TempstepController.class 5KB
AjaxResult.class 5KB
GlobalExceptionHandler.class 5KB
ProjecttempController.class 5KB
TasklabelController.class 4KB
IpUtils.class 4KB
PermissionUtils.class 4KB
LogUtils.class 4KB
DruidConfig.class 4KB
JSON.class 4KB
SysDictData.class 4KB
OnlineSession.class 4KB
OnlineSessionFilter.class 4KB
SysLoginService.class 4KB
LogoutFilter.class 4KB
SysPost.class 4KB
Project.class 4KB
SysPasswordService.class 4KB
SysPostServiceImpl.class 4KB
SpringSessionValidationScheduler.class 4KB
YamlUtil.class 4KB
MessageController.class 4KB
ShiroUtils.class 4KB
Projectuser.class 3KB
ServletUtils.class 3KB
SysDictDataServiceImpl.class 3KB
OnlineSessionDAO.class 3KB
Message.class 3KB
Tempstep.class 3KB
SysMenuTop.class 3KB
AsyncFactory.class 3KB
PageDomain.class 3KB
SysConfigServiceImpl.class 3KB
FileUtils.class 3KB
SysShiroService.class 3KB
AsyncFactory$4.class 3KB
Taskfile.class 3KB
Projecttemp.class 3KB
SysConfig.class 3KB
PinyinUtil.class 3KB
DataSourceAspect.class 3KB
AsyncOperLogToDb.class 3KB
AESUtil.class 3KB
Global.class 3KB
CaptchaValidateFilter.class 3KB
AsyncFactory$1.class 3KB
BeanUtils.class 3KB
SysDictType.class 3KB
UserConstants.class 3KB
Threads.class 2KB
CorsConfig.class 2KB
Md5Utils.class 2KB
ResourcesConfig.class 2KB
MapDataUtil.class 2KB
CaptchaConfig.class 2KB
DruidProperties.class 2KB
TableDataInfo.class 2KB
SpringUtils.class 2KB
Ztree.class 2KB
SysDictTypeServiceImpl.class 2KB
OnlineSessionFactory.class 2KB
ThreadPoolConfig.class 2KB
SysUserOnlineServiceImpl.class 2KB
DruidConfig$1.class 2KB
BaseService.class 2KB
Tasklabel.class 2KB
共 1690 条
- 1
- 2
- 3
- 4
- 5
- 6
- 17
资源评论
季风泯灭的季节
- 粉丝: 601
- 资源: 2920
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功