饼状图

<!--饼状图-->
<template>
  <div class="chartBox">
    <!--echart图标-->
    <div id="pieChart" ref="pieChart"></div>
  </div>

</template>

<script>
// 引入基本模板
// const echarts = require('echarts');
import * as echarts from 'echarts' // 注意此处echarts高版本中需要使用此方式才可引入
export default {
  props:{

  },
  data() {
    return {
      pieChart: null,
    }
  },
  mounted() {
    this.initEchart();

  },
  methods: {
    initEchart() {
      // 基于准备好的dom，初始化echarts实例
      this.pieChart = echarts.init(this.$refs.pieChart);

      let option = {

        tooltip: {
          trigger: 'axis',

        },
        legend: {
          orient: 'vertical',
          left: 'left',
          icon:'circle',
          textStyle:{
            color:'#fff',
          }
        },
        color:['#61a5e8', '#7ecf51', '#eecb5f','#e3935d'],

        series: [
          {
            name: 'Access From',
            type: 'pie',
            radius: '70%',
            data: [
              { value: 1048, name: 'PC端占比' },
              { value: 735, name: 'web端占比' },
              { value: 580, name: '小程序占比' },
            ],
            labelLine:{
              show:false//指示线
            },
            label:{
              show:false//指示文字
            },
            emphasis: {
              // itemStyle: {
              //   shadowBlur: 10,
              //   shadowOffsetX: 0,
              //   shadowColor: 'rgba(0, 0, 0, 0.5)'
              // },
              label:{
                show:true,
                formatter:['{b}','({c})'].join('\n'),
                fontWeight:'bold',
                color:'#fff'
              }
            },

          }
        ]
      };

      // 使用刚指定的配置项和数据显示图表。
      this.pieChart.setOption(option);
    }
  }
}
</script>

<style scoped lang="scss">
.chartBox {
  width: 100%;
  box-sizing: border-box;
  padding: 1.6rem 1.6rem 0;
  flex: 1;

  #pieChart {

    height: calc(100% - 16px);

  }
}
</style>