<!-- 柱状图 -->
<template>
  <div class="chart" ref="chart" id="myChart3"></div>
</template>

<script>
import * as echarts from 'echarts';
import 'echarts-wordcloud';
// import { fontSize } from '@/views/groupPage/util'
import { queryImpactEngineering } from '/@/api/map/geologicalApi';
import { useGeologicalStore } from '/@/store/modules/geological';
import TFMapUitl from '/@/utils/TFMapUitl.ts';
export default {
  name: 'Histogram',
  props: {},
  data() {
    return {
      chartData: [],
    };
  },
  watch: {},
  mounted() {
    this.getImpactEngineeringData();
  },
  methods: {
    // 得到影响工程数据
    async getImpactEngineeringData() {
      await queryImpactEngineering().then((res) => {
        // this.chartData = res.result
        this.chartData = res.result.filter((item) => {
          return item.value > 0;
        });
      });
      this.$nextTick(() => {
        this.initialChart();
      });
    },
    // 初始化柱状图
    initialChart() {
      const myChart3 = echarts.init(document.getElementById('myChart3'));
      var xdata = [];
      var data = [];
      this.chartData.forEach((item) => {
        xdata.push(item.name);
        data.push(item.value);
      });
      // var maxArr = [100, 100, 100];

      let dataTemp = this.chartData;
      const getSymbolData = (dataTemp) => {
        let arr = [];
        for (var i = 0; i < dataTemp.length; i++) {
          arr.push({
            value: dataTemp[i].value,
            ssgcid: dataTemp[i].ssgcid,
            symbolPosition: 'end',
          });
        }
        return arr;
      };

      let option = {
        // backgroundColor: "rgba(5,39,58,1)", //背景色
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: 'shadow', // 默认为直线，可选为：'line' | 'shadow'
          },
          // borderRadius: 5,
          // borderColor: "#6baab2",
          // borderWidth: 1,
          formatter: function (params) {
            // params[0].data.nameCode
            let dot = '<span style="display:inline-block;margin-right:5px;border-radius:50%;width:10px;height:10px;background-color:#02C4DD"></span>';
            return params[0].name + '<br>' + '地灾点数量 ：' + params[0].value + '个';
          },
        },
        grid: {
          left: '4%',
          right: '4%',
          bottom: '20%',
          top: '15%',
          // containLabel: true
        },
        xAxis: {
          data: xdata,
          triggerEvent: true,
          axisTick: {
            show: false,
          },
          axisLine: {
            show: false,
          },
          axisLabel: {
            show: true,
            rotate: 0,
            interval: 0,
            textStyle: {
              padding: [0, 0, -10, 0],
              fontSize: 12,
              color: 'rgba(255,255,255,1)',
            },
          },
        },
        yAxis: {
          name: '',
          triggerEvent: true,
          nameTextStyle: {
            color: 'rgba(255,255,255,1)',
            fontSize: 16,
            padding: [0, 0, 10, -20],
          },
          splitLine: {
            //控制条纹显示
            show: false,
            lineStyle: {
              color: 'rgba(255,255,255,.1)',
            },
          },
          axisTick: {
            show: false,
          },
          axisLine: {
            show: true,
            lineStyle: {
              color: 'rgba(255,255,255,.1)',
            },
          },
          axisTick: {
            show: false,
          },
          axisLabel: {
            show: false,
            textStyle: {
              color: 'rgb(148,159,167)',
              fontSize: 12,
            },
          },
        },
        // color: ["#e54035"],
        series: [
          {
            name: '数量',
            barMinHeight: 10,
            type: 'pictorialBar',
            barCategoryGap: '60%',
            // symbol: 'path://M0,10 L10,10 L5,0 L0,10 z',
            symbol: 'path://M0,10 L10,10 C5.5,10 5.5,5 5,0 C4.5,5 4.5,10 0,10 z',
            itemStyle: {
              normal: {
                //barBorderRadius: 5,
                //渐变色
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 0,
                    color: '#01EAED',
                  },
                  {
                    offset: 0.5,
                    color: '#02C4DD',
                  },
                  {
                    offset: 1,
                    color: '#029ED9',
                  },
                ]),
              },
            },
            label: {
              normal: {
                show: true,
                position: 'top',
                textStyle: {
                  color: '#fff',
                  fontSize: 12,
                },
                formatter: function (a, b) {
                  return a.value + '个';
                },
              },
            },
            data: getSymbolData(dataTemp),
            z: 10,
          },
          {
            name: 'hill',
            type: 'bar',
            barWidth: '20%',
            symbol: 'path://M0,10 L10,10 C5.5,10 5.5,5 5,0 C4.5,5 4.5,10 0,10 z',
            itemStyle: {
              normal: {
                color: 'rgba(11,47,68,.8)',
              },
            },
            // data: maxArr,
            z: 9,
          },
        ],
      };
      // 显示柱状图
      myChart3.setOption(option);
      // 点击柱状图
      myChart3.on('click', (params) => {
        console.log('柱状图的参数', params);
        eventBus.emit('toSsgcid', params.data.ssgcid);
        //通过点击获取地灾点数据
        if (params && params.data && params.data.ssgcid) {
          const geologicalStore = useGeologicalStore();
          geologicalStore.DzdxInfo({ ssgcid: params.data.ssgcid, type: 'gc' }).then((tempData) => {
            debugger;
            const idList = [];
            if (tempData) {
              tempData.forEach((item) => {
                var id = TFMapUitl.getId('dzd', item.id);
                idList.push(id);
              });
              TFMapUitl.mapPointLocation_list3(map, idList);
            }
            // dzlxList.value = tempData;
          });
        }
      });
      // 自适应布局
      window.addEventListener('resize', function (event) {
        myChart3.resize();
      });
    },
  },
};
</script>

<style lang="less" scoped>
.chart {
  height: 100%;
  width: 375px;
}
</style>
