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

<!-- **************************************NO.10 收集点*************************************** -->
<template>
  <div class="chart-container">
    <div id="collection" style="width: 100%; height:23vh;">
    </div>
  </div>
</template>

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

  export default {
    name: 'collection',
    data() {
      return {
        count: 0,
        data :[]
      }
    },
    mounted() {
      this.wgfb()

    },

    methods: {
      wgfb() {
        let that = this
        getWgfb().then(resp => {
          // alert("网格分布")
          that.data = Array.isArray(resp.data) && resp.data.length > 20 ? resp.data.splice(0,20) : resp.data
          this.myEcharts()
        })
      },


      // 出处 http://192.144.199.210:8080/editor/index.html?chart_id=UDNqxg4NZdRORp80
      myEcharts() {
        var chartDom = document.getElementById('collection');
        var myChart = echarts.init(chartDom);
        var color = ['#0E7CE2', '#FF8352', '#E271DE', '#F8456B', '#00FFFF', '#4AEAB0'];
        var option;
        let bgColor = '#fff';
        let title = '总量';
        let echartData = this.data;

        let formatNumber = function (num) {
          let reg = /(?=(\B)(\d{3})+$)/g;
          return num.toString().replace(reg, ',');
        };
        let total = echartData.reduce((a, b) => {
          return a + b.value * 1;
        }, 0);

        option = {
          color: color,
          series: [
            {
              type: 'pie',
              radius: ['55%', '70%'],
              center: ['50%', '50%'],
              data: echartData,
              hoverAnimation: false,
              itemStyle: {
                normal: {
                  borderWidth: 1,
                },

                emphasis: {
                  borderColor: bgColor,
                  borderWidth: 2,
                  shadowBlur: 8,
                  borderColor: "#00ffff",
                  shadowColor: "#00ffff",
                },
              },
              labelLine: {
                normal: {
                  length: 20,
                  length2: 10,
                  lineStyle: {
                    color: '#356781',
                  },
                },
              },
              label: {
                normal: {
                  formatter: (params) => {
                    return '{icon|●}{name|' + params.name + '}{value|' + formatNumber(params.value) + '}';
                  },
                  rich: {
                    icon: {
                      fontSize: 10,
                    },
                    name: {
                      fontSize: 10,
                      padding: [0, 3, 0, 4],
                      color: '#23c9ea',
                    },
                    value: {
                      fontSize: 10,
                      color: '#ffffff',
                    },
                  },
                },
              },
            },
          ],
        };
        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>