<template>
  <div ref="chartRef" :style="{ height, width }"></div>
</template>
<script lang="ts">
  // import { basicProps } from './props';
</script>
<script lang="ts" setup>
  // import { Card } from 'ant-design-vue';
  import { onMounted, ref, Ref } from 'vue';
  import { useECharts } from '/@/hooks/web/useECharts';
  // import { useI18n } from '/@/hooks/web/useI18n';
  // const { t } = useI18n();
  defineProps({
    // ...basicProps,
  });

  const chartRef = ref<HTMLDivElement | null>(null);
  const { setOptions } = useECharts(chartRef as Ref<HTMLDivElement>);
  onMounted(() => {
    setOptions({
      // backgroundColor: 'transparent',
      grid: {
        left: '0%',
        top: '0%',
        right: '85',
        bottom: '0%',
        containLabel: true,
      },
      xAxis: [
        {
          show: false,
        },
      ],
      yAxis: [
        {
          axisTick: 'none',
          axisLine: 'none',
          axisLabel: {
            textStyle: {
              color: '#5E95FF', //y轴字体颜色
              fontSize: '12',
              fontFamily: 'Source Han Sans CN-Medium, Source Han Sans CN',
              fontWeight: '500',
            },
          },
          data: ['5M', '环境', '材料', '检验方法', '设备'],
        },
        {
          show: false,
        },
        {
          axisLine: {
            lineStyle: {
              color: 'rgba(0,0,0,0)', //y轴线颜色
            },
          },
          data: [],
        },
      ],
      series: [
        {
          name: '有颜色的条纹',
          type: 'pictorialBar',
          stack: 'b',
          yAxisIndex: 0,
          symbolBoundingData: 100,
          // symbol: 'image://' + require('/analisis/bar.png'),
          symbol:
            'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAXEAAAAcCAYAAACXmo+UAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAY4SURBVHhe7Z3PbxVVFMdPtQjIDwEFBAQUxIqCGNEIgRoqUFzgkh1x48royj/FmLjRnTs3aoxoA5TYRCAUkF8CAlJ+GVsRikClpYLn23sv3Pdo38yQc+9kbs4nIZzbkPA6b+Yz557v9LXpLkOKoihKJXnE/q0oiqJUEJW4oihKhSk0TsG//OMq0c+/EX13wH5RkFlTiT7cZBfMV3uIjl6wC0HWthBtfMXUt24TfbKN6OagWUuytZVoydOmPn+Z6ItOU0syvpno481EE8aZddcJou1HTC3J4tlE771lF8znO4ku/G0XgmxYTtT6oqlv3DLvzeCwWUvyfhvRgqdMfepPoi+7TC3JtMeJPnqHaNyjZr3tF6I9p0wtybL5RFtWmfoOX6OfdRD1/WPWkmx+jeiNxaa+epPo0x+Ihu+YtRTN3FbimE2fZNYHe4i+3mdqSeCaD9q5i20y61CueZ2P17t83MDt/8wx6x8waykKdeIDQ0TX+cLqPGa/IEz7ClswkF6IgwrptS61C2Y3X1QhBA7pOYGDjsO2EAbfixM4pNd13NTSbPLem+OXwggc0lu1xC6Yzl/DCBzScwKH9DoOmVqadS/fFzik133G1JJAerjxOfb/HkbgkN7KRXbBoFGQFjiA9JzAIb1dAV3jBB7SNW0v2QWDG7i0wEEhiV/jF5Ca9HafNLUkODdSk97sJ0wN6e08amppICNfevsrLr0VC+2CiSW9kA1WDOm5XRgIJb2FM2tdsz3Q+QzXTJ5g6pANVm6JD7C4r9yII70j56stPVy8saXXe6360lu+wC4YSI8PnTh4/530MEpLTXoxGqyqS2/DMlswGKWd+8suBKl3DcacoRqs3BLHHTGW9ELMdEEs6WEb7YglvR0so6pLz6GjtHzEkp7fYMWSno7SsnENVi6J/ztkOuNY0guxhZr/ZNrSO3nJLgRJPT8IsasEKY/SYklPR2nZuFFaLoljFv4jv3lVlt56bwsVSnqTxtdKD52RSq8xmh88HKlLL4RrUs0PMiUOseLCOtNrvyBITOk9N8sumGDS44PqSy/E42SaHzwcsUZpKUkv5q5S84NiwJtulJYp8X6+y+8I9ELauJtISXq40zsgvRBbqJX8f2h+UIwU84Mo0vMaLM0P8lFGftBQ4oN8Iu7jizeU9PznTlV62UB6/nOnmh/kI0Z+UL+r1PwgH5ofFMcfpYGGEr98Paz0XDeRmvRC5geum0gtP6i89OpGaZofZBMrP/AbrNTyAzCmxPGm/cRbDpVeNr70zvZpfpCHMqQXc5Sm+UFjYkrPd01K+YFjTIn39rMoTtiFMO32c0tAatLT/CCbsqSn+UE2KeYHjtTyA8eoEscFhe44xAtpmXf/YXsQQ3rYQlVderHzAzyClZr0ND/IRvOD4uB7iZ0f+Iwq8R7ujkNJb713YcWSHj5Ep+rSi50f4CfMqj5KiyE9/fmD4mh+UBw/P6jnAYlDRt8fTEt6h86ZWhJsoVKTnp8f6Cgtm7LyAx2lZZNyflDPAxLHHSuG9HAiVll6q1tUekUpY5SWovT0UdzGpJwfjEaNxNEd4wPYo0iPRRECX3p42D6U9FZ7W6iUpBcyPyhjlKbSy6Z+lKb5QT7KyA9Go0bie/nijSW9EFuoeumFetg+ZelpfpBNWdJL6VFczQ/y4Y/SxuKexIdYqt9024UwZUkv1BbKlx5kpPlBY1LPD2JIT/ODfKScH4zFPYlj8K/Sy+ZtvrB86YV67lTzg+LEGqWVIT3ND7JJOT9oxIjE8Xnh+CWuIUhNekvn2QUD6YVA84PipDZKiyW92PlB6F1lqvlBI0Ykjt9cX2XpoTNKWXqaHzQG0osxStP8oDj10tNRWj78UVoWTXeZb7u5O+JuXJpXnyWaM83U6PZ38Z0+BBv5ZGy2d2AEJscumlqSqROJ1nCH7Dhw1pz40mAb/cIcu2BwAeNClgbbzplTTI2PG8ZPzUkDQfgdJW58p/mPNDMmE735vF0we0+b3wcrTctcokV2xDHM7wlGHNhOS7OWz7MpfL6BPsiVzzVp0LFC4g48WtwT4GNT506v/cAmjNIwtpEGAn9mhqlDumYd35AmPmbqi1dMwyANbhKY7edlROK2VhRFUSoF0f8eaCTWRufPTwAAAABJRU5ErkJggg==',
          symbolSize: ['100%', '100%'],
          symbolClip: true,
          data: [50, 66, 33, 25, 30],
          barWidth: 9,
          z: 2,
        },
        {
          name: '底色条纹',
          type: 'pictorialBar',
          yAxisIndex: 2,
          barGap: '-100%',
          data: [100, 100, 100, 100, 100],
          barWidth: 9,
          symbolBoundingData: 100,
          // symbol: 'image://' + require('@/img/456.png'),
          symbol:
            'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAATwAAAAXCAYAAACWGfNHAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAABsSURBVHhe7dQxAcAgEMDAp/49dscEXVDR3C1xkPXucwYg4LkF+D3DAzIMD8gwPCDD8IAMwwMyDA/IMDwgw/CADMMDMgwPyDA8IMPwgAzDAzIMD8gwPCDD8IAMwwMyDA/IMDwgw/CADMMDImY+BZUD9cB2ERoAAAAASUVORK5CYII=',
          symbolSize: ['100%', '100%'],
          label: {
            normal: {
              show: true,
              position: 'right',
              distance: 10,
              fontSize: '10',
              fontFamily: 'Source Han Sans CN-Medium, Source Han Sans CN',
              fontWeight: '500',
              color: '#333333',
              formatter: function (data) {
                return [50, 66, 33, 25, 30][data.dataIndex];
              },
            },
          },
          // itemStyle: {
          //   normal: {
          //     color: '#DDDDDD',
          //     barBorderRadius: [100, 100, 100, 100]
          //   }
          // },

          z: 0,
        },
      ],
    });
  });
</script>
