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 @@
components: {
uniEcCanvas
},
mounted() {
this.$refs['dashboardProgressCanvas'].init(this.inited)
},
methods: {
initChart() {
this.$nextTick(() => {
this.$refs['dashboardProgressCanvas'].init((canvas, width, height, canvasDpr) => {
chart = this.$echarts.init(canvas, null, {
width: width,
height: height,
devicePixelRatio: canvasDpr
})
canvas.setChart(chart)
const { endVal } = this.elementData.dataList
const { width: pCanvasWidth, strokeColor, trailColor, titleColor, strokeWidth, gapPosition, gapDegree, strokeLinecap} = this.elementInfo.option.progress
const guageChart = [{
name: "",
value: endVal
}]
const color = [
[endVal / 100, strokeColor],
[1, trailColor]
]
var startAngle = 180
var endAngle = 0
switch (gapPosition) {
case 'bottom':
if (gapDegree > 180) {
startAngle = 45 + (360 - gapDegree) / 2
endAngle = 135 - (360 - gapDegree) / 2
} else {
startAngle = 225 - 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;
inited(canvas, width, height, canvasDpr) {
chart = this.$echarts.init(canvas, null, {
width: width,
height: height,
devicePixelRatio: canvasDpr
})
canvas.setChart(chart)
let { endVal } = this.elementData.dataList
endVal = endVal || 0
const { width: pCanvasWidth, strokeColor, trailColor, titleColor, strokeWidth, gapPosition, gapDegree, strokeLinecap} = this.elementInfo.option.progress
const guageChart = [{
name: "",
value: endVal
}]
const color = [
[endVal / 100, strokeColor],
[1, trailColor]
]
var startAngle = 180
var endAngle = 0
switch (gapPosition) {
case 'bottom':
if (gapDegree > 180) {
startAngle = 45 + (360 - gapDegree) / 2
endAngle = 135 - (360 - gapDegree) / 2
} else {
startAngle = 225 - gapDegree / 2
endAngle = 45 - (90 - gapDegree / 2)
}
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,
}]
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)
}
chart.setOption(options)
return chart
})
})
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
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>
<view class="normal-table">
<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
class="table"
:style="[tableStyle]"
>
<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 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-else-if="item.slots.customRender == 'picture'">
<u-image
......@@ -41,7 +41,6 @@
mixins: [echartElementData],
data() {
return {
columns: [],
chartTables: [],
align: {
left: 'start',
......@@ -55,7 +54,7 @@
const { frameStyle, frameWidth, frameColor, bordered } = this.elementInfo.table
const { backgroundColor } = this.elementInfo.table.tableCell
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-top': bordered ? `${frameStyle || 'solid'} ${frameWidth || 1}px ${frameColor || '#e4e7ed'}`: 'none',
'background-color': backgroundColor
......@@ -91,7 +90,6 @@
methods: {
initChart() {
this.$nextTick(() => {
this.columns = this.elementInfo.table.column
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