Skip to content

E
ec-report-refactor
Commit 74717060 authored by Jenny's avatar Jenny
Browse files
Options

feat: 进度条初始化修改

parent f46d5e05
Hide whitespace changes
Inline Side-by-side
Showing with 108 additions and 107 deletions
components/DashboardProgress/DashboardProgress.vue
View file @ 74717060
...@@ -27,111 +27,114 @@ ...@@ -27,111 +27,114 @@
components: { components: {
uniEcCanvas uniEcCanvas
}, },
mounted() {
this.$refs['dashboardProgressCanvas'].init(this.inited)
},
methods: { methods: {
initChart() { inited(canvas, width, height, canvasDpr) {
this.$nextTick(() => { chart = this.$echarts.init(canvas, null, {
this.$refs['dashboardProgressCanvas'].init((canvas, width, height, canvasDpr) => { width: width,
chart = this.$echarts.init(canvas, null, { height: height,
width: width, devicePixelRatio: canvasDpr
height: height, })
devicePixelRatio: canvasDpr canvas.setChart(chart)
}) let { endVal } = this.elementData.dataList
canvas.setChart(chart) endVal = endVal || 0
const { endVal } = this.elementData.dataList const { width: pCanvasWidth, strokeColor, trailColor, titleColor, strokeWidth, gapPosition, gapDegree, strokeLinecap} = this.elementInfo.option.progress
const { width: pCanvasWidth, strokeColor, trailColor, titleColor, strokeWidth, gapPosition, gapDegree, strokeLinecap} = this.elementInfo.option.progress const guageChart = [{
const guageChart = [{ name: "",
name: "", value: endVal
value: endVal }]
}] const color = [
const color = [ [endVal / 100, strokeColor],
[endVal / 100, strokeColor], [1, trailColor]
[1, trailColor] ]
] var startAngle = 180
var startAngle = 180 var endAngle = 0
var endAngle = 0 switch (gapPosition) {
switch (gapPosition) { case 'bottom':
case 'bottom': if (gapDegree > 180) {
if (gapDegree > 180) { startAngle = 45 + (360 - gapDegree) / 2
startAngle = 45 + (360 - gapDegree) / 2 endAngle = 135 - (360 - gapDegree) / 2
endAngle = 135 - (360 - gapDegree) / 2 } else {
} else { startAngle = 225 - gapDegree / 2
startAngle = 225 - gapDegree / 2 endAngle = 45 - (90 - gapDegree / 2)
endAngle = 45 - (90 - gapDegree / 2)
}
break;
case 'top':
if (gapDegree > 180) {
startAngle = 225 + (360 - gapDegree) / 2
endAngle = 315 - (360 - gapDegree) / 2
} else {
startAngle = 315 + (90 - gapDegree / 2)
endAngle = 135 + (gapDegree / 2)
}
break;
case 'left':
if (gapDegree > 180) {
startAngle = -45 + (360 - gapDegree) / 2
endAngle = 45 - (360 - gapDegree) / 2
} else {
startAngle = 135 - gapDegree / 2
endAngle = -135 + gapDegree / 2
}
break;
default:
startAngle = 315 - gapDegree / 2
endAngle = 45 + gapDegree / 2
break;
} }
const axisLineWidth = strokeWidth / 100 * pCanvasWidth break;
const options = { case 'top':
...this.elementInfo.option, if (gapDegree > 180) {
tooltip: { startAngle = 225 + (360 - gapDegree) / 2
formatter: '{a} <br/>{b} : {c}%' endAngle = 315 - (360 - gapDegree) / 2
}, } else {
title: [{ startAngle = 315 + (90 - gapDegree / 2)
text: endVal + '%', endAngle = 135 + (gapDegree / 2)
x: 'center',
top: 'middle',
textStyle: {
fontSize: Math.max(14 * pCanvasWidth / 132, 14),
color: titleColor,
},
}],
series: [{
type: 'gauge',
startAngle: startAngle + 25,
endAngle: endAngle - 25,
pointer: {
show: false,
},
axisLine: {
show: true,
lineStyle: {
color: color,
width: axisLineWidth,
shadowOffsetX: 0,
shadowOffsetY: 0,
opacity: 1,
},
roundCap: strokeLinecap == 'round' ? true : false
},
splitLine: {
show: false
},
axisLabel: {
show: false
},
axisTick: {
show: false
},
radius: pCanvasWidth / 2 - strokeWidth * 2,
}]
} }
chart.setOption(options) break;
return chart case 'left':
}) if (gapDegree > 180) {
}) startAngle = -45 + (360 - gapDegree) / 2
endAngle = 45 - (360 - gapDegree) / 2
} else {
startAngle = 135 - gapDegree / 2
endAngle = -135 + gapDegree / 2
}
break;
default:
startAngle = 315 - gapDegree / 2
endAngle = 45 + gapDegree / 2
break;
}
const axisLineWidth = strokeWidth / 100 * pCanvasWidth
const options = {
...this.elementInfo.option,
tooltip: {
formatter: '{a} <br/>{b} : {c}%'
},
title: [{
text: endVal + '%',
x: 'center',
top: 'middle',
textStyle: {
fontSize: Math.max(14 * pCanvasWidth / 132, 14),
color: titleColor,
},
}],
series: [{
type: 'gauge',
startAngle: startAngle + 25,
endAngle: endAngle - 25,
pointer: {
show: false,
},
axisLine: {
show: true,
lineStyle: {
color: color,
width: axisLineWidth,
shadowOffsetX: 0,
shadowOffsetY: 0,
opacity: 1,
},
roundCap: strokeLinecap == 'round' ? true : false
},
splitLine: {
show: false
},
axisLabel: {
show: false
},
axisTick: {
show: false
},
radius: pCanvasWidth / 2 - strokeWidth * 2,
}]
}
chart.setOption(options)
return chart
},
initChart() {
this.$refs['dashboardProgressCanvas'].init(this.inited)
} }
} }
} }
......
components/Table/Table.vue
View file @ 74717060
<template> <template>
<view class="normal-table"> <view class="normal-table">
<NormalTitle :elementInfo="elementInfo"></NormalTitle> <NormalTitle :elementInfo="elementInfo"></NormalTitle>
<scroll-view v-if="chartTables.length" scroll-x="true" class="scroll-view_H"> <scroll-view scroll-x="true" class="scroll-view_H">
<view <view
class="table" class="table"
:style="[tableStyle]" :style="[tableStyle]"
> >
<view class="tr" v-if="elementInfo.table.tableHeader.showHeader"> <view class="tr" v-if="elementInfo.table.tableHeader.showHeader">
<view class="th" v-for="(item, index) in columns" :key="index" :style="[thStyle]">{{item.title}}</view> <view class="th" v-for="(item, index) in elementInfo.table.column" :key="index" :style="[thStyle]">{{item.title}}</view>
</view> </view>
<view class="tr" v-for="(cell, cellIndex) in chartTables" :key="cellIndex" @tap="cellClick(cell)"> <view class="tr" v-for="(cell, cellIndex) in chartTables" :key="cellIndex" @tap="cellClick(cell)">
<view class="td" :style="[tdStyle]" v-for="(item, index) in columns" :key="index"> <view class="td" :style="[tdStyle]" v-for="(item, index) in elementInfo.table.column" :key="index">
<template v-if="item.slots.customRender == 'rank'">{{index + 1}}</template> <template v-if="item.slots.customRender == 'rank'">{{index + 1}}</template>
<template v-else-if="item.slots.customRender == 'picture'"> <template v-else-if="item.slots.customRender == 'picture'">
<u-image <u-image
...@@ -41,7 +41,6 @@ ...@@ -41,7 +41,6 @@
mixins: [echartElementData], mixins: [echartElementData],
data() { data() {
return { return {
columns: [],
chartTables: [], chartTables: [],
align: { align: {
left: 'start', left: 'start',
...@@ -55,7 +54,7 @@ ...@@ -55,7 +54,7 @@
const { frameStyle, frameWidth, frameColor, bordered } = this.elementInfo.table const { frameStyle, frameWidth, frameColor, bordered } = this.elementInfo.table
const { backgroundColor } = this.elementInfo.table.tableCell const { backgroundColor } = this.elementInfo.table.tableCell
return { return {
'width': `${240 * this.columns.length}rpx`, 'width': `${240 * this.elementInfo.table.column.length}rpx`,
'border-left': bordered ? `${frameStyle || 'solid'} ${frameWidth || 1}px ${frameColor || '#e4e7ed'}`: 'none', 'border-left': bordered ? `${frameStyle || 'solid'} ${frameWidth || 1}px ${frameColor || '#e4e7ed'}`: 'none',
'border-top': bordered ? `${frameStyle || 'solid'} ${frameWidth || 1}px ${frameColor || '#e4e7ed'}`: 'none', 'border-top': bordered ? `${frameStyle || 'solid'} ${frameWidth || 1}px ${frameColor || '#e4e7ed'}`: 'none',
'background-color': backgroundColor 'background-color': backgroundColor
...@@ -91,7 +90,6 @@ ...@@ -91,7 +90,6 @@
methods: { methods: {
initChart() { initChart() {
this.$nextTick(() => { this.$nextTick(() => {
this.columns = this.elementInfo.table.column
this.chartTables = this.elementData.dataList.chartTables this.chartTables = this.elementData.dataList.chartTables
}) })
}, },
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment