VUE+ECharts 制作饼图

项目的首页需要实现一个饼图（后端接口返回数据）

准备工作：首先在项目里面安装echarts

cnpm install echarts --s

然后我是在main.js里引入了

import echarts from 'echarts' // 引入echarts

Vue.prototype.$echarts = echarts

下面是具体页面实现

HTML页面部分

 
        

          

            客户报表
            Customer report
          
          
          

            

            

              
            
          
        

项目部分需求：

其中按照需求样式显示（index == 0 用 num1样式，第一列（这里指UI图中的客户总数），下标等于最后一个数的时候用num3，其余用num2），

{{ item.productName }}为右边名称，{{ item.customerNum }}为数字。

以下是后端接口给的数据格式，所以在getAPui()方法中转成了字符串

{
    "code": 200,
    "message": "获取成功",
    "dataInfo": [
        {
            "customerNum": 1,
            "productName": "客户总数",
            "ratio": 0
        },
        {
            "customerNum": 1,
            "productName": "某某系统",
            "ratio": 100
        }
    ]
}

js部分 

 css部分（这个部分样式）