| | |
| | | |
| | | <script setup > |
| | | import { getdisposeApi} from '@/api/home/index'; |
| | | import * as echarts from 'echarts' |
| | | import dayjs from 'dayjs' |
| | | import useEchartsResize from '@/hooks/useEchartsResize' |
| | | import * as echarts from 'echarts'; |
| | | import dayjs from 'dayjs'; |
| | | import useEchartsResize from '@/hooks/useEchartsResize'; |
| | | let checked = ref('YEAR'); |
| | | let timeListStr = ['本周', '本月', '本年']; |
| | | let timeListEnum = ['WEEK', 'MONTH', 'YEAR']; |
| | |
| | | checked.value = item; |
| | | params.value.date_enum = item; |
| | | dateSelect.value = item; |
| | | |
| | | }; |
| | | const echartsOption = { |
| | | tooltip: { |
| | |
| | | axisPointer: { |
| | | type: 'shadow', |
| | | }, |
| | | |
| | | }, |
| | | legend: { |
| | | itemWidth: 14, |
| | |
| | | type: 'category', |
| | | axisLine: { |
| | | show: true, // 隐藏轴线 |
| | | lineStyle: { |
| | | color: '#cdd5e2', |
| | | }, |
| | | }, |
| | | axisLabel: { |
| | | color: '#383838', |
| | |
| | | }, |
| | | splitLine: { |
| | | lineStyle: { |
| | | color: '#9A9A9A', |
| | | color: '#cdd5e2', |
| | | type: 'dashed', // 设置为虚线 |
| | | }, |
| | | }, |
| | | }, |
| | | |
| | | ], |
| | | series: [], |
| | | } |
| | | }; |
| | | |
| | | const eventTypeList = ref([ |
| | | { name: '待处理', value: 0, color: '#FF7411' }, |
| | | { name: '处理中', value: 0, color: '#FFFF61' }, |
| | | { name: '已完成', value: 0, color: '#06D957' }, |
| | | ]) |
| | | const seriesObj = {} |
| | | ]); |
| | | const seriesObj = {}; |
| | | eventTypeList.value.forEach(item => { |
| | | seriesObj[item.name] = { |
| | | type: 'bar', |
| | |
| | | name: item.name, |
| | | itemStyle: { color: item.color }, |
| | | data: [], |
| | | } |
| | | }) |
| | | const echartsRef = ref(null) |
| | | let { chart } = useEchartsResize(echartsRef) |
| | | |
| | | |
| | | }; |
| | | }); |
| | | const echartsRef = ref(null); |
| | | let { chart } = useEchartsResize(echartsRef); |
| | | // 获取柱状图数据 |
| | | const getBarChartData = value => { |
| | | getdisposeApi(value).then(res => { |
| | | const list = res?.data?.data || [] |
| | | echartsOption.xAxis.data = list.map(item => item.name) |
| | | const list = res?.data?.data || []; |
| | | echartsOption.xAxis.data = list.map(item => item.name); |
| | | // 赋值前清空数据 |
| | | Object.keys(seriesObj).forEach(key => { |
| | | seriesObj[key].data = [] |
| | | }) |
| | | seriesObj[key].data = []; |
| | | }); |
| | | list.forEach(item => { |
| | | item.data.forEach((item1, index) => { |
| | | if (!seriesObj?.[item1.name]) return |
| | | seriesObj[item1.name].data.push(item1.value) |
| | | }) |
| | | }) |
| | | if (!seriesObj?.[item1.name]) return; |
| | | seriesObj[item1.name].data.push(item1.value); |
| | | }); |
| | | }); |
| | | |
| | | echartsOption.series = Object.values(seriesObj) |
| | | echartsOption.series = Object.values(seriesObj); |
| | | |
| | | chart.value.setOption(echartsOption) |
| | | }) |
| | | } |
| | | chart.value.setOption(echartsOption); |
| | | }); |
| | | }; |
| | | onMounted(() => { |
| | | getBarChartData(params.value) |
| | | }) |
| | | getBarChartData(params.value); |
| | | }); |
| | | </script> |
| | | |
| | | <style scoped lang="scss"> |
| | |
| | | background: #ffffff !important; |
| | | margin-top: 10px; |
| | | margin-left: 10px; |
| | | height: 100%; |
| | | height: pxToVh(400); |
| | | .card-title { |
| | | display: flex; |
| | | margin-bottom: 10px; |
| | |
| | | } |
| | | .chart { |
| | | width: 98%; |
| | | height: 250px; |
| | | padding-left: 15px; |
| | | height: 265px; |
| | | padding-left: 10px; |
| | | margin-top: 27px; |
| | | } |
| | | </style> |