| | |
| | | </div> |
| | | </div> |
| | | <div class="nestCenter"> |
| | | <div class="chart" ref="echartsRef" v-if="!isEmptyData"></div> |
| | | <div v-else> |
| | | <el-empty> |
| | | <template #description> |
| | | <span class="custom-text">暂无数据</span> |
| | | </template> |
| | | </el-empty> |
| | | </div> |
| | | <div class="chart" ref="echartsRef"></div> |
| | | </div> |
| | | </div> |
| | | </template> |
| | |
| | | }); |
| | | // 空数据计算 |
| | | const isEmptyData = computed(() => { |
| | | return jcOrder.value.length === 0 || |
| | | return jcOrder.value.length === 0 || |
| | | jcOrder.value.every(item => !item.name || item.value === 0) |
| | | }) |
| | | // 图表初始化 |
| | |
| | | industryJobNumPieChart(params).then(res => { |
| | | const resList = res?.data?.data || []; |
| | | jcOrder.value = resList; |
| | | if (resList.length > 0) { |
| | | nextTick(() => { |
| | | nextTick(() => { |
| | | initChart() |
| | | pieInit(resList) |
| | | }) |
| | | } |
| | | }); |
| | | }; |
| | | watch( |
| | |
| | | { immediate: true } |
| | | ); |
| | | const pieInit = resList => { |
| | | if (!jcchart.value || !resList?.length) return |
| | | |
| | | // if (!jcchart.value || !resList?.length) return |
| | | const validData = resList?.filter(item => item.name).sort((a, b) => b.value - a.value); // 从大到小排序 |
| | | const colors = [ |
| | | '#F87E04', // 橙色 |
| | |
| | | yAxisData: validData.map(item => item.name), |
| | | seriesData: validData.map(item => item.value), |
| | | }; |
| | | |
| | | |
| | | const option = { |
| | | title: { |
| | | text: resList.length ? '' :'暂无数据', |
| | | left: 'center', |
| | | top: 'center', |
| | | textStyle: { |
| | | color: '#999', |
| | | fontSize: '1.6rem', |
| | | fontWeight: 'normal' |
| | | } |
| | | }, |
| | | tooltip: { |
| | | trigger: 'axis', |
| | | axisPointer: { type: 'shadow' }, |
| | |
| | | xAxis: { |
| | | type: 'value', |
| | | splitLine: { lineStyle: { color: '#E5E5E5' } }, |
| | | axisLabel: { color: '#7C8091' }, |
| | | axisLabel: { color: '#7C8091',fontSize:'1.2rem' }, |
| | | boundaryGap: [0, 0.01], |
| | | }, |
| | | yAxis: { |
| | | type: 'category', |
| | | data: optionData.yAxisData, |
| | | axisLabel: { color: '#7C8091' }, |
| | | axisLabel: { color: '#7C8091' ,fontSize:'1.2rem'}, |
| | | axisLine: { lineStyle: { color: '#D1D1D1' } }, |
| | | axisTick: { show: false }, |
| | | // 确保排序后的数据从上到下显示(最大值在顶部) |
| | | inverse: true, |
| | | show:optionData.seriesData?.length ? true : false |
| | | }, |
| | | series: [ |
| | | { |