Echars 绘制饼图函数封装实现

效果如下：

代码如下:

  <!-- 图表 -->
  <div v-show="echartsBoxShow"  id="echarts_box"  class="echarts_box"></div>

<script> 
import echarts from 'echarts'
export default {
 name: 'statisticsItem', 
data() {
    return {
      loading: true, // 加载状态 
      searchDate:[],
      tableData: [], // 内容数据 
      totall: 0, // 数据条数
      currentPage: 1, // 当前所在页
      pagesize: 10, // 每页显示数
    }
},
created(){
    this.getData()
  },
 methods: {
    /**
     * 绘制图表
     * titleText 名称 
     * namelist  标注名称
     * selllist  销售量
     * valueName 销售内容信息
     */ 
    getEcharts(titleText, namelist, selllist,valueName) {
         var option = {
            title: {
                text: titleText,
            },
            tooltip: {
                trigger: 'item',
                formatter: '{a} <br/>商品名称: {b} <br/>销量: {c} <br/>占比: ({d}%)'  
            },
            legend: {
                type: 'scroll',
                orient: 'vertical',
                right: 10,
                top: 20,
                bottom: 20,
                data: namelist, 
                selected: selllist
            },
            series: [
                {
                    name: '商品信息',
                    type: 'pie',
                    radius: '55%',
                    center: ['40%', '50%'],
                    data: valueName,
                    emphasis: {
                        itemStyle: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                }
            ]
         }
        var echartsBox = document.getElementById('echarts_box')
        echartsBox.style = {
          display: "block",
          minWidth:  "100%"
        } 
        var myChart = echarts.init(echartsBox);
        window.onresize = myChart.resize();
        myChart.setOption(option, true);
    },
    getData(param) {
      let params = { // 请求参数
       ...param,
        'page': this.currentPage,
        'limit': this.pagesize
      }
      this.loading = true
      this.tableData = [
        {
          'name': '安慰',
          'id': 1,
          'order_total': 15,
          'order_numb':18, 
          'order_price': '343.33',
          'return_total': 10,
          'return_numb':12,
          'return_price': 156.35,
          'total_money': 152.36 
        },
        {
          'name': '伏牛山',
          'id': 2,
          'order_total': 15,
          'order_numb':18, 
          'order_price': '343.33',
          'return_total': 10,
          'return_numb':12,
          'return_price': 156.35,
          'total_money': 152.36 
        },
        {
          'name': '反对法',
          'id': 3,
          'order_total': 15,
          'order_numb':18, 
          'order_price': '343.33',
          'return_total': 10,
          'return_numb':12,
          'return_price': 156.35,
          'total_money': 152.36 
        },
        {
          'name': '伏牛山',
          'id': 4,
          'order_total': 15,
          'order_numb':18, 
          'order_price': '343.33',
          'return_total': 10,
          'return_numb':12,
          'return_price': 156.35,
          'total_money': 152.36 
        },
        {
          'name': '对反对法',
          'id': 5,
          'order_total': 15,
          'order_numb':18, 
          'order_price': '343.33',
          'return_total': 10,
          'return_numb':12,
          'return_price': 156.35,
          'total_money': 152.36 
        }
      ]
      this.totall = 11
      this.loading = false
      //图表参数
      let valueName = []
      let namelist = []
      let selllist = [] 
      if(this.tableData&&this.tableData.length>0){
        this.echartsBoxShow=true
        for(let i in  this.tableData){
          if(this.tableData[i]){
              valueName.push({
                name: this.tableData[i].name,
                value: this.tableData[i].order_numb
              });
              namelist.push(this.tableData[i].name);
              selllist.push(this.tableData[i].order_numb);
          }
        }
        this.getEcharts('客户统计',namelist,selllist,valueName)// titleText, namelist,                 selllist,valueName
      }else{
        this.echartsBoxShow=false 
      }
    }, 
  }
}
</script>