
<template>
  <v-chart
    class="chart"
    :option="option"
    v-if="JSON.stringify(option) != '{}'"
  />
</template>
<script setup lang="ts">
import { ref, onMounted } from "vue";
import { graphic } from "echarts/core";
import Mock from "mockjs";
const option = ref({});
const getData = () => {
  let num = 10
  const data = Mock.mock({
    category: ['其他','表扬','咨询','建议','投诉','举报','求助','意见','惠民帮助','大气污染举报'],
    ["barData|" + num]: ["@integer(10, 100)"],
  })
  let lineData = [], rateData = [];
  for (let index = 0; index < num; index++) {
    let lineNum = Mock.mock('@integer(10, 100)') + data.barData[index]
    lineData.push(lineNum)
    let rate = data.barData[index] / lineNum;
    rateData.push((rate * 100).toFixed(0))
  }
  data.lineData = lineData
  data.rateData = rateData
    setTimeout(() => {
      setOption(data);
    }, 100);
  }
  const setOption = async (newData: any) => {
    option.value = {
      tooltip: {
        trigger: "axis",
        backgroundColor: "rgba(0,0,0,.6)",
        borderColor: "rgba(147, 235, 248, .8)",
        textStyle: {
          color: "#FFF",
        },
        formatter: function (params: any) {
          // 添加单位
          let result = params[0].name + "<br>";
          params.forEach(function (item: any) {
            if (item.value) {
              if (item.seriesName == "完成率") {
                result +=
                  item.marker +
                  " " +
                  item.seriesName +
                  " : " +
                  item.value +
                  "%</br>";
              } else {
                result +=
                  item.marker +
                  " " +
                  item.seriesName +
                  " : " +
                  item.value +
                  "件</br>";
              }
            } else {
              result += item.marker + " " + item.seriesName + " :  - </br>";
            }
          });
          return result;
        },
      },
      legend: {
        data: ["已完成", "未完成", "完成率"],
        textStyle: {
          color: "#B4B4B4",
        },
        top: "0",
      },
      grid: {
        left: "50px",
        right: "40px",
        bottom: "30px",
        top: "20px",
      },
      xAxis: {
        data: newData.category,
        axisLine: {
          lineStyle: {
            color: "#B4B4B4",
          },
        },
        axisTick: {
          show: false,
        },
      },
      yAxis: [
        {
          splitLine: { show: false },
          axisLine: {
            lineStyle: {
              color: "#B4B4B4",
            },
          },

          axisLabel: {
            formatter: "{value}",
          },
        },
        {
          splitLine: { show: false },
          axisLine: {
            lineStyle: {
              color: "#B4B4B4",
            },
          },
          axisLabel: {
            formatter: "{value}% ",
          },
        },
      ],
      series: [
        {
          name: "已完成",
          type: "bar",
          barWidth: 10,
          itemStyle: {
            borderRadius: 5,
            color: new graphic.LinearGradient(0, 0, 0, 1, [
              { offset: 0, color: "#956FD4" },
              { offset: 1, color: "#3EACE5" },
            ]),
          },
          data: newData.barData,
        },
        {
          name: "未完成",
          type: "bar",
          barGap: "-100%",
          barWidth: 10,
          itemStyle: {
            borderRadius: 5,
            color: new graphic.LinearGradient(0, 0, 0, 1, [
              { offset: 0, color: "rgba(156,107,211,0.8)" },
              { offset: 0.2, color: "rgba(156,107,211,0.5)" },
              { offset: 1, color: "rgba(156,107,211,0.2)" },
            ]),
          },
          z: -12,
          data: newData.lineData,
        },
        {
          name: "完成率",
          type: "line",
          smooth: true,
          showAllSymbol: true,
          symbol: "emptyCircle",
          symbolSize: 8,
          yAxisIndex: 1,
          itemStyle: {
            color: "#F02FC2",
          },
          data: newData.rateData,
        },
      ],
    };
  };
onMounted(() => {
  getData();
});
</script>
