|
@@ -13,11 +13,18 @@
|
|
|
</span>
|
|
|
</statistic-item>
|
|
|
</statistic>
|
|
|
- <ve-histogram style="width: 100%;" height="350px" :data="chartData" :data-empty="dataEmpty"></ve-histogram>
|
|
|
+ <ve-histogram
|
|
|
+ style="width: 100%;"
|
|
|
+ height="350px"
|
|
|
+ :data="chartData"
|
|
|
+ :data-empty="dataEmpty"
|
|
|
+ :data-zoom="dataZoom"
|
|
|
+ ></ve-histogram>
|
|
|
</el-card>
|
|
|
</template>
|
|
|
<script>
|
|
|
import 'v-charts/lib/style.css'
|
|
|
+import 'echarts/lib/component/dataZoom'
|
|
|
import countTo from 'vue-count-to'
|
|
|
import veHistogram from 'v-charts/lib/histogram.common'
|
|
|
export default {
|
|
@@ -35,23 +42,31 @@ export default {
|
|
|
HOMEWORK_COMMENT_RATE: this.data['HOMEWORK_COMMENT_RATE'] || {},
|
|
|
}
|
|
|
},
|
|
|
+ dataZoom() {
|
|
|
+ return [
|
|
|
+ {
|
|
|
+ type: 'slider',
|
|
|
+ start: 60,
|
|
|
+ end: 100
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ },
|
|
|
chartData() {
|
|
|
- const data = this.data[this.active] || {}
|
|
|
const values = Object.values(this.items)
|
|
|
const months = {}
|
|
|
for (const item of values) {
|
|
|
for (const row of (item.indexMonthData || [])) {
|
|
|
- const key = this.$helpers.dayjs(row.month).month() + 1 + '月'
|
|
|
+ const key = this.$helpers.dayjs(row.month).format('YYYY-MM-DD')
|
|
|
if (!months[key]) {
|
|
|
months[key] = {
|
|
|
- '月份': key,
|
|
|
+ '日期': key,
|
|
|
}
|
|
|
}
|
|
|
months[key][item.title] = row.percent
|
|
|
}
|
|
|
}
|
|
|
return {
|
|
|
- columns: ['月份', ...values.map(item => item.title)],
|
|
|
+ columns: ['日期', ...values.map(item => item.title)],
|
|
|
rows: Object.values(months)
|
|
|
}
|
|
|
},
|