<template>
  <div style="height:100%;width:100%" :id="echartsId"></div>
</template>

<script setup>
import * as echarts from "echarts";
import { nextTick , onMounted, watch, defineProps } from "vue";
const props = defineProps({
  echartsId:{
    type:String,
    default:'barHatId'
  },
  data:{
    type:Object,
    default:{
      xDate: ['巴宜区', '工布江达县', '波密县', '朗县', '墨脱县', '察隅县', '米林县'],
      list:[
        { name: "总数", value: [10,20,30,40,50,60,70] ,color:['rgba(0,244,255,1)','rgba(0,77,167,1)'] ,hatColor:'#087df9'},
        { name: "已处置", value: [10,20,30,40,50,60,70],color:['rgba(24, 232, 229, 1)','rgba(3, 110, 83, 1)'],hatColor:'#00FFFF'  },
      ],
    }
  }
});

watch(()=>props.data,val=>{
  nextTick(()=>{ handleDate() })
},{immediate:true,deep:true})

// 处理数据
function handleDate() {
  let xDate = props.data.xDate;
  let legend = props.data.list.map(v=>{return {name:v.name}})
  let series = props.data.list.map((item,i)=>{
    let obj = {
      name: item.name,
      type: "bar",
      data: item.value,
      barWidth: "10px",
      itemStyle: {
        normal: {
          color: new echarts.graphic.LinearGradient(0,0,0,1,[
            { offset: 0, color: item.color ? item.color[0] : "rgba(0,244,255,1)" },
            { offset: 1,  color: item.color ? item.color[1] : "rgba(0,77,167,1)" }],false),
        }
      },
      markPoint: {
        symbol: 'path://M62 62h900v900h-900v-900z', // 使用 SVG path 绘制扁圆形状
        symbolSize: [11, 4], // 设置扁圆的宽和高
        itemStyle: { color: item.hatColor || '#087df9'   },// 圆盘颜色
        data: item.value.map((obj, index) => ({
          xAxis: index, // 对应柱子的横坐标
          yAxis: obj + 0 // 柱子的值加上一些偏移量
        }))
      },
    }
    return obj
  })
  lineChartFn(xDate,legend,series)
}

function lineChartFn(xDate,legend,series) {
  var myChart = echarts.init(document.getElementById(props.echartsId));
  var option = {
    legend: {
      type: "plain",
      show: true,
      right: 0,
      textStyle: { color: "#ddd" },
      data: legend
    },
    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "shadow"
      }
    },
    grid: {
      top: "25%",
      right: "8%",
      left: "10%",
      bottom: "22%"
    },
    xAxis: [
      {
        type: "category",
        data: xDate,
        axisLine: {
          lineStyle: {
            color: "rgba(255,255,255,0.12)"
          }
        },
        axisLabel: {
          margin: 10,
          color: "#e2e9ff",
          textStyle: {
            fontSize: 14
          }
        }
      }
    ],
    yAxis: [
      {
        // name: '单位：万元',
        axisLabel: {
          formatter: "{value}",
          color: "#e2e9ff"
        },
        axisLine: {
          show: false,
          lineStyle: {
            color: "rgba(255,255,255,1)"
          }
        },
        splitLine: {
          lineStyle: {
            color: "rgba(255,255,255,0.12)"
          }
        }
      }
    ],
    series: series
  };
  option && myChart.setOption(option);
  window.onresize = function () { myChart.resize(); };
  document.getElementById(props.echartsId).setAttribute("_echarts_instance_", "");
}
onMounted(() => {
  lineChartFn();
});
</script>

<style lang="scss" scoped>
.circlecz {
  height: 100%;
  background: rgba(0,29,75,0.6);
  border-radius: 0 0 4px 4px;
}
</style>
