此插件为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
基于uniapp+Springboot跨平台的项目任务管理系统设计毕业设计.zip （1692个子文件） 
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共 1692 条
- 1
- 2
- 3
- 4
- 5
- 6
- 17
资源评论
