echarts饼图

 

 

let datas = [
  {
    name: '提高卫生标注',
    value: 100
  },
  {
    name: '加强安全教育',
    value: 40
  },
  {
    name: '规范仪容仪表',
    value: 50
  },
  {
    name: '提升言谈举止',
    value: 30
  },
  {
    name: '增强服务意识',
    value: 30
  }
];
const mockData = [
  {
    name: '直接访问',
    value: 335
  },
  {
    name: '邮件营销',
    value: 310
  },
  {
    name: '联盟广告',
    value: 234
  },
  {
    name: '视频广告',
    value: 135
  },
  {
    name: '搜索引擎',
    value: 1548
  }
];
const legend = [];
let total = 0;
for (let i in mockData) {
  total += mockData[i].value;
  legend.push(mockData[i].name);
}
const formatName = (name, value) =>
  `${name}\n${value}\n${((value * 100) / total).toFixed(2) + '%'}`;
var option = {
 
 
  // color: ["#F56463", "#00C6FF", "#F09615", "#0079E6"],
  legend: {
    
    orient: 'vertical',
    top: 'center',
    show:true,
    right: '5%',
    textStyle: {
      align: 'left',
      color: '#',
      verticalAlign: 'middle',
      rich: {
        name: {
          width: 150,
          fontSize: 16
        },
        value: {
          width: 20,
          align: 'right',
          fontFamily: 'Medium',
          fontSize: 16
        },
        rate: { width: 10, align: 'right', fontSize: 16 }
      }
    },
    labelLine: {
      show: false
    },
    data: mockData.map((item, index) => {
      return {
        value: item.value,
        name: formatName(item.name, item.value)
      };
    }),
     
    //     formatter:function(name){
    // 	var oa = option.series[0].data;
    // 	var num = oa[0].value + oa[1].value + oa[2].value + oa[3].value;
    // 	for(var i = 0; i < option.series[0].data.length; i++){
    //             if(name==oa[i].name){
    //             	return name + '     ' + oa[i].value + '个   ' + (oa[i].value/num * 100).toFixed(2) + '%';
    //             }
    // 	}
    // }
  },
  // tooltip: {
  //   trigger: "item",
  //   // formatter: "{d}%",
  // },
  tooltip: {
    trigger: 'item',
    formatter: function (parms) {
      var str =
        // parms.name + "</br>" +
        parms.marker +
        '' +
        parms.data.name +
        '</br>' +
        '数量：' +
        parms.data.value +
        '个' +
        '</br>' +
        '占比：' +
        parms.percent +
        '%';
      return str;
    }
  },
  series: [
    {
      name: '',
      type: 'pie',
      radius: ['50%', '70%'],
      center: ['35%', '50%'],
      // roseType: "radius",
      avoidLabelOverlap: false,
      label: {
        show: false,
        position: 'center'
      },
  
      emphasis: {
        label: {
          show: true,
          fontSize: '30',
          fontWeight: 'bold'
        }
      },
      data: mockData.map((item, index) => {
        return {
          value: item.value,
          name: formatName(item.name, item.value)
        };
      })
    }
  ]
};