yudao-web/src/views/screen/compenonts/rightwrapper.vue

<template>
  <section class="right-wrapper" ref="rightWrapperRef">
    <TitleBox title="执法任务">
      <Charts :options="row1Options" ref="row1Chart" />
    </TitleBox>
    <TitleBox>
      <Charts :options="row2Options" ref="row2Chart" />
    </TitleBox>
    <TitleBox title="资质许可状态">
      <section></section>
    </TitleBox>
    <TitleBox >
	    <Charts :options="row3Options" ref="row3Chart" />
    </TitleBox>
  </section>
</template>

<script setup lang="ts">
import TitleBox from './titleBox.vue'

const rightWrapperRef = ref()

let observer: Nullable<ResizeObserver> = null
const row1Options = ref({
  grid: {
    top: 40,
    bottom: 0,
    left: 10,
    right: 10,
    containLabel: true
  },
  xAxis: {
    type: 'category',
    data: ['一大队', '二大队', '三大队', '四大队', '五大队'],
    axisTick: {
      show: false
    },
    splitLine: {
      show: false
    },
    axisLine: {
      lineStyle: {
        color: 'rgba(255, 255, 255, 0.20)'
      }
    },
    axisLabel: {
      color: '#fff',
      fontSize: 12
    }
  },
  yAxis: [
    {
      type: 'value',
      axisTick: {
        show: false,
        lineStyle: {
          color: '#fff'
        }
      },
      axisLabel: {
        show: false
      },
      splitLine: {
        show: true,
        lineStyle: {
          color: 'rgba(255,255,255,0.2)'
        }
      }
    },
    {
      type: 'value',
      axisTick: {
        show: false,
        lineStyle: {
          color: '#fff'
        }
      },
      axisLabel: {
        show: false
      },
      splitLine: {
        show: true,
        lineStyle: {
          color: 'rgba(255,255,255,0.2)'
        }
      }
    }
  ],
  series: [
    {
      type: 'bar',
      yAxisIndex: 0,
      name: '执法记录',
      data: [100, 90, 10, 90, 90, 20, 56, 89],
      barWidth: 5,
      itemStyle: {
        color: '#56CA00'
      }
    },
    {
      name: '任务数量',
      type: 'line',
      yAxisIndex: 1,
      smooth: true,
      symbol: 'circle',
      itemStyle: {
        color: 'rgba(22, 177, 255, 1)'
      },
      areaStyle: {
        color: {
          type: 'linear',
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          colorStops: [
            {
              offset: 0,
              color: 'rgba(22, 177, 255, 0.4)'
            },
            {
              offset: 1,
              color: 'rgba(22, 177, 255, 0)'
            }
          ]
        }
      },
      data: [1000, 900, 100, 900, 900, 200, 560, 819]
    }
  ],
  tooltip: {
    trigger: 'axis',
    backgroundColor: 'rgba(25, 119, 43,1)',
    borderColor: 'transparent',
    textStyle: {
      color: '#fff'
    },
    axisPointer: {
      type: 'shadow',
      label: {
        backgroundColor: '#6a7985'
      }
    }
  },
  legend: {
    top: 0,
    left: 'center',
    show: true,
    itemWidth: 15,
    itemHeight: 15,
    textStyle: {
      color: '#fff'
    }
  }
})

