<template>
  <div class="ele-body">
    <!-- 搜索表单 -->
    <a-form
      :model="queryParams"
      :label-col="{ md: { span: 6 }, sm: { span: 24 } }"
      :wrapper-col="{ md: { span: 18 }, sm: { span: 24 } }"
    >
      <a-row>
        <a-col :lg="6" :md="12" :sm="24" :xs="24">
          <a-form-item label="年度:">
            <a-select
              mode="multiple"
              v-model:value="queryParams.yearList"
              :options="yearOptions"
              placeholder="请选择年度"
              @change="handleYearChange"
              allowClear
            >
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :lg="6" :md="12" :sm="24" :xs="24">
          <a-form-item label="月份:">
            <a-select
              mode="multiple"
              v-model:value="queryParams.monthList"
              :options="monthOptions"
              placeholder="请选择月份"
              @change="handleMonthChange"
              allowClear
            >
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :lg="6" :md="12" :sm="24" :xs="24">
          <a-form-item label="江河类别:">
            <a-select
              v-model:value="queryParams.riverType"
              @change="handleRiverChange"
              allowClear
              placeholder="请选择江河类别"
            >
              <a-select-option
                v-for="item in regionLevelOptions"
                :key="item.value"
                >{{ item.label }}</a-select-option
              >
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :lg="6" :md="12" :sm="24" :xs="24">
          <a-form-item label="断面名称:">
            <a-select
              mode="multiple"
              v-model:value="queryParams.placeList"
              :options="sectionOptions"
              placeholder="请选择断面名称"
              @change="handleSectionChange"
              allowClear
            >
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :lg="6" :md="12" :sm="24" :xs="24">
          <a-form-item label="监测指标:">
            <a-select
              :mode="selectModel"
              v-model:value="queryParams.monitorIndexList"
              :options="indicatorOptions"
              placeholder="请选择监测指标"
              @change="handleIndexChange"
              allowClear
            >
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :lg="6" :md="12" :sm="24" :xs="24">
          <a-form-item label="横坐标:">
            <a-select
              v-model:value="queryParams.xco"
              :options="xOptions"
              allowClear
              placeholder="请选择横坐标"
            >
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :lg="6" :md="12" :sm="24" :xs="24">
          <a-form-item label="纵坐标:">
            <a-select
              v-model:value="queryParams.yco"
              :options="yOptions"
              :disabled="yDisable"
              allowClear
              placeholder="请选择纵坐标"
            >
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :lg="6" :md="12" :sm="24" :xs="24" style="text-align: center">
          <a-space>
            <a-button type="primary" class="mb-20" @click="drawTrend"
              >开始统计</a-button
            >
          </a-space>
        </a-col>
      </a-row>
    </a-form>
    <a-card :bordered="false">
      <div id="chartColumn" style="width: 100%; height: 700px;"><div class="empty">暂无数据</div></div>
    </a-card>
  </div>
</template>

<script>
import * as echarts from "echarts";
let trendChart;

import { getRiverPoint, getRiverProvicePoint, getRiverNationalPoint, getRiverStationPoint, riverWaterTrend } from "@/api/ecology/river-trend.js";

