epmet-work-pc/src/views/dataBoard/satisfactionEval/modules/SelfTrend/index.vue

<template>
  <div class="self-trend">
    <div class="screen">
      <Tabs v-model="trendType" :list="trendTypeList" @changeVal="trendTypeChange"/>
    </div>
    <div id="selfTrendChart" style="height: 243px;"></div>
  </div>
</template>

<script>
import * as echarts from "echarts";
import Tabs from "@/views/dataBoard/satisfactionEval/components/Tabs/index.vue";

export default {
  name: "SelfTrend",
  components: {Tabs},
  data() {
    return {
      trendType: 1,
      trendTypeList: [{
        label: '不满意事项走势',
        value: 1

      }, {
        label: '社区自查结果走势',
        value: 2

      }],
    }
  },
  watch: {
    "$store.state.chooseArea.chooseName"(val) {
      if (val.orgId) {
        this.getData();
      }
    }
  },
  mounted() {
    if (this.$store.state.chooseArea.chooseName.orgId) {
      this.getData();
    }
  },
  methods: {
    trendTypeChange(val) {
      if (val !== this.trendType) {
        this.trendType = val
        this.getData()
      }
    },
    getData() {
      let params = {
        level: this.$store.state.chooseArea.chooseName.level,
        orgId: this.$store.state.chooseArea.chooseName.orgId,
      }
      let url = '/governance/satisfactionOverview/notSatisfactionTrend'
      if (this.trendType === 2) {
        url = '/governance/satisfactionOverview/selfInspectMonthTrend'
      }
      params = this.$paramsFormat(params)
      this.$http.get(url + '?' + params).then(({data: {data}}) => {
        this.initCharts(data)
      })
    },
    initCharts({monthTimes, series}) {
      let div = document.getElementById('selfTrendChart');
      this.myChart = echarts.init(div);

      let xData = monthTimes;
      let color = ['#F95619', '#F9E066', '#25F0F6']
      let seriesArray = series.map((item, index) => {
        return {
          name: item.name,
          type: 'line',
          showAllSymbol: true,
          symbol: 'circle',
          symbolSize: 6,
          lineStyle: {
            normal: {
              color: color[index],
            },
          },
          label: {
            show: false,
            position: 'top',
            textStyle: {
              color: color[index],
            },
          },
          itemStyle: {
            color: color[index],
            borderColor: color[index],
            borderWidth: 2,
          },
          data: item.data,
        }
      })
      console.log(seriesArray)
      let num = []
      series.forEach(item => {
        num.push(...item.data)
      })
      const max = Math.max(...num)

      let barArray = new Array(xData.length).fill((parseInt(max / 100) + 1) * 100)
      var option = {

        title: {
          show: false,
          text: '',
          x: 'center',
          top: '15px',
          textStyle: {
            color: '#333333',
            fontWeight: 500,
            fontSize: 18,
          },
        },
        tooltip: {
          trigger: 'axis',
          backgroundColor: 'rgba(13,33,71,0.5)',
          borderColor: 'rgba(143,174,252,0.6)',
          padding: 8,
          textStyle: {
            color: '#fff',
          },
          formatter: function (params) {
            console.log(params)
            var res = '<div"><p>' + params[0].name + '</p></div>'
            for (var i = 0; i < params.length; i++) {
              if (params[i].seriesName != "") {
                res += '<p>' + params[i].seriesName + ':' + params[i].data + '</p>'
              }
            }
            return res;
          },
        },
        legend: {
          // icon: 'circle',
          data: series.map(item => item.name),
          itemGap: 20,
          itemWidth: 16,
          itemHeight: 6,
          x: 'right',
          top: '3%',
          textStyle: {
            color: '#fff',
            fontSize: 14,
            // padding:[0, 10, 0, 10],
          }
        },
        grid: {
          top: '18%',
          left: '2%',
          right: '4%',
          bottom: '8%',
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            axisTick: {
              show: false,
            },
            splitLine: {
              show: false,
            },
            axisLine: {
              lineStyle: {
                color: '#323c41'
              }
            },
            axisLabel: {
              interval: 0,
              align: 'center',
              rotate: '40',
              margin: '25',
              textStyle: {
                fontSize: 12,
                color: '#A3B9DA'
              }
            },
            boundaryGap: true,
            data: xData,
          },
        ],

        yAxis: [
          {
            type: 'value',
            name: '单位：' + (this.trendType === 1 ? '人' : '得分'),
            nameLocation: 'end',
            splitLine: {
              show: true,
              lineStyle: {
                color: 'rgba(4,187,255,0.18)',
                type: 'dashed'
              },
            },
            nameTextStyle: {
              color: '#A3B9DA',
              textStyle: {
                fontSize: 12
              },
              align: 'center'
            },
            axisLabel: {
              show: true,
              color: '#A3B9DA',
              textStyle: {
                fontSize: 12
              }
            },
            axisTick: {
              show: false
            }
          }

        ],
        series: [
          ...seriesArray,
          {
            name: '',
            type: 'bar',
            itemStyle: {
              normal: {
                show: true,
                color: 'rgba(89,130,194,0.12)',
              },
            },
            silent: true,
            barWidth: '50%',
            barGap: 0,
            data: barArray,
            animation: false,
          },
        ],
      };
      this.myChart.setOption(option, true);
      window.addEventListener("resize", () => this.myChart.resize());
    },
  }
}
</script>

<style scoped lang="scss">
.self-trend {
  padding: 16px 16px;
}
</style>