const color = ['#56CA00', '#FFE700', '#16B1FF']
const row2Options = ref({
  series: [
    {
      type: 'pie',
      itemStyle: {},
      center: ['30%', '50%'],
      radius: ['50%', '80%'],
      roseType: true,
      label: {
        show: true,
        position: 'outside',
        color: 'inherit',
        fontSize: 10,
        alignTo: 'labelLine'
      },
      labelLine: {
        show: true,
        length: 2
      },
      data: [
        {
          value: 335,
          name: '审批通过'
        },
        {
          value: 310,
          name: '执法签到'
        },
        {
          value: 234,
          name: '整改处理'
        }
      ].map((i, index) => {
        return {
          ...i,
          itemStyle: {
            color: color[index]
          }
        }
      })
    }
  ],
  legend: {
    show: true,
    itemWidth: 15,
    itemHeight: 15,
    itemGap: 10,
    right: 0,
    top: 'center',
    orient: 'vertical',
    data: [
      {
        name: '审批通过'
      },
      {
        name: '执法签到'
      },
      {
        name: '整改处理'
      }
    ].map((i, index) => {
      return {
        ...i,
        textStyle: {
          color: color[index]
        }
      }
    })
  }
})
const row3Options=ref({
	grid: {
		top: 40,
		bottom: 0,
		left: 10,
		right: 10,
		containLabel: true
	},
	xAxis: {
		type: 'category',
		data: ['一大队', '二大队', '三大队', '四大队', '五大队'],
		axisTick: {
			show: false
		},
		splitLine: {
			show: false
		},
		axisLine: {
			lineStyle: {
				color: 'rgba(255, 255, 255, 0.20)'
			}
		},
		axisLabel: {
			color: '#fff',
			fontSize: 12
		}
	},
	yAxis: [
		{
			type: 'value',
			axisTick: {
				show: false,
				lineStyle: {
					color: '#fff'
				}
			},
			axisLabel: {
				show: false
			},
			splitLine: {
				show: true,
				lineStyle: {
					color: 'rgba(255,255,255,0.2)'
				}
			}
		},
		{
			type: 'value',
			axisTick: {
				show: false,
				lineStyle: {
					color: '#fff'
				}
			},
			axisLabel: {
				show: false
			},
			splitLine: {
				show: true,
				lineStyle: {
					color: 'rgba(255,255,255,0.2)'
				}
			}
		}
	],
	series: [
		{
			type: 'line',
			yAxisIndex: 0,
			name: '执法记录',
			data: [120, 70, 10, 90, 90, 20, 56, 89],
			smooth: true,
			symbol: 'circle',
			itemStyle: {
				color: '#56CA00'
			},
			areaStyle: {
				color: {
					type: 'linear',
					x: 0,
					y: 0,
					x2: 0,
					y2: 1,
					colorStops: [
						{
							offset: 0,
							color: 'rgba(86, 220, 0, 0.4)'
						},
						{
							offset: 1,
							color: 'rgba(86, 220, 0, 0)'
						}
					]
				}
			},
		},
		{
			name: '任务数量',
			type: 'line',
			yAxisIndex: 1,
			smooth: true,
			symbol: 'circle',
			itemStyle: {
				color: 'rgba(22, 177, 255, 1)'
			},
			areaStyle: {
				color: {
					type: 'linear',
					x: 0,
					y: 0,
					x2: 0,
					y2: 1,
					colorStops: [
						{
							offset: 0,
							color: 'rgba(22, 177, 255, 0.4)'
						},
						{
							offset: 1,
							color: 'rgba(22, 177, 255, 0)'
						}
					]
				}
			},
			data: [1000, 900, 100, 900, 900, 200, 560, 819]
		}
	],
	tooltip: {
		trigger: 'axis',
		backgroundColor: 'rgba(25, 119, 43,1)',
		borderColor: 'transparent',
		textStyle: {
			color: '#fff'
		},
		axisPointer: {
			type: 'shadow',
			label: {
				backgroundColor: '#6a7985'
			}
		}
	},
	legend: {
		top: 0,
		left: 'center',
		show: true,
		itemWidth: 10,
		itemHeight: 10,
		textStyle: {
			color: '#fff'
		}
	}
})
const row1Chart = ref()
const row2Chart = ref()
const row3Chart = ref()
const initChart = () => {}

const handlerResize = () => {
  unref(row1Chart).resizeHandler()
  unref(row2Chart).resizeHandler()
  unref(row3Chart).resizeHandler()
}

onMounted(() => {
  initChart()
  observer = new ResizeObserver(handlerResize)
  observer.observe(rightWrapperRef.value)
	handlerResize()
})

onUnmounted(() => {
  observer?.disconnect()
})
</script>

<style scoped lang="scss">
.right-wrapper {
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-rows: 1.5fr 1fr 1.3fr 1.5fr;
  grid-template-columns: 1fr;
  grid-gap: 20px;
}
</style>