<template>
  <div>
    <!-- 结合问题数量、案件处置率和延期率的图表 -->
    <div ref="combinedChartRef" style="width: 800px; height: 600px;"></div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import * as echarts from 'echarts'
import 'element-plus/dist/index.css'

const combinedChartRef = ref(null)

const initCombinedChart = () => {
  const chart = echarts.init(combinedChartRef.value)
  const option = {
    title: [
      { text: '问题数量统计、案件处置率、延期率', left: 'center' }
    ],
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'cross',
        label: {
          backgroundColor: '#6a7985'
        }
      },
      formatter: function (params) {
        let result = '';
        params.forEach(param => {
          if (param.seriesName === '问题数量') {
            result += `<span style="display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background-color:${param.color};"></span>${param.seriesName}: ${param.data} 个<br>`;
          } else if (param.seriesName === '处置率') {
            result += `<span style="display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background-color:${param.color};"></span>${param.seriesName}: ${param.data}<br>`;
          } else if (param.seriesName === '延期率') {
            result += `<span style="display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background-color:${param.color};"></span>${param.seriesName}: ${param.data}<br>`;
          }
        });
        return result;
      }
    },
    xAxis: {
      type: 'category',
      boundaryGap: false,
      data: ['本周', '上周', '两周前']
    },
    yAxis: [
      { // 第一个 y 轴
        type: 'value',
        name: '问题数量',
        min: 0,
        max: 250,
        interval: 50,
        axisLabel: {
          formatter: '{value} 个'
        }
      },
      { // 第二个 y 轴
        type: 'value',
        name: '处置率、延期率',
        min: 0,
        max: 1,
        interval: 0.1,
        axisLabel: {
          formatter: '{value}'
        }
      },
      { // 第三个 y 轴
        type: 'value',
        name: '',
        min: 0,
        max: 0.2,
        interval: 0.05,
        axisLabel: {
          formatter: '{value}'
        }
      }
    ],
    series: [
      {
        name: '问题数量',
        type: 'line',
        yAxisIndex: 0,
        data: [200, 150, 180],
        smooth: true,
        itemStyle: {
          color: 'rgb(255, 70, 131)'
        }
      },
      {
        name: '处置率',
        type: 'line',
        yAxisIndex: 1,
        data: [0.8, 0.7, 0.65],
        smooth: true,
        itemStyle: {
          color: 'rgb(131, 255, 70)'
        }
      },
      {
        name: '延期率',
        type: 'line',
        yAxisIndex: 2,
        data: [0.1, 0.15, 0.12],
        smooth: true,
        itemStyle: {
          color: 'rgb(70, 131, 255)'
        }
      }
    ]
  }

  chart.setOption(option)
}

onMounted(() => {
  initCombinedChart()
})
</script>