<template>
  <div ref="assetEchart" class="asset_echart"></div>
</template>
<script lang="ts" setup>
import { init } from 'echarts';
import * as echarts from 'echarts';
import { reactive, toRefs, Ref, ref, onMounted, watchEffect } from 'vue';
const assetEchart: Ref<HTMLElement | null | any> = ref(null);

const emit = defineEmits(['click-call-back']);
const initM = () => {
  const chart = init(assetEchart.value as HTMLElement);
  window.addEventListener('resize', () => {
    chart.resize();
  });
  chart.setOption({
    title: {
      text: '',
      show: false,
    },
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow',
      },
    },
    legend: {
      show: false,
    },
    grid: {
      top: '10%',
      left: '-20%',
      right: '4%',
      bottom: '3%',
      containLabel: true,
    },
    xAxis: {
      type: 'value',
      boundaryGap: [0, 0.01],
      axisTick: {
        show: false, // 不显示坐标轴刻度线
      },

      max: 40,
      axisLabel: {
        color: '#60C2FF',
        show: true,
      },
      splitNumber: 5,
      splitLine: {
        show: true,
        lineStyle: {
          type: 'dotted',
          color: 'rgba(255, 255, 255,0.3)',
        },
      },
    },
    yAxis: {
      type: 'category',
      data: ['远期（2035年）', '中期（2030年）', '近期（2020年）'],
      name: '再生水利用(%)',
      nameTextStyle: {
        color: 'rgba(96, 194, 255, 1)',
        nameLocation: 'start',
        padding: [1, 10, -118, -130],
      },
      axisLabel: {
        color: '#fff',
        show: true,
        margin: 110,
        width: 120,
        overflow: 'truncate',
        align: 'left', // 设置为 left 表示左对齐
        fontSize: '14',
      },
      axisTick: {
        show: false, // 不显示坐标轴刻度线
      },
      axisLine: {
        show: false,
      },
    },
    series: [
      {
        name: '再生水利用(%)',
        type: 'bar',
        data: [40, 30, 20],
        barWidth: '8',
        itemStyle: {
          color: {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 1,
            y2: 1,
            colorStops: [
              {
                offset: 0,
                color: 'rgba(255, 237, 82, 0)', // 0% 处的颜色
              },
              {
                offset: 1,
                color: 'rgba(255, 237, 82, 1)', // 100% 处的颜色
              },
            ],
            global: false, // 缺省为 false
          },
        },
      },
    ],
  });
  chart.on('click', function (params) {
    console.log(params, 'paramsparams');
    emit('click-call-back', { ...params });
  });
};
function chartSize(container, charts) {
  function getStyle(el, name) {
    if (window.getComputedStyle) {
      return window.getComputedStyle(el, null);
    } else {
      return el.currentStyle;
    }
  }
  const hi = getStyle(container, 'height').height;
  charts.style.height = hi;
}
watchEffect(() => {});
onMounted(() => {
  initM();
});
</script>

<style lang="scss" scoped>
.asset_echart {
  width: 430px;
  height: 120px;
  // margin-left:-30px;
  &_echart {
    width: 100%;
    height: 100%;
  }
}
</style>