vue2.0 使用echarts饼状图插件

效果图
注意点

1. 如果要在同一个组件中重复使用且数据不同。用ref来进行获取dom，不然可能会出现后面数据覆盖前面的问题。
2. 如果需要文字显示在视觉引导线的上面，直接在后面加/n就可以了，代码中也有注释说明。其他的基本上直接用官方demo都可实现 https://www.echartsjs.com

2.封装组件代码如下 myEcharts.vue

<template>
<div>   
<!-- echart表格 使用ref获取dom元素 避免在一个组件中重复使用覆盖的问题-->    
<div ref="myChart" id="chart"></div>  
</div>
</template>

<script>
import echarts from "echarts";
export default {  
    props: { 
    // 标题文本   
     titleText: {     
      type: String,      
      default: ""    
     },   
   // 扇形区域名称    
    opinion: {      
     type: Array,      
    default() {        
    return [];      
    }    
 },    
  // 扇形区域数据    
   opinionData: {      
   type: Array,      
   default() {        
   return [];      
   }    
  } 
},
data() {
   return {};  
}, 
mounted() {    
   this.$nextTick(function() {      
   this.Pie();    
 });  
},
methods: {    
// 监听扇形图点击    
eConsole(param) {      
console.log(param);      
// 向父组件传值 看需求      
// this.$emit("currentEchartData", param.name);    
},    
// 饼状图    
Pie() {      
this.charts = echarts.init(this.$refs.myChart);      
this.charts.setOption({        
title: {          
x: "center",          
// 标题文本          
text: this.titleText,          
bottom: 60,          
textStyle: {            
fontWeight: "normal",            
fontSize: 12          
}        
},        
tooltip: {          
trigger: "item",          
formatter: "{d}%"        
},        
legend: {          
padding:[0,23,0,23],          
itemGap: 8,          
bottom: 10, //数值越小距离越大          
icon: "circle",         
 itemWidth: 10,          
 itemHeight: 10,          
 // 扇形区域名称          
 data: this.opinion        
 },        
 series: [          
 {            
 type: "pie",            
 color: ["#f09542", "#42a3d8", "#6ec290", "#da6184"],            
 center: ["50%", "35%"],            
 radius: ["25%", "50%"],            
 // 默认防止标签重叠            
 avoidLabelOverlap: false,            
 startAngle: 80,            
 label: {              
 normal: {               
  // \n\n让文字再视觉引导线的上面                
  formatter: "{d}%\n\n",                
  padding: [0, -40],                
  position: "outer",                
  fontSize: "1rem"              
  }            
  },           
  labelLine: {              
  normal: {                
  show: true,                
  length: 10,                
  length2: 30              
  }           
 },            
 // 扇形区域数据            
 data: this.opinionData          
 }        
 ]      
 });    
 }  
 }};
</script> 
<style lang="less" scoped>
#chart {  
width: 3.5rem;  
height: 4rem;  
div{    width:100%;    
height:100%;  
}}
</style>

3.调用代码

<template>
<div class="chart">
<div>   
       <my-echarts            
       :titleText="titleText"            
       :opinion="opinion"            
       :opinionData="opinionData"          
       ></my-echarts>        
</div>    
<div>          
   <my-echarts            
   :titleText="titleText2"            
   :opinion="opinion2"            
   :opinionData="opinionData2"          
   ></my-echarts>        
</div>
</template>
<script>
import myEcharts from "../myComponents/myEcharts.vue";
export default {  
components: {   
 myEcharts  
},  
data() {    
return {   
   titleText: "年龄分布统计",      
   titleText2: "学历分布统计",      
   // 扇形区域名称 lengend      
   opinion: ["18-25岁", "26-40岁", "41-50岁"],      
   opinion2: ["硕士", "本科", "专科", "其他"],      
   // series      
   opinionData: [      
     { value: 600, name: "18-25岁" },        
     { value: 300, name: "26-40岁" },        
     { value: 200, name: "41-50岁" }      
     ],      
   opinionData2: [      
     { value: 70, name: "硕士" },        
     { value: 300, name: "本科" },        
     { value: 470, name: "专科" },        
     { value: 140, name: "其他" }     
    ]    };  
    },  
    methods: {},  
    mounted() {}};
 </script>
 <style>
 #chart{
 display:flex;
 }
 </style>