Project_yhfu/src/views/bigdata/chart-pit-yx.vue

<!-- **************************************NO.6 矿坑*************************************** -->
<template>
  <div class="chart-container">
    <div id="pit-yx" style="width: 100%; height:23vh;">
    </div>
  </div>
</template>

<script>
import * as echarts from 'echarts';
export default {
  name: 'pit',
  data() {
    return {
      count: 0,

      title:'',
      visible:false,

    }
  },
  mounted() {
    // this.myEcharts()
  },

  methods: {
    // 出处 http://192.144.199.210:8080/editor/index.html?chart_id=udduEFcFiEYEEj4Q
    myEcharts(data) {
      var chartDom = document.getElementById('pit-yx');
      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>