| | |
| | | <script setup> |
| | | import * as echarts from 'echarts'; |
| | | import { industryJobNumPieChart } from '@/api/home/task'; |
| | | import useEchartsResize from '@/hooks/useEchartsResize'; |
| | | import { useStore } from 'vuex'; |
| | | |
| | | const store = useStore(); |
| | | const chartRef = ref(null); |
| | | let chart = null; |
| | | let { chart } = useEchartsResize(chartRef); |
| | | |
| | | const option = { |
| | | tooltip: { |
| | |
| | | }; |
| | | |
| | | // 获取行业统计数据 |
| | | const getIndustryJobNumPieChart = () => { |
| | | industryJobNumPieChart().then(res => { |
| | | const getIndustryJobNumPieChart = (value) => { |
| | | industryJobNumPieChart(value).then(res => { |
| | | if (res.data.code !== 0) return; |
| | | option.series[0].data.forEach(item => { |
| | | const matchData = res.data.data.find(d => d.name === item.name); |
| | |
| | | item.value = matchData.value; |
| | | } |
| | | }); |
| | | chart.setOption(option); |
| | | chart.value.setOption(option); |
| | | }); |
| | | }; |
| | | |
| | |
| | | // } |
| | | // })); |
| | | // option.series[0].data = data; |
| | | // chart.setOption(option); |
| | | // chart.value.setOption(option); |
| | | // }); |
| | | // }; |
| | | |
| | | // 添加监听 |
| | | watch(() => store.state.task.taskSearchParams, (newVal) => { |
| | | console.log(newVal, '2222'); |
| | | if (newVal) { |
| | | getIndustryJobNumPieChart(newVal); |
| | | } |
| | | }, { deep: true }); |
| | | |
| | | onMounted(() => { |
| | | chart = echarts.init(chartRef.value); |
| | | getIndustryJobNumPieChart(); |
| | | |
| | | window.addEventListener('resize', () => { |
| | | chart?.resize(); |
| | | }); |
| | | }); |
| | | |
| | | onUnmounted(() => { |
| | | window.removeEventListener('resize', chart?.resize); |
| | | chart?.dispose(); |
| | | getIndustryJobNumPieChart({date_enum: 'TODAY'}); |
| | | }); |
| | | </script> |
| | | |
| | |
| | | width: 244px; |
| | | height: 100%; |
| | | .title { |
| | | margin-top: 10px; |
| | | margin-top: 10px; |
| | | width: 244px; |
| | | height: 26px; |
| | | background: url('@/assets/images/task/title.png') no-repeat center / 100% 100%; |
| | | color: #CFEAFF; |
| | | padding-left: 38px; |
| | | line-height: 8px; |
| | | font-size: 14px; |
| | | } |
| | | .chart { |
| | | width: 100%; |
| | | height: 200px; |
| | | } |
| | | } |
| | | </style> |
| | | </style> |