ECharts绘制饼图

ECharts绘制各种图表非常方便，首先去官网找到想要绘制的图表做参考 ，以下链接时官网示例

Examples - Apache EChartsECharts, a powerful, interactive charting and visualization library for browserhttps://echarts.apache.org/examples/zh/index.html#chart-type-pie需要定制的部分可查阅配置手册Documentation - Apache EChartshttps://echarts.apache.org/zh/option.html#title

下面是我实现的饼图完整代码：

<template>
  <div class="left-chart-1">
<!--    <div class="rc1-header">******分析</div>-->
    <div class="rc1-chart-container">
      <div class="map" ref="chart" style="width:2.604167rem /* 500/192 */;height: 100%;"></div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'LeftChart1',
  data () {
    return {
      config: {
        data: [],
      },
    }
  },
  methods: {
    initChart () {
      const el = this.$refs.chart
      const echarts = require('echarts')
      const myChart = echarts.init(el)

      const option = {
        tooltip: {
          trigger: 'item',
          formatter:"{b}：{c}元"
        },
        legend: {
          orient:'vertical',
          bottom: '40%',
          left: 'right',
          textStyle:{color:'#fff'}
        },
        color:[
          '#7cffb2',
          '#ff6e76'
        ],
        axisPointer: {
          label:{
            show:true
          }
        },
        series: [
          {
            name: '',
            type: 'pie',
            radius: ['40%', '70%'],
            avoidLabelOverlap: false,
            label: {
              normal: {
                show: true,
                position: 'outter', //标签的位置
                textStyle: {
                  fontWeight: 'bold',
                  fontSize: 16    //文字的字体大小
                },
                formatter: '{d}%'
              }
            },
            emphasis: {
              label: {
                show: true,
                fontSize: '16',
                fontWeight: 'bold'
              }

            },
            labelLine: {
              show: false
            },
            data: [
              { value: 54035304.65, name: '已发放金额',unit:'元' },
              { value: 9528272.66, name: '待发放金额',unit:'元' }
            ]
          }
        ]
      }

      myChart.setOption(option)
      window.addEventListener('resize', function () {
        myChart.resize()
      })
    }
  },
  mounted () {
    this.initChart()
  }
}
</script>

<style lang="less">
.left-chart-1 {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: row;
  // padding-left: .520833rem /* 100/192 */;

  .rc1-header {
    font-size: .125rem /* 24/192 */;
    font-weight: bold;
    height: .15625rem /* 30/192 */;
    line-height: .15625rem /* 30/192 */;
  }

  .rc1-chart-container {
    flex: 1;
    display: flex;
    height: 100%;
  }

  .left {
    width: 30%;
    font-size: .083333rem /* 16/192 */;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    .number {
      font-size: .177083rem /* 34/192 */;
      color: #096dd9;
      font-weight: bold;
      margin-bottom: .15625rem /* 30/192 */;
    }
  }

  .right {
    flex: 1;
    padding-bottom: .104167rem /* 20/192 */;
    padding-right: .104167rem /* 20/192 */;
    box-sizing: border-box;
  }
}
</style>