<template>
  <div :id="id"
       style="width: 100%; height: 100%"></div>
</template>
<script>
import * as echarts from 'echarts';
import { guid } from '@/utils/util';
import { reactive, toRefs, onMounted, watch, nextTick } from 'vue';

export default {
  name: 'bar1',
  setup(props) {
    const state = reactive({
      id: guid(),
      chart: null,
      chartData: [
        // {name: "效果", xdata: ["第一季度", "第二季度", "第三季度", "第四季度"], ydata: [8.4, 9.6, 9.7, 9.7], stack: "效果"}
      ],
    });
    const resizeTheChart = () => {
      if (state.chart) {
        state.chart.resize();
      }
    };
    const initData = () => {
      if (state.chart) state.chart.dispose();
      let chartDom = echarts.init(document.getElementById(state.id));
      chartDom.clear();
      let option;
      option = {
        tooltip: {
          trigger: 'axis',
          backgroundColor: '#F5F8FA',
          borderColor: '#143343',
          axisPointer: {
            type: 'shadow',
          },
          textStyle: { fontSize: 14, fontWeight: 500, color: '#666666' },
          formatter(params) {
            let arr = [];
            params.forEach((v) => {
              if (v.seriesType == 'bar') {
                arr.push(v);
              }
            });
            return (
              '<div style="width:120px">' +
              '<h4>' +
              arr[0].name +
              '</h4>' +
              '<span style="float:left;">' +
              arr[0].seriesName +
              ':' +
              '</span>' +
              '<span style="float:right;">' +
              arr[0].value +
              '</span></br>' +
              '<span style="float:left;">' +
              arr[1].seriesName +
              ':' +
              '</span>' +
              '<span style="float:right;">' +
              arr[1].value +
              '</span></br>' +
              '<span style="float:left;">' +
              arr[2].seriesName +
              ':' +
              '</span>' +
              '<span style="float:right;">' +
              arr[2].value +
              '</span></br>' +
              '</div>'
            );
          },
        },
        legend: {
          top: '5%',
          textStyle: {
            color: '#fff',
          },
          itemHeight: 6,
          itemWidth: 15,
          icon: 'rect',
        },
        grid: {
          top: '25%',
          left: '3%',
          right: '3%',
          bottom: '5%',
          containLabel: true,
        },
        xAxis: {
          data: state.chartData[0].xdata,
          axisLabel: {
            color: '#fff',
          },
          axisLine: {
            lineStyle: {
              color: 'rgba(45, 60, 92, 1)',
              width: 1, //这里是为了突出显示加上的
            },
          },
          splitLine: {
            lineStyle: {
              color: 'rgba(45, 60, 92, 1',
              width: 1,
            },
          },
        },
        yAxis: {
          type: 'value',
          axisLabel: {
            color: '#fff',
          },
          axisLine: {
            show: true,
            lineStyle: {
              color: 'rgba(45, 60, 92, 1)',
              width: 1, //这里是为了突出显示加上的
            },
          },
          splitLine: {
            lineStyle: {
              color: 'rgba(45, 60, 92, 1',
              width: 1,
            },
          },
        },
        series: [
          // 柱体
          {
            name: state.chartData[0].name,
            type: 'bar',
            z: 10,
            data: state.chartData[0].ydata,
            barWidth: 20,
            itemStyle: {
              color: new echarts.graphic.LinearGradient(
                1,
                0,
                0,
                0, // 0,0,1,0表示从左向右    0,0,0,1表示从右向左
                [
                  {
                    offset: 0,
                    color: 'rgba(0, 188, 255, 1)',
                  },
                  {
                    offset: 0.3,
                    color: 'rgba(0, 188, 255, .46)',
                  },
                  {
                    offset: 0.5,
                    color: 'rgba(0, 188, 255, .28)',
                  },
                  {
                    offset: 0.7,
                    color: 'rgba(0, 188, 255, .46)',
                  },
                  {
                    offset: 1,
                    color: 'rgba(0, 188, 255, 1)',
                  },
                ]
              ),
            },
          },
          // 柱体
          {
            name: state.chartData[1].name,
            type: 'bar',
            z: 10,
            data: state.chartData[1].ydata,
            barWidth: 20,
            itemStyle: {
              color: new echarts.graphic.LinearGradient(
                1,
                0,
                0,
                0, // 0,0,1,0表示从左向右    0,0,0,1表示从右向左
                [
                  {
                    offset: 0,
                    color: 'rgba(255, 217, 130, 1)',
                  },
                  {
                    offset: 0.3,
                    color: 'rgba(255, 217, 130, .46)',
                  },
                  {
                    offset: 0.5,
                    color: 'rgba(255, 217, 130, .28)',
                  },
                  {
                    offset: 0.7,
                    color: 'rgba(255, 217, 130, .46)',
                  },
                  {
                    offset: 1,
                    color: 'rgba(255, 217, 130, 1)',
                  },
                ]
              ),
            },
          },
          {
            name: state.chartData[2].name,
            type: 'bar',
            z: 10,
            data: state.chartData[2].ydata,
            barWidth: 20,
            itemStyle: {
              color: new echarts.graphic.LinearGradient(
                1,
                0,
                0,
                0, // 0,0,1,0表示从左向右    0,0,0,1表示从右向左
                [
                  {
                    offset: 0,
                    color: 'rgba(255, 17, 130, 1)',
                  },
                  {
                    offset: 0.3,
                    color: 'rgba(255, 17, 130, .46)',
                  },
                  {
                    offset: 0.5,
                    color: 'rgba(255, 17, 130, .28)',
                  },
                  {
                    offset: 0.7,
                    color: 'rgba(255, 17, 130, .46)',
                  },
                  {
                    offset: 1,
                    color: 'rgba(255, 17, 130, 1)',
                  },
                ]
              ),
            },
          },
        ],
      };
      chartDom.clear();
      chartDom.setOption(option, true);
      state.chart = chartDom;
    };
    onMounted(() => {
      nextTick(() => {
        window.addEventListener('resize', resizeTheChart);
      });
    });
    return {
      ...toRefs(state),
      resizeTheChart,
      initData,
    };
  },
};
</script>