若依 elements-ui 绘制带线饼图，并给出值和单位

1.废话不多说，先看效果图

2.直接上代码，组件开发，在componets/people目录下新建 peopleItem.vue 文件。（没有文件夹则新建）

<template>
  <div style="width: 100%;height: 100%" ref="chart1"></div>
</template>
<script >
import * as echarts from "echarts";

export default {
  props: {
    manValue: {
      type:Number,
      default:90
    },
    womanValue: {
      type:Number,
      default:80
    },
    color: {
      type:String,
      default:'#8a8a8a'
    },
    unit: {
      type:String,
      default:'人'
    },
    items: {
      type: Array,
      default: function() {
        return [];
      }
    }
  },
  mounted() {
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(this.$refs.chart1,'dark');

    // 指定图表的配置项和数据
    var option;

   option = {
   backgroundColor:'',
   tooltip: {
    trigger: 'item'
  },
    legend: {
       show:false,
        top: '0%',
        left: 'center'
      },
  series: [
    {

      type: 'pie',
       radius: ['40%', '60%'],
      avoidLabelOverlap: true,
      itemStyle: {
        borderRadius: 3,
        borderColor: this.color,
        borderWidth: 0
      },
      label: {
            normal: {
              show: true,//开启提示线文字
              position: 'outer',//设置文字的所在的位置
              formatter: '{b}：{c}' + this.unit,//设置展示的内容
              borderWidth: 20,//大小设置
              borderRadius: 4,
              color: '#000000',//文字颜色
              rich: {
                //设置字体，c代表数据内容，b代表数据名称（这两个都可以在option中的data里面看到）
                c: {
                  fontSize: 16,
                  lineHeight: 12,
                }
              },
            }

      },
      data: this.items,
      emphasis: {
        itemStyle: {
          shadowBlur: 10,
          shadowOffsetX: 0,
          shadowColor: 'rgba(0, 0, 0, 0.5)'
        }
      }
    }
  ]
};

    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
  }
};
</script>
<style scoped lang="scss">

</style>

formatter: ‘{b}：{c}’ + this.unit   设置展示的内容  “{b} 为键，也就是上图中村名称”  “{c}” 为值上图中村名称后面的数字。  this.unit为单位

2.页面中导入组件

import peopleItem from "@/components/people/peopleItem.vue"; //引入组件

3.页面中声明组件

components: {
        peopleItem
},

4.使用组件

<peopleItem  :color="'#b7b7b7'" unit="人"  :key="falushKey" :items="indexData.cultivateds"></peopleItem>

unit：图表中单位，如上图中的热

:key 实时刷新

:item 图标中的数据

5.数据格式

[
    {
        "name": "其他",
        "value": 22
    },
    {
        "name": "小麦",
        "value": 11
    },
]