epmet-work-pc-chengyang/src/views/dataBoard/overview/components/MapDialog/DifficultyCharts.vue

<template>
  <div class="charts">
    <div id="DifficultyCharts"></div>
  </div>
</template>

<script>

import * as echarts from "echarts";

export default {
  name: "DifficultyCharts",
  props: {
    data: {
      type: Array,
      default: () => []
    },
    currentLevelData: {
      type: Object,
      default: {},
    },
  },
  data() {
    return {}
  },
  mounted() {
    this.$http.post('/governance/icEventOld/statisticsByCategory?agencyId=' + this.currentLevelData.orgId+'&type=2',{
      agencyId:this.currentLevelData.orgId,
    type: 2
    }).then(({data: {data}}) => {
      this.initCharts(data ? data : [])
    })
  },
  methods: {
    initCharts(data) {
      let div = document.getElementById('DifficultyCharts');
      this.myChart = echarts.init(div);
      let chartData = data.map((item) => {
        return {
          categoryName: item.categoryName,
          total: item.total,
        };
      })
      let xData = chartData.map(item => item.categoryName);
      let yData = chartData.map(item => item.total)
      let color = [[
        {
          offset: 0,
          color: 'rgba(0, 84, 255, 0)' // 0% 处的颜色
        },
        {
          offset: 1,
          color: 'rgba(38, 244, 248, 1)' // 100% 处的颜色
        }
      ]]
      let num = yData
      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) {
            var res = '<div"><p>' + params[0].name + '：' + params[0].value + '</p></div>'
            return res;
          },
        },
      /*  dataZoom: [
          {
            "type": "slider",
            "start": 0,
            "end": parseInt((10 / xData.length) * 10) / 10 * 100,
            "height": 10,
            "bottom": 0,
            "showDetail": false,
            "showDataShadow": false,
            "borderColor": "transparent"
          }
        ],*/
        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',
              interval: 0,
              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: "",
            type: 'bar',
            barWidth: 20,
            itemStyle: {
              opacity: 1,
              color: new echarts.graphic.LinearGradient(
                  0,
                  1,
                  0,
                  0,
                  color[0],
                  false
              )
            },
            data: yData,
          },
          {
            name: '',
            type: 'bar',
            barWidth: 50,
            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());
      this.loading = false
    }
  }
}
</script>

<style lang="scss" scoped>

.charts {
  #DifficultyCharts {
    width: 100%;
    height: 350px;
  }
}
</style>