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

<!-- **************************************NO.8 养殖场分布*************************************** -->
<template>
	<div class="chart-container">
		<div id="fireGrade" style="width: 100%; height:23vh;">
		</div>
	</div>
</template>

<script>
  import { getEventCountGroupByFireRisk } from '@/api/bigdata'
	import * as echarts from 'echarts';
	export default {
		name: 'fireGrade',
		data() {
			return {
				count: 0
			}
		},
    mounted() {
      this.getEventCountGroupByFireRisk();
    },

    methods: {
      getEventCountGroupByFireRisk(){
        getEventCountGroupByFireRisk().then(resp => {
          this.myEcharts(resp.data);
        })
      },
			myEcharts(data) {
        var chartDom = document.getElementById('fireGrade');
        var myChart = echarts.init(chartDom);
        var color = ['#02CDFF', '#62FBE7', '#7930FF','#ef5f9d','#ecb935'];
        var option;
        option = {
          color:color,
          tooltip : {
            trigger: 'item',
            formatter: "{b}: {c}"
          },
          toolbox: {
            show : true,
          },
          series : [
            {
              type:'pie',
              roseType: true,
              radius : ['50%', '70%'],
              label: {
                show: true,
                formatter: "{b} {c}",
                textStyle: {
                  fontSize: 10 ,
                }
              },
              data:data
            }
          ]
        };
        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>