例图做成这样的

首先我们看官网
找到示例里面的的饼图 环形图
你把代码拿过去，注意的是你的div一定要给高度，不然可能就会出现你的图不出现。
我是在大佬的帮助下封装了两个组件，然后一个一个写的死数据，因为后台还没有接口，先写死，后期再改。
index.vue 里的代码
后边都是一样的，把样式写好就行了。

一定要注册和引入组件，还要传参呢
data里的数据
然后就是组件里面的数据了
，写了一个，那一个也是一样的，看你怎么要求稍微变一变。

<template
  <div class="mainEcarts">
    <!-- 组件1左侧第一个 -->
    <div ref="chart1" class="facilitySort" />
  </div>
</template>

<script>
export default {
  props: ['seriesArrOne'],
  data() {
    return {
      retrunJsonArr: []
    }
  },
  mounted() {
    this.initChart()
  },
  methods: {
    initChart() {
      const _this = this
      const option = {
        tooltip: { // 配置提示信息：
          trigger: 'item',
          // formatter: '{a} <br/>{b}: {c} ({d}%)',
          // showContent: true,
          // show: false
          show: true
        },
        grid: {
          top: '1%'
        },
        series: [ // 系列列表 每个系列通过 type 决定自己的图表类型
          {
            name: '保育',
            type: 'pie', // 类型为饼状图
            clickable: false,
            radius: ['50%', '70%'], //  饼图的半径
            avoidLabelOverlap: false,
            label: {
              show: true, // show: false,
              position: 'center',
              formatter: function(params) { // 返回中心的数字显示
                // console.log(params, 'paramsparamsparams', _this.seriesArrOne)
                // return params.value
                // forEach循环遍历数组
                var echartsArr = _this.seriesArrOne
                // console.log(echartsArr)
                var val = []
                let val1 = ''
                echartsArr.forEach(item => {
                  // console.log(item.value)
                  val.push(item.value)
                  // console.log(val)
                  val1 = val[0]
                })
                return `${val1} %`
                // return `${_this.seriesArrOne[0].value}%`
              },
              // formatter:function(name){  //该函数用于设置图例显示后的百分比
              //   var data = list
              //   var total = 0;
              //   var value;
              //   list.forEach((item)=>{
              //       total += item.value;
              //       if (item.name == name) {
              //           value = item.value;
              //       }
              //   })
              //   var p = Math.round(((value / total) * 100)); //求出百分比
              //   return `${name}  ${p}%`;  //返回出图例所显示的内容是名称+百分比
              // },
              textStyle: {
                fontSize: 12
              }
            },
            emphasis: {
              label: {
                show: true,
                fontSize: '14',
                fontWeight: 'bold'
              }
            },
            labelLine: {
              show: false
            },
            data: this.seriesArrOne,
            color: ['#03C785', '#D2D2D2']
          }
        ]
      }
      this.$nextTick(() => {
        setTimeout(() => {
          this.myChart1 = this.$echarts.init(this.$refs.chart1)
          this.myChart1.setOption(option, true)
          // console.log(option, '/option')
          // const arrOne = []
          // option.series.forEach(item => {
          //   console.log(item, '/item 每一项')
          //   item.data.forEach(el => {
          //     console.log(el, '/el')
          //     arrOne.push(el.value)
          //     this.retrunJsonArr = arrOne
          //     console.log(this.retrunJsonArr)
          //   })
          // })
        }, 100)
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.mainEcarts {
  width: 100%;
  height: 100%;
  .facilitySort {
    width: 100%;
    height: 100%;
  }
}
</style>