32 changed files with 2163 additions and 59 deletions
-
22components/pozCard/pozCard.vue
-
5components/topNavbar/topNavbar.vue
-
14manifest.json
-
31pages.json
-
1pages/carEntry/simulateAppointment/comp/step1.vue
-
2pages/indexEntry/consult/record/comp/complaintItem.vue
-
2pages/indexEntry/enroll/payment/payment.vue
-
60pages/indexEntry/enroll/paymentSuccess/paymentSuccess.vue
-
283pages/indexEntry/enroll/uploadAvatar/uAvatarCropper/uAvatarCropper.vue
-
1266pages/indexEntry/enroll/uploadAvatar/uAvatarCropper/weCropper.js
-
53pages/indexEntry/enroll/uploadAvatar/uploadAvatar.vue
-
2pages/indexEntry/examines/warningEducation/warningEducation.vue
-
2pages/indexEntry/findShcool/findShcool.vue
-
2pages/indexEntry/industryPolicy/industryPolicy.vue
-
2pages/indexEntry/publicVideo/publicVideo.vue
-
2pages/indexEntry/theory/theory.vue
-
24pages/mineEntry/carData/carData.vue
-
174pages/mineEntry/carData/columnChart.vue
-
135pages/mineEntry/carData/ringChart.vue
-
4pages/mineEntry/myAppointment/comp/examin.vue
-
6pages/mineEntry/myAppointment/comp/imitate.vue
-
4pages/mineEntry/myAppointment/comp/opera.vue
-
4pages/mineEntry/myAppointment/detail/examin.vue
-
2pages/mineEntry/myAppointment/detail/imitate.vue
-
4pages/mineEntry/myAppointment/detail/opera.vue
-
2pages/mineEntry/myAppointment/myAppointment.vue
-
2pages/mineEntry/myCollect/myCollect.vue
-
4pages/mineEntry/myOrder/comp/opera.vue
-
14pages/mineEntry/myOrder/detail/detail.vue
-
2pages/mineEntry/myOrder/myOrder.vue
-
65pages/tabbar/index/index.vue
-
27pages/userCenter/login/login.vue
@ -0,0 +1,60 @@ |
|||||
|
<template> |
||||
|
<view class="pageBgImg"> |
||||
|
<topNavbar title="报名结果"></topNavbar> |
||||
|
<view class="pad"> |
||||
|
<view class="card"> |
||||
|
<view class="icon_img"> |
||||
|
<image src="../../../../static/images/index/ic_zixun.png" mode=""></image> |
||||
|
</view> |
||||
|
<view class="text">恭喜您，报名成功！</view> |
||||
|
<view class="txt">开启您的学车之旅吧！</view> |
||||
|
</view> |
||||
|
<view class="btnBg" @click="goPage">开始学车</view> |
||||
|
</view> |
||||
|
|
||||
|
</view> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
export default { |
||||
|
methods: { |
||||
|
goPage() { |
||||
|
uni.switchTab({ |
||||
|
url: '/pages/tabbar/learnCar/index' |
||||
|
}) |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style lang="scss" scoped> |
||||
|
.pageBgImg { |
||||
|
.card { |
||||
|
width: 100%; |
||||
|
height: 392rpx; |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
align-items: center; |
||||
|
justify-content: center; |
||||
|
.icon_img { |
||||
|
width: 96rpx; |
||||
|
height: 96rpx; |
||||
|
} |
||||
|
.text { |
||||
|
font-size: 36rpx; |
||||
|
color: #373A43; |
||||
|
font-weight: 500; |
||||
|
margin: 32rpx 0 22rpx 0; |
||||
|
} |
||||
|
.txt { |
||||
|
font-size: 28rpx; |
||||
|
color: #696B72; |
||||
|
font-weight: 400; |
||||
|
} |
||||
|
} |
||||
|
.btnBg { |
||||
|
margin: 80rpx auto; |
||||
|
width: 369rpx; |
||||
|
} |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,283 @@ |
|||||
|
<template> |
||||
|
<view class="content"> |
||||
|
<view class="cropper-wrapper" :style="{ height: cropperOpt.height + 'px' }"> |
||||
|
<canvas |
||||
|
class="cropper" |
||||
|
:disable-scroll="true" |
||||
|
@touchstart="touchStart" |
||||
|
@touchmove="touchMove" |
||||
|
@touchend="touchEnd" |
||||
|
:style="{ width: cropperOpt.width, height: cropperOpt.height, backgroundColor: 'rgba(0, 0, 0, 0.8)' }" |
||||
|
canvas-id="cropper" |
||||
|
id="cropper" |
||||
|
></canvas> |
||||
|
<canvas |
||||
|
class="cropper" |
||||
|
:disable-scroll="true" |
||||
|
:style="{ |
||||
|
position: 'fixed', |
||||
|
top: `-${cropperOpt.width * cropperOpt.pixelRatio}px`, |
||||
|
left: `-${cropperOpt.height * cropperOpt.pixelRatio}px`, |
||||
|
width: `${cropperOpt.width * cropperOpt.pixelRatio}px`, |
||||
|
height: `${cropperOpt.height * cropperOpt.pixelRatio}` |
||||
|
}" |
||||
|
canvas-id="targetId" |
||||
|
id="targetId" |
||||
|
></canvas> |
||||
|
</view> |
||||
|
<view class="cropper-buttons safe-area-padding" :style="{ height: bottomNavHeight + 'px' }"> |
||||
|
<view class="upload" @click="uploadTap">取消</view> |
||||
|
<view class="getCropperImage" @click="getCropperImage(false)">完成</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import WeCropper from './weCropper.js'; |
||||
|
export default { |
||||
|
props: { |
||||
|
// 裁剪矩形框的样式，其中可包含的属性为lineWidth-边框宽度(单位rpx)，color: 边框颜色， |
||||
|
// mask-遮罩颜色，一般设置为一个rgba的透明度，如"rgba(0, 0, 0, 0.35)" |
||||
|
boundStyle: { |
||||
|
type: Object, |
||||
|
default() { |
||||
|
return { |
||||
|
lineWidth: 4, |
||||
|
borderColor: 'rgb(245, 245, 245)', |
||||
|
mask: 'rgba(0, 0, 0, 0.35)' |
||||
|
}; |
||||
|
} |
||||
|
}, |
||||
|
avatarSrc: { |
||||
|
type: String, |
||||
|
default: '' |
||||
|
} |
||||
|
// // 裁剪框宽度，单位rpx |
||||
|
// rectWidth: { |
||||
|
// type: [String, Number], |
||||
|
// default: 400 |
||||
|
// }, |
||||
|
// // 裁剪框高度，单位rpx |
||||
|
// rectHeight: { |
||||
|
// type: [String, Number], |
||||
|
// default: 400 |
||||
|
// }, |
||||
|
// // 输出图片宽度，单位rpx |
||||
|
// destWidth: { |
||||
|
// type: [String, Number], |
||||
|
// default: 400 |
||||
|
// }, |
||||
|
// // 输出图片高度，单位rpx |
||||
|
// destHeight: { |
||||
|
// type: [String, Number], |
||||
|
// default: 400 |
||||
|
// }, |
||||
|
// // 输出的图片类型，如果发现裁剪的图片很大，可能是因为设置为了"png"，改成"jpg"即可 |
||||
|
// fileType: { |
||||
|
// type: String, |
||||
|
// default: 'jpg', |
||||
|
// }, |
||||
|
// // 生成的图片质量 |
||||
|
// // H5上无效，目前不考虑使用此参数 |
||||
|
// quality: { |
||||
|
// type: [Number, String], |
||||
|
// default: 1 |
||||
|
// } |
||||
|
}, |
||||
|
data() { |
||||
|
return { |
||||
|
// 底部导航的高度 |
||||
|
bottomNavHeight: 50, |
||||
|
originWidth: 200, |
||||
|
width: 0, |
||||
|
height: 0, |
||||
|
cropperOpt: { |
||||
|
id: 'cropper', |
||||
|
targetId: 'targetCropper', |
||||
|
pixelRatio: 1, |
||||
|
width: 0, |
||||
|
height: 0, |
||||
|
scale: 2.5, |
||||
|
zoom: 8, |
||||
|
cut: { |
||||
|
x: (this.width - this.originWidth) / 2, |
||||
|
y: (this.height - this.originWidth) / 2, |
||||
|
width: this.originWidth, |
||||
|
height: this.originWidth |
||||
|
}, |
||||
|
boundStyle: { |
||||
|
lineWidth: uni.upx2px(this.boundStyle.lineWidth), |
||||
|
mask: this.boundStyle.mask, |
||||
|
color: this.boundStyle.borderColor |
||||
|
} |
||||
|
}, |
||||
|
// 裁剪框和输出图片的尺寸，高度默认等于宽度 |
||||
|
// 输出图片宽度，单位px |
||||
|
destWidth: 147, |
||||
|
// 裁剪框宽度，单位px |
||||
|
rectWidth: 295, |
||||
|
// 输出的图片类型，如果'png'类型发现裁剪的图片太大，改成"jpg"即可 |
||||
|
fileType: 'png', |
||||
|
src: '', // 选择的图片路径，用于在点击确定时，判断是否选择了图片 |
||||
|
}; |
||||
|
}, |
||||
|
onLoad(options) { |
||||
|
|
||||
|
let rectInfo = uni.getSystemInfoSync(); |
||||
|
this.width = rectInfo.windowWidth; |
||||
|
this.height = rectInfo.windowHeight - this.bottomNavHeight; |
||||
|
this.cropperOpt.width = this.width; |
||||
|
this.cropperOpt.height = this.height; |
||||
|
this.cropperOpt.pixelRatio = rectInfo.pixelRatio; |
||||
|
|
||||
|
if (this.destWidth) this.destWidth = this.destWidth; |
||||
|
if (this.rectWidth) { |
||||
|
let rectWidth = Number(this.rectWidth); |
||||
|
this.cropperOpt.cut = { |
||||
|
x: (this.width - rectWidth) / 2, |
||||
|
y: (this.height - rectWidth) / 2, |
||||
|
width: rectWidth, |
||||
|
height: 413 |
||||
|
}; |
||||
|
} |
||||
|
this.rectWidth = this.rectWidth; |
||||
|
if (this.fileType) this.fileType = this.fileType; |
||||
|
// 初始化 |
||||
|
this.cropper = new WeCropper(this.cropperOpt) |
||||
|
.on('ready', ctx => { |
||||
|
// wecropper is ready for work! |
||||
|
}) |
||||
|
.on('beforeImageLoad', ctx => { |
||||
|
// before picture loaded, i can do something |
||||
|
}) |
||||
|
.on('imageLoad', ctx => { |
||||
|
// picture loaded |
||||
|
}) |
||||
|
.on('beforeDraw', (ctx, instance) => { |
||||
|
// before canvas draw,i can do something |
||||
|
}); |
||||
|
// 设置导航栏样式，以免用户在page.json中没有设置为黑色背景 |
||||
|
uni.setNavigationBarColor({ |
||||
|
frontColor: '#ffffff', |
||||
|
backgroundColor: '#000000' |
||||
|
}); |
||||
|
this.src = decodeURIComponent(options.url) |
||||
|
// 获取裁剪图片资源后，给data添加src属性及其值 |
||||
|
this.cropper.pushOrign(this.src); |
||||
|
}, |
||||
|
methods: { |
||||
|
touchStart(e) { |
||||
|
this.cropper.touchStart(e); |
||||
|
}, |
||||
|
touchMove(e) { |
||||
|
this.cropper.touchMove(e); |
||||
|
}, |
||||
|
touchEnd(e) { |
||||
|
this.cropper.touchEnd(e); |
||||
|
}, |
||||
|
getCropperImage(isPre = false) { |
||||
|
if(!this.src) return this.$u.toast('请先选择图片再裁剪'); |
||||
|
|
||||
|
let cropper_opt = { |
||||
|
destHeight: 206, // uni.canvasToTempFilePath要求这些参数为数值 |
||||
|
destWidth: Number(this.destWidth), |
||||
|
fileType: this.fileType |
||||
|
}; |
||||
|
this.cropper.getCropperImage(cropper_opt, (path, err) => { |
||||
|
if (err) { |
||||
|
uni.showModal({ |
||||
|
title: '温馨提示', |
||||
|
content: err.message |
||||
|
}); |
||||
|
} else { |
||||
|
if (isPre) { |
||||
|
uni.previewImage({ |
||||
|
current: '', // 当前显示图片的 http 链接 |
||||
|
urls: [path] // 需要预览的图片 http 链接列表 |
||||
|
}); |
||||
|
} else { |
||||
|
uni.$emit('uAvatarCropper', path); |
||||
|
uni.navigateBack() |
||||
|
} |
||||
|
} |
||||
|
}); |
||||
|
}, |
||||
|
uploadTap() { |
||||
|
uni.navigateBack() |
||||
|
return |
||||
|
const self = this; |
||||
|
uni.chooseImage({ |
||||
|
count: 1, // 默认9 |
||||
|
sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有 |
||||
|
sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有 |
||||
|
success: (res) => { |
||||
|
self.src = res.tempFilePaths[0]; |
||||
|
// 获取裁剪图片资源后，给data添加src属性及其值 |
||||
|
|
||||
|
self.cropper.pushOrign(this.src); |
||||
|
} |
||||
|
}); |
||||
|
} |
||||
|
} |
||||
|
}; |
||||
|
</script> |
||||
|
|
||||
|
<style scoped lang="scss"> |
||||
|
@import '@/uni_modules/uview-ui/libs/css/components.scss'; |
||||
|
|
||||
|
.content { |
||||
|
background: rgba(255, 255, 255, 1); |
||||
|
} |
||||
|
|
||||
|
.cropper { |
||||
|
position: absolute; |
||||
|
top: 0; |
||||
|
left: 0; |
||||
|
width: 100%; |
||||
|
height: 100%; |
||||
|
z-index: 11; |
||||
|
} |
||||
|
|
||||
|
.cropper-buttons { |
||||
|
background-color: #000000; |
||||
|
color: #eee; |
||||
|
} |
||||
|
|
||||
|
.cropper-wrapper { |
||||
|
position: relative; |
||||
|
// @include vue-flex; |
||||
|
flex-direction: row; |
||||
|
justify-content: space-between; |
||||
|
align-items: center; |
||||
|
width: 100%; |
||||
|
background-color: #000; |
||||
|
} |
||||
|
|
||||
|
.cropper-buttons { |
||||
|
width: 100vw; |
||||
|
// @include vue-flex; |
||||
|
flex-direction: row; |
||||
|
justify-content: space-between; |
||||
|
align-items: center; |
||||
|
position: fixed; |
||||
|
bottom: 0; |
||||
|
left: 0; |
||||
|
font-size: 28rpx; |
||||
|
} |
||||
|
|
||||
|
.cropper-buttons .upload, |
||||
|
.cropper-buttons .getCropperImage { |
||||
|
width: 50%; |
||||
|
text-align: center; |
||||
|
} |
||||
|
|
||||
|
.cropper-buttons .upload { |
||||
|
text-align: left; |
||||
|
padding-left: 50rpx; |
||||
|
} |
||||
|
|
||||
|
.cropper-buttons .getCropperImage { |
||||
|
text-align: right; |
||||
|
padding-right: 50rpx; |
||||
|
} |
||||
|
</style> |
||||
1266
pages/indexEntry/enroll/uploadAvatar/uAvatarCropper/weCropper.js
File diff suppressed because it is too large
View File
File diff suppressed because it is too large
View File
@ -0,0 +1,174 @@ |
|||||
|
<template> |
||||
|
<view class="charts-box"> |
||||
|
<qiun-data-charts |
||||
|
type="column" |
||||
|
:opts="opts" |
||||
|
:chartData="chartData" |
||||
|
/> |
||||
|
</view> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
export default { |
||||
|
data() { |
||||
|
return { |
||||
|
chartData: {}, |
||||
|
//这里的 opts 是图表类型 type="column" 的全部配置参数，您可以将此配置复制到 config-ucharts.js 文件中下标为 ['column'] 的节点中来覆盖全局默认参数。实际应用过程中 opts 只需传入与全局默认参数中不一致的【某一个属性】即可实现同类型的图表显示不同的样式，达到页面简洁的需求。 |
||||
|
opts: { |
||||
|
timing: "easeOut", |
||||
|
duration: 1000, |
||||
|
rotate: false, |
||||
|
rotateLock: false, |
||||
|
color: ["#1890FF","#91CB74","#FAC858","#EE6666","#73C0DE","#3CA272","#FC8452","#9A60B4","#ea7ccc"], |
||||
|
padding: [15,15,0,5], |
||||
|
fontSize: 13, |
||||
|
fontColor: "#1989FA", |
||||
|
dataLabel: true, |
||||
|
dataPointShape: true, |
||||
|
dataPointShapeType: "solid", |
||||
|
touchMoveLimit: 60, |
||||
|
enableScroll: false, |
||||
|
enableMarkLine: false, |
||||
|
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 |
||||
|
}, |
||||
|
xAxis: { |
||||
|
disableGrid: true, |
||||
|
disabled: false, |
||||
|
axisLine: true, |
||||
|
axisLineColor: "#E8E9EC", |
||||
|
calibration: false, |
||||
|
fontColor: "#686B73", |
||||
|
fontSize: 8, |
||||
|
lineHeight: 20, |
||||
|
marginTop: 0, |
||||
|
rotateLabel: false, |
||||
|
rotateAngle: 45, |
||||
|
itemCount: 5, |
||||
|
boundaryGap: "center", |
||||
|
splitNumber: 5, |
||||
|
gridColor: "#CCCCCC", |
||||
|
gridType: "solid", |
||||
|
dashLength: 4, |
||||
|
gridEval: 1, |
||||
|
scrollShow: false, |
||||
|
scrollAlign: "left", |
||||
|
scrollColor: "#A6A6A6", |
||||
|
scrollBackgroundColor: "#EFEBEF", |
||||
|
title: "", |
||||
|
titleFontSize: 13, |
||||
|
titleOffsetY: 0, |
||||
|
titleOffsetX: 0, |
||||
|
titleFontColor: "#666666", |
||||
|
format: "" |
||||
|
}, |
||||
|
yAxis: { |
||||
|
data: [ |
||||
|
{ |
||||
|
min: 0 |
||||
|
} |
||||
|
], |
||||
|
disabled: true, |
||||
|
disableGrid: false, |
||||
|
splitNumber: 5, |
||||
|
gridType: "dash", |
||||
|
dashLength: 8, |
||||
|
gridColor: "#E8E9EC", |
||||
|
padding: 10, |
||||
|
showTitle: false |
||||
|
}, |
||||
|
extra: { |
||||
|
column: { |
||||
|
type: "group", |
||||
|
width: 9, |
||||
|
activeBgColor: "#000000", |
||||
|
activeBgOpacity: 0.08, |
||||
|
seriesGap: 2, |
||||
|
categoryGap: 3, |
||||
|
barBorderCircle: false, |
||||
|
linearType: "none", |
||||
|
linearOpacity: 1, |
||||
|
colorStop: 0, |
||||
|
meterBorder: 1, |
||||
|
meterFillColor: "#FFFFFF", |
||||
|
labelPosition: "outside" |
||||
|
}, |
||||
|
tooltip: { |
||||
|
showBox: false, |
||||
|
showArrow: true, |
||||
|
showCategory: false, |
||||
|
borderWidth: 0, |
||||
|
borderRadius: 0, |
||||
|
borderColor: "#000000", |
||||
|
borderOpacity: 0.7, |
||||
|
bgColor: "#000000", |
||||
|
bgOpacity: 0.7, |
||||
|
gridType: "solid", |
||||
|
dashLength: 4, |
||||
|
gridColor: "#CCCCCC", |
||||
|
boxPadding: 3, |
||||
|
fontSize: 12, |
||||
|
lineHeight: 20, |
||||
|
fontColor: "#FFFFFF", |
||||
|
legendShow: true, |
||||
|
legendShape: "auto", |
||||
|
splitLine: true, |
||||
|
horizentalLine: false, |
||||
|
xAxisLabel: false, |
||||
|
yAxisLabel: false, |
||||
|
labelBgColor: "#FFFFFF", |
||||
|
labelBgOpacity: 0.7, |
||||
|
labelFontColor: "#666666" |
||||
|
}, |
||||
|
markLine: { |
||||
|
type: "solid", |
||||
|
dashLength: 4, |
||||
|
data: [] |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
}; |
||||
|
}, |
||||
|
mounted() { |
||||
|
this.getServerData(); |
||||
|
}, |
||||
|
methods: { |
||||
|
getServerData() { |
||||
|
//模拟从服务器获取数据时的延时 |
||||
|
setTimeout(() => { |
||||
|
//模拟服务器返回数据，如果数据格式和标准格式不同，需自行按下面的格式拼接 |
||||
|
let res = { |
||||
|
categories: ["科目一","科目二","科目三道路","科目三理论",], |
||||
|
series: [ |
||||
|
{ |
||||
|
name: "目标值", |
||||
|
data: [35,36,31,33,] |
||||
|
} |
||||
|
] |
||||
|
}; |
||||
|
this.chartData = JSON.parse(JSON.stringify(res)); |
||||
|
}, 500); |
||||
|
}, |
||||
|
} |
||||
|
}; |
||||
|
</script> |
||||
|
|
||||
|
<style scoped> |
||||
|
/* 请根据实际需求修改父元素尺寸，组件自动识别宽高 */ |
||||
|
.charts-box { |
||||
|
width: 100%; |
||||
|
height: 100%; |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,135 @@ |
|||||
|
<template> |
||||
|
<view class="charts-box"> |
||||
|
<qiun-data-charts |
||||
|
type="ring" |
||||
|
:opts="opts" |
||||
|
:chartData="chartData" |
||||
|
:onmouse="false" |
||||
|
/> |
||||
|
</view> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
export default { |
||||
|
data() { |
||||
|
return { |
||||
|
chartData: {}, |
||||
|
//这里的 opts 是图表类型 type="ring" 的全部配置参数，您可以将此配置复制到 config-ucharts.js 文件中下标为 ['ring'] 的节点中来覆盖全局默认参数。实际应用过程中 opts 只需传入与全局默认参数中不一致的【某一个属性】即可实现同类型的图表显示不同的样式，达到页面简洁的需求。 |
||||
|
opts: { |
||||
|
timing: "easeOut", |
||||
|
duration: 1000, |
||||
|
rotate: false, |
||||
|
rotateLock: false, |
||||
|
color: ["#F2D39B","#9BF2D6","#9BB5F2","#AAD993","#73C0DE","#3CA272","#FC8452","#9A60B4","#ea7ccc"], |
||||
|
padding: [5,5,5,5], |
||||
|
fontSize: 13, |
||||
|
fontColor: "#666666", |
||||
|
dataLabel: false, |
||||
|
dataPointShape: true, |
||||
|
dataPointShapeType: "solid", |
||||
|
touchMoveLimit: 60, |
||||
|
enableScroll: false, |
||||
|
enableMarkLine: false, |
||||
|
legend: { |
||||
|
show: true, |
||||
|
position: "right", |
||||
|
lineHeight: 25, |
||||
|
float: "center", |
||||
|
padding: 5, |
||||
|
margin: 5, |
||||
|
backgroundColor: "rgba(0,0,0,0)", |
||||
|
borderColor: "rgba(0,0,0,0)", |
||||
|
borderWidth: 0, |
||||
|
fontSize: 13, |
||||
|
fontColor: "#666666", |
||||
|
hiddenColor: "#CECECE", |
||||
|
itemGap: 10 |
||||
|
}, |
||||
|
title: { |
||||
|
name: "", |
||||
|
fontSize: 15, |
||||
|
color: "#666666", |
||||
|
offsetX: 0, |
||||
|
offsetY: 0 |
||||
|
}, |
||||
|
subtitle: { |
||||
|
name: "", |
||||
|
fontSize: 25, |
||||
|
color: "#7cb5ec", |
||||
|
offsetX: 0, |
||||
|
offsetY: 0 |
||||
|
}, |
||||
|
extra: { |
||||
|
ring: { |
||||
|
ringWidth: 15, |
||||
|
activeOpacity: 0.5, |
||||
|
activeRadius: 10, |
||||
|
offsetAngle: 0, |
||||
|
labelWidth: 15, |
||||
|
border: false, |
||||
|
borderWidth: 3, |
||||
|
borderColor: "#FFFFFF", |
||||
|
centerColor: "#FFFFFF", |
||||
|
customRadius: 0, |
||||
|
linearType: "none" |
||||
|
}, |
||||
|
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", |
||||
|
boxPadding: 3, |
||||
|
fontSize: 13, |
||||
|
lineHeight: 20, |
||||
|
fontColor: "#FFFFFF", |
||||
|
legendShow: true, |
||||
|
legendShape: "auto", |
||||
|
splitLine: true, |
||||
|
horizentalLine: false, |
||||
|
xAxisLabel: false, |
||||
|
yAxisLabel: false, |
||||
|
labelBgColor: "#FFFFFF", |
||||
|
labelBgOpacity: 0.7, |
||||
|
labelFontColor: "#666666" |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
}; |
||||
|
}, |
||||
|
mounted() { |
||||
|
this.getServerData(); |
||||
|
}, |
||||
|
methods: { |
||||
|
getServerData() { |
||||
|
//模拟从服务器获取数据时的延时 |
||||
|
setTimeout(() => { |
||||
|
//模拟服务器返回数据，如果数据格式和标准格式不同，需自行按下面的格式拼接 |
||||
|
let res = { |
||||
|
series: [ |
||||
|
{ |
||||
|
data: [{"name":"科目一","value":50},{"name":"模拟器","value":30},{"name":"科目二","value":20},{"name":"科目三","value":18}] |
||||
|
} |
||||
|
] |
||||
|
}; |
||||
|
this.chartData = JSON.parse(JSON.stringify(res)); |
||||
|
}, 500); |
||||
|
}, |
||||
|
} |
||||
|
}; |
||||
|
</script> |
||||
|
|
||||
|
<style scoped> |
||||
|
/* 请根据实际需求修改父元素尺寸，组件自动识别宽高 */ |
||||
|
.charts-box { |
||||
|
width: 100%; |
||||
|
height: 100%; |
||||
|
} |
||||
|
</style> |
||||
Write
Preview
Loading…
Cancel
Save
Reference in new issue