<template>
  <div>
    <!-- 行政区域分布图表 -->
    <div ref="regionChartRef" style="width: 600px; height: 400px;"></div>

    <!-- 权属单位分布图表 -->
    <div ref="ownerChartRef" style="width: 600px; height: 400px;"></div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { ElMessage } from 'element-plus'
import * as echarts from 'echarts'

// 导入 Element Plus 的全局样式
import 'element-plus/dist/index.css'

const regionChartRef = ref(null)
const ownerChartRef = ref(null)

const initRegionChart = () => {
  const chart = echarts.init(regionChartRef.value)
  const option = {
    title: { text: '设备行政区域分布' },
    tooltip: {},
    xAxis: {
      data: ['区域A', '区域B', '区域C', '区域D'],
    },
    yAxis: {},
    series: [{
      name: '设备数量',
      type: 'bar',
      data: [120, 200, 150, 80]
    }]
  }
  chart.setOption(option)
}

const initOwnerChart = () => {
  const chart = echarts.init(ownerChartRef.value)
  const option = {
    title: { text: '设备权属单位分布' },
    tooltip: {},
    xAxis: {
      data: ['单位A', '单位B', '单位C', '单位D'],
    },
    yAxis: {},
    series: [{
      name: '设备数量',
      type: 'bar',
      data: [100, 180, 120, 90]
    }]
  }
  chart.setOption(option)
}

onMounted(() => {
  initRegionChart()
  initOwnerChart()
})
</script>

<style scoped>

</style>