export default {
  components: {},
  data() {
    return {
      queryParams: {
        yearList: [],
        monthList: [],
        riverType:'',
        placeList: [],
        xco: "Xco_1", // 横坐标
        yco:"",
        monitorIndexList: [], // 监测指标
      },
      trendData: [],
      regionLevelOptions: [
        { label: "江河", value: "river" },
        { label: "自治区级水功能区", value: "autonomous_region" },
        { label: "国家级水功能区", value: "country" },
        { label: "水站", value: "water" },
      ],
      sectionOptions: [],
      yearOptions: [],
      indicatorOptions: [ 
      ],
      selectModel:'multiple',
      allIndexOptions:[ 
        { label: "全选", value: "全选", limit:"0",color:"#209f53" },
        { label: "五日生化需氧量", value: "五日生化需氧量", limit:"3",color:"#209f53" },
        { label: "化学需氧量", value: "化学需氧量", limit:"15",color:"#209f53" },
        { label: "总磷", value: "总磷", limit:"0.025",color:"#20749f" },
        { label: "挥发酚", value: "挥发酚", limit:"0.002",color:"#7bbe3a" },
        { label: "氟化物", value: "氟化物", limit:"1",color:"#ad3abe" },
        { label: "氨氮", value: "氨氮", limit:"0.5",color:"#ad3abe" },
        { label: "氰化物 ", value: "氰化物", limit:"0.05",color:"#a4a3f1" },
        { label: "汞", value: "汞", limit:"0.00005",color:"#f1eca3" },
        { label: "溶解氧", value: "溶解氧", limit:"6",color:"#bbb443" },
        { label: "石油类", value: "石油类", limit:"0.05",color:"#62bb43" },
        { label: "砷", value: "砷", limit:"0.05",color:"#3cd560" },
        { label: "硒", value: "硒", limit:"0.01",color:"#91b516" },
        { label: "硫化物", value: "硫化物", limit:"1",color:"#4ab516" },
        { label: "铅", value: "铅", limit:"0.01",color:"#62255a" },
        { label: "铜", value: "铜", limit:"1",color:"#8a4c82" },
        { label: "铬", value: "铬", limit:"0.06",color:"#63258b" },
        { label: "锌", value: "锌", limit:"1",color:"#25388b" },
        { label: "镉", value: "镉", limit:"0.005",color:"#258b80" },
        { label: "阴离子表面活性剂 ", value: "阴离子表面活性剂", limit:"0.2",color:"#27aa49" },
        { label: "高锰酸盐指数", value: "高锰酸盐指数", limit:"4",color:"#209f53" },
        { label: "ph", value: "ph", limit:"9",color:"#209f53" },
      ],
      otherIndexOption:[
        { label: "全因子", value: "全因子", limit:"0.025",color:"#209f53" },
        { label: "纳污红线", value: "纳污红线", limit:"0.5",color:"#209f53" },
      ],
      waterIndexOption:[
        { label: "全选", value: "全选", limit:"0",color:"#209f53" },
        // { label: "水温", value: "水温", limit:"2",color:"#209f53" },
        { label: "ph", value: "ph", limit:"9",color:"#209f53" },
        { label: "溶解氧", value: "溶解氧", limit:"6",color:"#bbb443" },
        { label: "高锰酸盐指数", value: "高锰酸盐指数", limit:"4",color:"#209f53" },
        { label: "氨氮", value: "氨氮", limit:"0.5",color:"#ad3abe" },
        { label: "总磷", value: "总磷", limit:"0.025",color:"#20749f" },
      ],

      innerSection: [], // 内湖断面
      specialSection: [], // 专湖断面
      yDisable:false,
      monthOptions: [
        // {
        //   label: "全部",
        //   value: "全部",
        // },
      ],
      xOptions: [
        {
          label: "年度",
          value: "Xco_1",
        },
        {
          label: "年月",
          value: "Xco_2",
        },
        {
          label: "区域/测点名称",
          value: "Xco_3",
        },
      ],
      yOptions: [
        {
          label: "浓度",
          value: "Yco_1",
        },
        {
          label: "综合营养指数（无量纲）",
          value: "Yco_2",
        },
        {
          label: "水质类别",
          value: "Yco_3",
        },
      ],

      // 图表生成数据
      xAxis: {},
      series: {},
      yAxisMax:1, //Y轴最大值
    };
  },
  mounted() {
     this.loadOptionData();

     Array.prototype.remove = function(val) { 
        var index = this.indexOf(val); 
        if (index > -1) { 
        this.splice(index, 1); 
        } 
      };
  },
  methods: {
    // 全选
    //年份
    handleYearChange(e){
      if(e.indexOf('全选')>-1){
        this.queryParams.yearList = [...this.yearOptions.map(item=>(
          item.value
        ))]
        this.queryParams.yearList.remove('全选');
      }
    },
    // 月份
    handleMonthChange(e){
    if(e.indexOf('全选')>-1){
        this.queryParams.monthList = [...this.monthOptions.map(item=>(
          item.value
        ))]
        this.queryParams.monthList.remove('全选');
      }
    },
    // 断面
    handleSectionChange(e){
    if(e.indexOf('全选')>-1){
        this.queryParams.placeList = [...this.sectionOptions.map(item=>(
          item.value
        ))]
        this.queryParams.placeList.remove('全选');
      }
    },
    // 指标
    handleIndexChange(e){
      if(!e){
        this.yDisable = false
        return
      }
      if(e=='全因子' || e=='纳污红线'){
        this.yDisable = true
        this.selectModel = 'default'
        this.queryParams.yco = 'Yco_3'
      }else{
        this.selectModel = 'multiple'
        this.yDisable = false
      }

      if(e.indexOf('全选')>-1){
        this.queryParams.monitorIndexList = [...this.indicatorOptions.map(item=>(
          item.value
        ))]
        this.queryParams.monitorIndexList.remove('全选');
      }
    },

    // 下拉列表
    loadOptionData() {
      let yy = new Date().getFullYear();
      this.yearOptions.push({
          label: '全选',
          value: '全选',
        })
      this.monthOptions.push({
          label: '全选',
          value: '全选',
        })
      for (let i = 1; i <= 12; i++) {
        this.yearOptions.push({
          label: yy - i,
          value: yy - i,
        });
        this.monthOptions.push({ label: i + "月", value: i<10?('0'+i):i });
      }
    },
    // 江河类别
  
    handleRiverChange(type){
        this.queryParams.placeList = [];
        this.queryParams.monitorIndexList = [];
        this.yDisable = false

        if(type){
            this.sectionOptions = []
            this.indicatorOptions = []
            if(type==this.regionLevelOptions[0].value){
              this.indicatorOptions = [...this.allIndexOptions];
                getRiverPoint().then((res) => {
                    if (res.data.code == 0) {
                        this.sectionOptions = this.buildSectionSelect(res.data.data)
                    } else {
                        this.$message.error(res.data.msg);
                    }
                })
            }
            if(type==this.regionLevelOptions[1].value){
              this.indicatorOptions = [...this.otherIndexOption];
                getRiverProvicePoint().then((res) => {
                    if (res.data.code == 0) {
                        this.sectionOptions = this.buildSectionSelect(res.data.data)
                    } else {
                        this.$message.error(res.data.msg);
                    }
                })
            }
            if(type==this.regionLevelOptions[2].value){
               this.indicatorOptions = [...this.otherIndexOption];
                getRiverNationalPoint().then((res) => {
                    if (res.data.code == 0) {
                        this.sectionOptions = this.buildSectionSelect(res.data.data)
                    } else {
                        this.$message.error(res.data.msg);
                    }
                })
            }
            if(type==this.regionLevelOptions[3].value){
               this.indicatorOptions = [...this.waterIndexOption];
                getRiverStationPoint().then((res) => {
                    if (res.data.code == 0) {
                        this.sectionOptions = this.buildSectionSelect(res.data.data)
                    } else {
                        this.$message.error(res.data.msg);
                    }
                })
            }
        }
        // console.log('this.sectionOptions',this.sectionOptions)
    },
    // 趋势图
    drawTrend() {
      
      if(this.queryParams.monitorIndexList && this.queryParams.monitorIndexList.indexOf('全因子')==-1 && this.queryParams.monitorIndexList.indexOf('纳污红线')==-1){
        if(this.queryParams.yco == 'Yco_3' && this.queryParams.monitorIndexList.length>0){
          this.$message.error('纵坐标为水质类别时，请勿选择监测指标！');
          return;
        }
      }
      

      if(this.queryParams.yco == 'Yco_1' && this.queryParams.monitorIndexList.length>1 && this.queryParams.placeList.length>1){
        this.$message.error('纵坐标为浓度时，请勿选择监测指标和断面名称不能同时为多选！');
        return;
      }

      let params = {...this.queryParams}
      if(this.queryParams.monitorIndexList && !Array.isArray(this.queryParams.monitorIndexList)){
        params.monitorIndexList = [...this.queryParams.monitorIndexList]
      }

      riverWaterTrend(params).then((res) => {
        console.log("res", res);
        if (res.data.code == 0) {
          this.trendData = res.data.data || [];
          this.initChart();
        } else {
          console.log("res.data.msg", res.data.msg);
          this.$message.error(res.data.msg);
        }
      });
    },

    // 生成断面数据
    buildSectionSelect(data) {
      let palceOptions = {};
      let newPlace = [];
      data.forEach((item) => {
        if(item.sectionName){
          palceOptions[item.sectionName] = item.sectionName;
        }else if(item.stationName){
          palceOptions[item.stationName] = item.stationName;
        }
        
      });
        newPlace.push({
          label: '全选',
          value: '全选',
        })
        console.log('palceOptions',palceOptions)
      for (let i in palceOptions) {
        newPlace.push({
          label: palceOptions[i],
          value: palceOptions[i],
        });
      }
      return [...newPlace];
    },

    initChart() {
      this.yAxisMax = 1;

      if (trendChart != null && trendChart != "" && trendChart != undefined) {
        trendChart.dispose(); // 销毁
      }
      if(Array.isArray(this.trendData) && this.trendData.length==0){
        document.getElementById("chartColumn").innerHTML = '<div class="empty">暂无数据</div>'
        return;
      }
      trendChart = echarts.init(document.getElementById("chartColumn"));
      let text = '';

        if(this.queryParams.placeList.length==1){
            let code = ''
            if(this.queryParams.yco == 'Yco_1'){
                code = '监测指标浓度'
            }
            if(this.queryParams.yco == 'Yco_2'){
                code = '综合营养指数'
            }
            if(this.queryParams.yco == 'Yco_3'){
                code = '水质类别'
            }

            text = this.queryParams.placeList[0] + this.queryParams.yearList.join('、') + '年度' + code
        }

      // 生成x轴
      this.buildxAxis();
      // 生成series
      this.buildSeries();

      let option = {
          title:{
              text:text,
              x:'center',
              textStyle: {
                            color: '#3A7BD5',
                            fontSize: 16
                        }
          },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
            crossStyle: {
              color: "#999",
            },
          },
          formatter: (this.queryParams.yco == 'Yco_3') && ((params)=>{
            if(this.queryParams.yco == 'Yco_3'){
              var html = '<div style="font-weight:bold">水质类别</div>';
              for(var i=0;i<params.length;i++){
                console.log('params',params)
                html += "<div style='line-height:25px'><span style='display: inline-block;width: 10px; height: 10px;margin-right:5px; border-radius: 10px;background:"+params[i].color+"'></span>类别"+ params[i].seriesName +"："+params[i].data+"%" + "</div>";
              }
              return html
            }
        })
        },
        toolbox: {
          feature: {
            saveAsImage: {
              show: true,
            },
          },
        },
        legend: {
          show: true,
          x: "center", //可设定图例在左、右、居中
          y: "bottom", //可设定图例在上、下、居中
          padding: [0, 50, 0, 0], //可设定图例[距上方距离，距右方距离，距下方距离，距左方距离]
          // formatter: function (name) {
          //     return name;
          // }
        },
        color:[
            "#43cb23",
            "#2ec7c9", "#b6a2de","#5ab1ef","#ffb980","#d87a80",
            "#8d98b3","#e5cf0d","#97b552","#95706d","#dc69aa",
            "#07a2a4","#9a7fd1","#588dd5","#f5994e","#c05050",
            "#59678c","#c9ab00","#7eb00a","#6f5553","#c14089",
            '#99FF00','#9999FF','#9966FF','#CC33FF','#FF9900',
            '#C1232B','#B5C334','#FCCE10','#E87C25','#27727B',
            '#FE8463','#9BCA63','#FAD860','#F3A43B','#60C0DD',
            '#D7504B','#C6E579','#F4E001','#F0805A','#26C0C0',
            
        ],
        xAxis: this.xAxis,
        yAxis: {
          type: "value",
          max: this.yAxisMax,
          name: this.queryParams.yco == 'Yco_1' ? '单位：mg/L' : '',
          axisLabel: {
                show: true,
                interval: 'auto',
                formatter: this.queryParams.yco=='Yco_3' && '{value} %'
            },
        },

        series: this.series,
      };

      trendChart.setOption(option);
    },

    // 生成Y轴最大值
    buildYMax(value){
        if(this.yAxisMax<value){
            this.yAxisMax = Math.ceil(value)
        }
    },

    // 生成x轴标签
    buildxAxis() {
      let xAxis = [];
      // x坐标是断面
      if (this.queryParams.xco == "Xco_3") {
        this.trendData.forEach((item) => {
            if(xAxis.indexOf(item.place)<0){
                xAxis.push(item.place);
            }
        });
      }
      // x左边为年度、年月,只选一个断面
      // && ( Array.isArray(this.queryParams.placeList) && this.queryParams.placeList.length==1)
      if (this.queryParams.xco == "Xco_1" || this.queryParams.xco == "Xco_2") {
        this.trendData.forEach((item) => {
          let x = this.buildYearMonth(item);
          if (xAxis.indexOf(x) < 0) xAxis.push(x);
        });
      }
      let rotate = 0;
      if (xAxis.join("").length > 50) {
        rotate = 10;
      }
      console.log('xAxis',xAxis)
      this.xAxis = {
        type: "category",
        axisLabel: {
          interval: 0,
          rotate: rotate,
        },
        // boundaryGap: false, // 第一个数据点距离y轴距离
        data: xAxis,
      };
    },

    // 生成营养度三根线
    buildLine() {
      let lines = [];

      let xMax = this.xAxis.data.length;
      // 三根营养线,在纵坐标选择综合营养指数时显示
      if (this.queryParams.yco == "Yco_2"){
        this.buildYMax(72);

        if(xMax-3<1){
          lines = [
             {
                name: "中度富营养↓",
                yAxis: 70,
                label: {
                  color: "red",
                  borderColor: "red",
                  formatter:'中度富营养↓'
                },
                lineStyle: {
                  color: "red",
                },
              },
              {
                name: "轻度富营养↓",
                yAxis: 60,
                label: {
                  color: "#fbfb00",
                  borderColor: "#fbfb00",
                  formatter:'轻度富营养↓'
                },
                lineStyle: {
                  color: "#fbfb00",
                },
              },
              {
                name: "中营养↓",
                yAxis: 50,
                label: {
                  color: "#99ff00",
                  borderColor: "#99ff00",
                  formatter:'中营养↓'
                },
                lineStyle: {
                  color: "#99ff00",
                },
              },
          ]
            
        }else{
          lines = [
            [
              {
                name: "中度富营养↓",
                yAxis: 70,
                xAxis: 0,
                label: {
                  color: "red",
                  borderColor: "red",
                },
                lineStyle: {
                  color: "red",
                },
              },
              {
                yAxis: 70,
                xAxis: xMax - 3,
              },
            ],
            [
              {
                name: "轻度富营养↓",
                yAxis: 60,
                xAxis: 0,
                label: {
                  color: "#fbfb00",
                  borderColor: "#fbfb00",
                },
                lineStyle: {
                  color: "#fbfb00",
                },
              },
              {
                yAxis: 60,
                xAxis: xMax - 2,
              },
            ],
            [
              {
                name: "中营养↓",
                yAxis: 50,
                xAxis: 0,
                label: {
                  color: "#99ff00",
                  borderColor: "#99ff00",
                },
                lineStyle: {
                  color: "#99ff00",
                },
              },
              {
                yAxis: 50,
                xAxis: xMax - 1,
              },
            ]];
        }
      }
 
  // 在纵坐标选择浓度，那显示指标均线
    if(this.queryParams.yco == "Yco_1"){
      let singleLine = []  
        this.queryParams.monitorIndexList.forEach(item=>{
                this.indicatorOptions.forEach(single=>{
                    if(single.value == item){
                        this.buildYMax(single.limit);


                          const name = single.label+'Ⅱ类标准'
                          singleLine.push(
                            {
                              name:name,
                              type:'line',
                              symbol:'path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5z M36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8z M27.8,35.8 c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z',
                              markLine:{
                                  data:[
                                      {
                                          name:name,
                                          yAxis: single.limit,
                                      }
                                  ],
                                lineStyle: {
                                    type: "dashed", // dotted,solid,dashed
                                    // color: single.color,
                                    width: 2,
                                    opacity: 0.9,
                                },
                                label: {
                                    // color: single.color,
                                    formatter: single.label+"Ⅱ类标准",
                                    position:'insideEndBottom'
                                },
                              }
                            }
                          )

                        // singleLine.push(
                        //     {
                        //         name: item,
                        //         yAxis: single.limit,
                        //         lineStyle: {
                        //             type: "dashed", // dotted,solid,dashed
                        //             color: single.color,
                        //             width: 2,
                        //             opacity: 0.9,
                        //         },
                        //         label: {
                        //             color: single.color,
                        //             formatter: single.label+"Ⅱ类标准",
                        //         },
                        //         }
                        // )
                    }
                })
        })
        lines = [...singleLine]
      }


      return lines;
    },
    // 生成年月标识
    buildYearMonth(obj){
      if(this.queryParams.xco == "Xco_1"){
        return  obj.year;
      }else{
        return  obj.year + (obj.month ? ('-'+obj.month) : "");
      } 
    },


    // 生成图表数据
    buildSeries() {
      let series = [];
      

      let charType = 'bar'
        // 如果Y坐标选择了浓度，那就是折线图，选择综合指标是柱状图，选择水质类别那就是堆叠
        if(this.queryParams.yco == 'Yco_1'){
            charType = 'line'
        }
    //   // 如果选择了监测指标，那就是折线图
    //   if(Array.isArray(this.queryParams.monitorIndexList) && this.queryParams.monitorIndexList.length){
    //     charType = 'line'
    //   }

    // X轴坐标
     let seriesItemName = this.xAxis.data; 

      // x坐标是断面
      if (this.queryParams.xco == "Xco_3") {
       
        // 如果是断面，则用年月来分组数据
        // let seriesItemName = this.xAxis.data; 
        let group = [];


        // 如果是水质类别，那么就按类别分组
         if(this.queryParams.yco=='Yco_3'){
             this.trendData.forEach((item) => {
            if (group.indexOf(item.value) < 0) {
                group.push(item.value);
            }
            });
          }else{
            this.trendData.forEach((item) => {
              if (group.indexOf(this.buildYearMonth(item)) < 0) {
                  group.push(this.buildYearMonth(item));
              }
            });
          }


        group.forEach(item=>{
            let itemData = [];
            seriesItemName.forEach((data,index)=>{
                itemData[index] = 0
                this.trendData.forEach((single) => {
                    // 水质类别
                    if(this.queryParams.yco=='Yco_3'){
                      if(item==single.value && data == single.place){
                        itemData[index] += 1;
                      }
                    }else{
                      if (data == single.place && item == this.buildYearMonth(single)) {
                        itemData[index] = single.value;
                        this.buildYMax(single.value);
                      }
                    }
                });
            })

        let single = {
            name: item,
            type: charType,
            barMaxWidth:30,
            label: {
              // 图形上的文本标签
              show: true,
              position: this.queryParams.yco=='Yco_3' ? "inside":"top", // 相对位置
              formatter: (params)=>{
                if(this.queryParams.yco=='Yco_3'){
                 if(params.data){
                  return params.data+"%"
                 }else{
                   return ''
                 }
                }
              }
            },
            data: [...itemData],
          };
           // 纵坐标 水质类别，那就堆叠
          if(this.queryParams.yco=='Yco_3'){
            single.stack = '水质类别'
            this.buildYMax(100);
          }

          series.push(single);
        })
      }

      // 一个断面多个指标
    const singleType = this.queryParams.placeList.length==1 && this.queryParams.monitorIndexList.length>1;

    if (this.queryParams.xco == "Xco_1" || this.queryParams.xco == "Xco_2") {
        // let seriesItemName = this.xAxis.data; 
        let group = [];
    
        // 如果是水质类别，那么就按类别分组
         if(this.queryParams.yco=='Yco_3'){
             this.trendData.forEach((item) => {
            if (group.indexOf(item.value) < 0) {
                group.push(item.value);
            }
            });
          }else{
            if(singleType){
                this.trendData.forEach((item) => {
                if (group.indexOf(item.indexName) < 0) {
                    group.push(item.indexName);
                }
                });
            }else{
                this.trendData.forEach((item) => {
                if (group.indexOf(item.place) < 0) {
                    group.push(item.place);
                }
                });
            }
          }

        /**
         * 生成数据图例
         {
            name: "一组",
            data: [120, 200, 150, 80, 70, 110, 130],
            type: "bar", // line
          },
          {
            name: "二组",
            data: [120, 200, 150, 80, 70, 110, 130],
            type: "bar", // line
          },
        * 
        */


        group.forEach(item=>{
            let itemData = [];
            seriesItemName.forEach((data,index)=>{
                itemData[index] = 0
                this.trendData.forEach((single) => {
                    // 水质类别
                    if(this.queryParams.yco=='Yco_3'){
                      if(item==single.value && data == this.buildYearMonth(single)){
                        itemData[index] += 1;
                      }
                    }else{
                      let name = ''
                      if(singleType){
                          name = single.indexName
                      }else{
                          name = single.place
                      }

                      if (data == this.buildYearMonth(single) && item == name) {
                          itemData[index] = single.value;
                          this.buildYMax(single.value);
                      }
                    }
                    
                });
            })

        let single = {
            name: item,
            type: charType,
            barMaxWidth:30,
            label: {
              // 图形上的文本标签
              show: true,
              position: this.queryParams.yco=='Yco_3' ? "inside":"top", // 相对位置
              formatter: (params)=>{
                if(this.queryParams.yco=='Yco_3'){
                 if(params.data){
                  return params.data+"%"
                 }else{
                   return ''
                 }
                }
              }
            },
            barGap: this.queryParams.yco=='Yco_3' && '-100%',
            data: [...itemData],
          };
           // 纵坐标 水质类别，那就堆叠
        if(this.queryParams.yco=='Yco_3'){
          single.stack = "Yco_3"
          this.buildYMax(100);
        }

          series.push(single);
        })
    }

      if(this.queryParams.yco=='Yco_1'){
        series = [...series,...this.buildLine()]
      }else{
            series[0].markLine = {
                lineStyle: {
                  normal: {
                    type: "line",
                    width: 3,
                    opacity: 0.9,
                  },
                },
                label: {
                  padding: [1, 10],
                  lineHeight: 30,
                  show: true,
                  position: this.queryParams.yco=='Yco_1' ? "insideEndBottom" : "end",
                  borderType: "dashed",
                  borderWidth: 1,
                },
                data: [...this.buildLine()],
                symbol: ["none", "none"],
              };
      }

        // 对指标的名字转成中文
        if(singleType){
            series = series.map(item=>{
                let name = item.name;
                this.indicatorOptions.forEach(single=>{
                    if(single.value == item.name){
                      name = single.label
                    }
                })
                return {
                    ...item,
                    name:name
                }
            })
        }

      console.log("series", series);
      //进行堆叠图百分比计算
      if(this.queryParams.yco=='Yco_3'){
        // 所有分组的总值
        let allGroupCount = [];
        seriesItemName.forEach((item,index)=>{
          let count = 0;
          series.forEach(group=>{
            count += group.data[index]
          })
          allGroupCount.push(count)
        })

        // 通过总值计算出百分比
        seriesItemName.forEach((item,index)=>{
          series = series.map(group=>{
            group.data[index] = (Math.round(group.data[index] / allGroupCount[index] * 10000) / 100.00)
            return {
              ...group,
            }
          })

        })
      }
      this.series = series;
    },

  },
};
</script>
<style scoped lang="less">
.mb-20 {
  margin-bottom: 20px;
}
.empty{
  height: 100%;
  line-height: 400px;
  color: #ccc;
  font-size: 16px;
  text-align: center;
}

</style>
