<template>
  <div>
    <div ref="assetEchart" class="asset_echart"></div>
  </div>
</template>
<script setup>
import { init } from 'echarts';
const assetEchart = ref(null);
let { xData, bottom, yData, yData2, all, realValue, itemUnit, itemTarget, data } = defineProps([
  'data',
  'bottom',
  'xData',
  'yData',
  'yData2',
  'all',
  'realValue',
  'itemUnit',
  'itemTarget',
]);

const initM = () => {
  const chart = init(assetEchart.value);
  window.addEventListener('resize', () => {
    chart.resize();
  });
  chart.setOption({
    grid: {
      top: '0%',
      right: '0%',
      left: '-3%',
      bottom: '12%',
      containLabel: true,
    },
    tooltip: {
      show: true,
      trigger: 'axis',
      axisPointer: {
        type: 'shadow',
      },
      textStyle: {
        fontSize: 12,
      },
      formatter: function (params) {
        let dom = `${params[0].name}
              <br/>`;
        for (let i of params) {
          dom += `${i.marker}
              ${i.seriesName}
                :
              ${i.value}
              <br/>`;
        }
        return dom;
      },
    },
    legend: {
      show: true,
      itemWidth: 10,
      top: '0',
      left: '89.1%',
      data: data.titleArray,
      textStyle: {
        color: '#c6c6c6',
        fontSize: '9',
      },
    },
    xAxis: [
      {
        color: '#c6c6c6',
        data: xData,
        axisLabel: {
          margin: 10,
          color: '#c6c6c6',
          textStyle: {
            fontSize: 13,
          },
          formatter: function (params) {
            var index = 4; //字数为6个超出就显示成点
            var newstr = '';
            for (var i = 0; i < params.length; i += index) {
              var tmp = params.substring(i, i + index);
              newstr += tmp + '';
            }
            if (newstr.length > 4) return newstr.substring(0, 4) + '...';
            else return '\n' + newstr;
          },
        },
        axisLine: {
          lineStyle: {
            color: '#c6c6c6',
          },
        },
        axisTick: {
          show: true,
          lineStyle: {
            color: '#ddd',
          },
        },
      },
    ],
    yAxis: [
      {
        min: 0,
        show: false,
        axisLabel: {
          color: '#c6c6c6',
          textStyle: {
            fontSize: 16,
          },
        },
        axisLine: {
          lineStyle: {
            color: '#c6c6c6',
          },
        },
        axisTick: {
          show: false,
        },
        splitLine: {
          lineStyle: {
            color: '#ddd',
            type: 'dashed',
          },
        },
      },
    ],
    series: [
      {
        name: data.titleArray[0] + '%',
        type: 'bar',
        data: yData,
        barWidth: '30px',
        showBackground: true,
        itemStyle: {
          normal: {
            label: {
              //柱体上显示数值
              rotate: 30, // 设置倾斜角度
              interval: 0,
              show: true, //开启显示
              offset: [1, 0],
              textStyle: {
                //数值样式
                fontSize: '10px',
                color: '#fff',
                // 设置横坐标文字全部显示
              },
              formatter: function ({ dataIndex }) {
                console.log('dataIndex', dataIndex);
                return realValue[dataIndex] > 0
                  ? itemUnit[dataIndex] == '%'
                    ? (realValue[dataIndex] * 1).toFixed(2) + itemUnit[dataIndex]
                    : realValue[dataIndex] + itemUnit[dataIndex]
                  : '0';
                // return realValue[dataIndex] > 0 ? realValue[dataIndex] + itemUnit[dataIndex] : '0';
              },
            },
            color: {
              type: 'linear',
              x: 0, //右
              y: 0, //下
              x2: 0, //左
              y2: 1, //上
              colorStops: [
                {
                  offset: 0, //offset表示位置【0,1】范围，0表示起始位置，1表示结束位置
                  color: '#124e86', // 起始位置设置此颜色，终止位置设置下面的颜色
                },
                {
                  offset: 1,
                  color: '#42a8fc',
                },
              ],
            },
            barBorderRadius: [0, 0, 0, 0],
          },
        },
      },
      {
        name: data.titleArray[1] + '%',
        type: 'bar',
        data: yData2,
        showBackground: true,
        barWidth: '30px',
        itemStyle: {
          normal: {
            label: {
              //柱体上显示数值
              show: true, //开启显示
              rotate: 30, // 设置倾斜角度
              interval: 0,
              textStyle: {
                //数值样式
                fontSize: '10px',
                color: '#fff',
              },
              formatter: function ({ dataIndex }) {
                return itemTarget[dataIndex] > 0
                  ? itemUnit[dataIndex] == '%'
                    ? (itemTarget[dataIndex] * 1).toFixed(2) + itemUnit[dataIndex]
                    : itemTarget[dataIndex] + itemUnit[dataIndex]
                  : '0';
                // return itemTarget[dataIndex] > 0 ? itemTarget[dataIndex] + itemUnit[dataIndex] : '0';
              },
            },
            color: {
              type: 'linear',
              x: 0, //右
              y: 0, //下
              x2: 0, //左
              y2: 1, //上
              colorStops: [
                {
                  offset: 0,
                  color: '#115984  ', // 0% 处的颜色
                },
                {
                  offset: 1,
                  color: '#39fdf6  ', // 100% 处的颜色
                },
              ],
            },
            barBorderRadius: [0, 0, 0, 0],
          },
        },
      },
    ],
  });
};

onMounted(() => {
  initM();
});
</script>

<style lang="scss" scoped>
.asset_echart {
  width: 554px;
  height: 130px;
  margin: 0 10px;
  &_echart {
    width: 100%;
    height: 100%;
  }
}
</style>