| | |
| | | </template> |
| | | |
| | | <script setup> |
| | | import { reactive, ref, toRefs, onMounted, onUnmounted } from 'vue' |
| | | import { reactive, ref, toRefs, onMounted, onUnmounted, nextTick } from 'vue' |
| | | import { getProcedurePlanData, getTop, getProcedurePlansList, getRecordLogPage, getUnqualified7DayData, getUnqualifiedCateData } from '@/utils/api.js' |
| | | import { useCounterStore } from '@/stores/counter.js' |
| | | import { useRoute } from 'vue-router' |
| | |
| | | |
| | | onMounted(() => { |
| | | window.addEventListener('resize', () => { |
| | | setDayChart() |
| | | setTypeChart() |
| | | console.log('resize'); |
| | | nextTick(() => { |
| | | setDayChart() |
| | | setTypeChart() |
| | | }) |
| | | }) |
| | | initData() |
| | | scrollTimer.value = setInterval(() => { |
| | |
| | | dateList.push(item.createTime) |
| | | numList.push(item.unqualifiedNum || 0) |
| | | }) |
| | | console.log(data.allBad); |
| | | let option; |
| | | option = { |
| | | title: { |
| | |
| | | fontSize: 12 |
| | | } |
| | | }, |
| | | grid: { |
| | | top: 40, |
| | | bottom: 40 |
| | | }, |
| | | xAxis: { |
| | | type: 'category', |
| | | boundaryGap: false, |
| | |
| | | lineStyle: { |
| | | width: 0.5, |
| | | color: ['#fff'] |
| | | } |
| | | }, |
| | | axisLine: { |
| | | show: true, |
| | | onZero: true, |
| | | lineStyle: { |
| | | width: 1, |
| | | color: '#fff', |
| | | opacity: .5 |
| | | } |
| | | }, |
| | | axisLabel: { |
| | |
| | | lineStyle: { |
| | | width: 0.5, |
| | | color: ['#fff'] |
| | | } |
| | | }, |
| | | axisLine: { |
| | | show: true, |
| | | onZero: true, |
| | | lineStyle: { |
| | | width: 1, |
| | | color: '#fff', |
| | | opacity: .5 |
| | | } |
| | | }, |
| | | axisLabel: { |
| | |
| | | */ |
| | | function setTypeChart() { |
| | | let dayChartDom = document.getElementById('type-distribution'); |
| | | console.log(dayChartDom); |
| | | let myChart = echarts.init(dayChartDom); |
| | | let legendData = [] |
| | | let seriesData = [] |