Project_yhfu/src/views/bigdata/chart-gridStaff.vue

<!-- **************************************NO.13 消火栓*************************************** -->
<template>
  <div class="chart-container">
    <div id="hydrant" style="width: 100%; height:55vh;">
    </div>
  </div>
</template>

<script>
  import * as echarts from 'echarts';
  import {getWgry} from '@/api/bigdata.js'

  export default {
    name: 'hydrant',
    data() {
      return {
        count: 0,
        getWgry: []
      }
    },
    mounted() {
      this.zzz()
    },

    methods: {
      zzz() {
        setTimeout(() => {
          let that = this
          getWgry().then(resp => {
            that.getWgry = Array.isArray(resp.data) && resp.data.length > 20 ? resp.data.splice(0,20) : resp.data
            // alert("网格人员")
            that.myEcharts()
          })
        }, 1000)
      },
      // 出处 http://192.144.199.210:8080/editor/index.html?chart_id=Ve9zCnhVwZvXTdD0
      myEcharts() {
        let that = this
        var chartDom = document.getElementById('hydrant');
        var myChart = echarts.init(chartDom);

        function rand(m, n) {
          if (!n) {
            return Math.floor(Math.random() * m);
          } else {
            var c = n - m + 1;
            return Math.floor(Math.random() * c + m);
          }
        }

        function getMax(arr, key) {
          var max = 0,
            len = arr.length;
          for (var i = 0; i < len; i++) {
            var item = arr[i][key];
            if (max < item) max = item;
          }
          return max;
        }

        function getValArr(arr, key) {
          var val = [],
            len = arr.length;
          for (var i = 0; i < len; i++) {
            val.push(arr[i][key]);
          }
          return val;
        }

        var arr = that.getWgry
        // for (var i = 0; i < 10; i++) {
        //   arr.push({
        //     name: '类目名称' + rand(99),
        //     amount: rand(99999) / 100 // 采购金额
        //   });
        // }

        var max = getMax(arr, 'value'),
          angleAxisData = getValArr(arr, 'name');
        $.each(arr, function (i, e) {
          e.value = (e.value / max * 100).toFixed(2);
        });
        var option = {
          backgroundColor: '#222',
          tooltip: {
            trigger: 'item',
            textStyle: {
              fontSize: 16,
              color: '#fff',
              fontFamily: 'Microsoft YaHei'
            }
          },
          angleAxis: {
            type: 'category',
            axisLine: {
              lineStyle: {
                color: '#6d8a92'
              }
            },
            axisLabel: {
              interval: 0,
              fontSize: 14,
              color: '#fff',
              fontFamily: 'Microsoft YaHei'
            },
            axisTick: {
              show: false
            },
            data: angleAxisData,
            z: 10
          },
          radiusAxis: {
            max: 100,
            min: 0,
            axisTick: {
              show: false
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: '#6d8a92'
              }
            },
            axisLabel: {
              formatter: '{value}%',
              textStyle: {
                fontSize: 11,
                color: '#61d9fb',
                fontFamily: 'Microsoft YaHei'
              }
            },
            splitLine: {
              show: true,
              lineStyle: {
                color: '#6d8a92'
              }
            },
            splitArea: {
              areaStyle: {
                color: 'transparent'
              }
            }
          },
          polar: {
            center: ['50%', '50%'],
            radius: '74%',
          },
          series: [{
            type: 'bar',
            data: arr,
            itemStyle: {
              color: function (params) {
                var colorList = ['#5cc6ca', '#d87a7f', '#f5b97f', '#5ab1ef', '#b6a2de', '#8d98b3', '#e5d02d', '#97b552', '#956f6d', '#d0579c'];
                return colorList[params.dataIndex];
              }
            },
            coordinateSystem: 'polar',
          }]
        };
        option && myChart.setOption(option);
      },

    },


  }
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
  .chart-container {
    width: 100%;
    height: auto;
    position: relative;
    padding-bottom: 10px;
    display: flex;
  }
</style>