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

<template>
  <div class="event-statistics">
    <div id="eventStatisticsChart" style="height: 293px;"></div>
  </div>
</template>

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

export default {
  name: "EventStatistics",
  data() {
    return {

    }
  },
  mounted() {
    this.initCharts()
  },
  methods: {
    initCharts() {
      let div = document.getElementById('eventStatisticsChart');
      this.myChart = echarts.init(div);

      let xData = ['XX社区第一网格','XX社区第二网格','XX社区第三网格','XX社区第四网格',];
      let tq1 = [12, 20, 30, 60];
      let tq2 = [10, 50, 50, 27];
      let tq3 = [300, 90, 48, 39];
      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,
          },
        },
        tooltip: {
          trigger: 'axis',
          backgroundColor: 'rgba(13, 64, 71, 0.50)',
          borderColor: 'rgba(143, 225, 252, 0.60)',
          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: ['12345投诉', '省满意度调查', '社区满意度自查'],
          itemGap: 20,
          itemWidth: 6,
          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: {
              align: 'center',
              textStyle: {
                fontSize: 12,
                color: '#A3B9DA'
              }
            },
            boundaryGap: true,
            data: xData,
          },{
            type: 'category',
            data: xData,
            axisLine: {show:false},
            axisLabel: {
              show: false,
            },
            boundaryGap:true,

          }
        ],

        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: 'bar',
            barWidth: 14,
            itemStyle: {
              opacity: 1,
              color: new echarts.graphic.LinearGradient(
                  0,
                  1,
                  0,
                  0,
                  [
                    {
                      offset: 0,
                      color: 'rgba(152, 72, 255, 0)' // 0% 处的颜色
                    },
                    {
                      offset: 1,
                      color: '#A962FF' // 100% 处的颜色
                    }
                  ],
                  false
              )
            },
            data: tq1,
          },
          {
            name: '省满意度调查',
            type: 'bar',
            barWidth: 14,
            itemStyle: {
              // lenged文本
              opacity: 1, // 这个是 透明度
              color: new echarts.graphic.LinearGradient(
                  0,
                  1,
                  0,
                  0,
                  [
                    {
                      offset: 0,
                      color: 'rgba(255, 228, 102, 0)' // 0% 处的颜色
                    },
                    {
                      offset: 1,
                      color: 'rgba(255, 228, 102, 1)' // 100% 处的颜色
                    }
                  ],
                  false
              )
            },
            data: tq2, //data.values
          },
          {
            name: '社区满意度自查',
            type: 'bar',
            barWidth: 14,
            itemStyle: {
              // lenged文本
              opacity: 1, // 这个是 透明度
              color: new echarts.graphic.LinearGradient(
                  0,
                  1,
                  0,
                  0,
                  [
                    {
                      offset: 0,
                      color: 'rgba(0, 84, 255, 0)' // 0% 处的颜色
                    },
                    {
                      offset: 1,
                      color: 'rgba(38, 244, 248, 1)' // 100% 处的颜色
                    }
                  ],
                  false
              )
            },
            data: tq3, //data.values
          },
          {
            name: '',
            type: 'bar',

            barWidth:100,
            barGap: '-60%',
            data: barArray,
            itemStyle: {
              normal: {
                color: 'rgba(22,153,152, 0.1)'
              }
            },
            zlevel: -1,
            xAxisIndex: 1,
          }
        ],
      };
      this.myChart.setOption(option);
      window.addEventListener("resize", () => this.myChart.resize());
    },
  }
}
</script>

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