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

      }],
    }
  },
  mounted() {
    this.initCharts()
  },
  methods: {
    trendTypeChange(data) {

    },
    initCharts() {
      let div = document.getElementById('selfTrendChart');
      this.myChart = echarts.init(div);

      let xData = ['2022-10', '2022-11', '2022-12', '2023-01', '2023-02', '2023-03', '2023-04', '2023-05', '2023-06', '2023-07', '2023-08', '2023-09'];
      let tq1 = [12, 20, 30, 60, 49, 18, 90, 48, 39, 30, 27, 40, 48, 39, 27, 49];
      let tq2 = [10, 50, 50, 27, 49, 58, 80, 80, 19, 60, 30, 30, 49, 18, 90, 20];
      let tq3 = [300, 90, 48, 39, 30, 27, 49, 18, 90, 39, 27, 49, 30, 100, 49, 100];
      const max = Math.max(...tq1, ...tq2, ...tq3)

      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,
          },
        },

        legend: {
          // icon: 'circle',
          data: ['12345投诉事件数', '省调查不满意数', '社区自查不满意数'],
          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: '单位：人',
            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: [
          {
            name: '12345投诉事件数',
            type: 'line',
            showAllSymbol: true,
            symbol: 'circle',
            symbolSize: 6,
            lineStyle: {
              normal: {
                color: '#F95619',
              },
            },
            label: {
              show: false,
              position: 'top',
              textStyle: {
                color: '#F95619',
              },
            },
            itemStyle: {
              color: '#F95619',
              borderColor: '#F95619',
              borderWidth: 2,
            },
            data: tq1,
          },
          {
            name: '省调查不满意数',
            type: 'line',
            showAllSymbol: true,
            symbol: 'circle',
            symbolSize: 6,
            lineStyle: {
              normal: {
                color: '#F9E066',
              },
            },
            label: {
              show: false,
              position: 'top',
              textStyle: {
                color: '#F9E066',
              },
            },
            itemStyle: {
              color: '#F9E066',
              borderColor: '#F9E066',
              borderWidth: 2,
            },
            data: tq2, //data.values
          },
          {
            name: '社区自查不满意数',
            type: 'line',
            yIndex: 0,
            showAllSymbol: true,
            symbol: 'circle',
            symbolSize: 6,
            lineStyle: {
              normal: {
                color: '#25F0F6',
              },
            },
            label: {
              show: false,
              position: 'top',
              textStyle: {
                color: '#25F0F6',
              },
            },
            itemStyle: {
              color: '#25F0F6',
              borderColor: '#25F0F6',
              borderWidth: 2,
            },
            data: tq3, //data.values
          },
          {
            // 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);
      window.addEventListener("resize", () => this.myChart.resize());
    },
  }
}
</script>

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