<template>
  <div class="benefit-charts">
    <custom-echart-bar :chart-data="chartsData.valData" height="100%" :option="chartsData.option" :is-series="true" />
  </div>
</template>
<script setup>
import { ref, reactive, onMounted } from 'vue';

const data = [1700, 800, 1700, 600, 800];
const data2 = [2600, 1400, 3350, 1400, 1400];
const colorArr1 = ['rgba(11, 83, 128)', 'rgba(2, 143, 224)', '#2a7fcc'];
const colorArr2 = ['rgb(12, 109, 122)', 'rgba(1, 241, 228)', '#5ce1d6'];
const color1 = {
  type: 'linear',
  x: 0,
  x2: 1,
  y: 0,
  y2: 0,
  colorStops: [
    {
      offset: 0,
      color: colorArr1[0],
    },
    {
      offset: 0.5,
      color: colorArr1[0],
    },
    {
      offset: 0.5,
      color: colorArr1[1],
    },
    {
      offset: 1,
      color: colorArr1[1],
    },
  ],
};
const color2 = {
  type: 'linear',
  x: 0,
  x2: 1,
  y: 0,
  y2: 0,
  colorStops: [
    {
      offset: 0,
      color: colorArr2[0],
    },
    {
      offset: 0.5,
      color: colorArr2[0],
    },
    {
      offset: 0.5,
      color: colorArr2[1],
    },
    {
      offset: 1,
      color: colorArr2[1],
    },
  ],
};
var barWidth = 18;
const chartsData = reactive({
  option: {
    legend: {
      show: false,
    },
    tooltip: {
      trigger: 'axis',
      formatter: function (params) {
        var str = params[0].name + ':';
        params.filter(function (item) {
          if (item.componentSubType == 'bar') {
            str += '<br/>' + item.seriesName + '：' + item.value;
          }
        });
        return str;
      },
    },
    //图表大小位置限制
    grid: {
      x: '16%',
      x2: '5%',
      y: '15%',
      y2: '15%',
    },
    xAxis: {
      data: ['肉类', '水果', '蔬菜', '水产', '谷物'],
      //坐标轴
      axisLine: {
        show: true,
        lineStyle: {
          width: 1,
          color: '#214776',
        },
        textStyle: {
          color: '#fff',
          fontSize: '10',
        },
      },
      type: 'category',
      axisLabel: {
        textStyle: {
          color: '#C5DFFB',
          fontWeight: 500,
          fontSize: '14',
        },
      },
      axisTick: {
        textStyle: {
          color: '#fff',
          fontSize: '16',
        },
        show: false,
      },
    },
    yAxis: {
      name: ' ',
      nameTextStyle: {
        color: '#DEDEDE',
        fontSize: 12,
        padding: 10,
      },
      type: 'value',
      splitLine: {
        show: true,
        lineStyle: {
          type: 'dashed', //线的类型 虚线0
          opacity: 0.2, //透明度
        },
      },
      axisTick: {
        show: false,
      },
      axisLine: {
        show: false,
      },
      //坐标值标注
      axisLabel: {
        show: true,
        textStyle: {
          color: '#C5DFFB',
        },
      },
    },
    series: [
      {
        z: 1,
        name: '绿色',
        type: 'bar',
        barWidth: barWidth,
        barGap: '0%',
        data: data,
        itemStyle: {
          normal: {
            color: color2,
          },
        },
      },
      {
        z: 3,
        name: '绿色',
        type: 'pictorialBar',
        symbolPosition: 'end',
        data: data,
        symbol: 'diamond',
        symbolOffset: ['0%', '-60%'],
        symbolSize: [18, 12],
        itemStyle: {
          normal: {
            borderWidth: 2,
            color: colorArr2[2],
          },
        },
      },
    ],
  },
  valData: [
    { value: 205, name: '肉类' },
    { value: 308, name: '水果' },
    { value: 359, name: '蔬菜' },
    { value: 452, name: '水产' },
    { value: 388, name: '谷物' },
  ],
});

onMounted(() => {});
</script>
<style lang="scss" scoped>
.benefit-charts {
  height: 100%;
}
</style>
