echarts-4 基于Doughnut Chart饼图-环形图

上篇说到了基于柱状图的样式修改，现在我们来讲第二个图——Doughnut Chart。
首先看一下原型图：

Doughnut Chart原型图
要求：
1、将顶部的图例放置在下方，样式居中，且图例除显示文字也显示百分比。
2、环的每个区域有线引出且含有该区域的名称。
其他详情参考效果图。

英语单词

1.legend: (图片或地图的)文字说明，图例;
2.formatter: n. 格式化程序；[计] 格式器;
3.transparent: adj. 透明的，清澈的；（过程、活动或组织）透明的，公开的；
4.emphasis: n. 重要性，重点强调；重读，强调；

修改样式

1、legend style

这是我学习时看到的一篇博客，挺详细的。我这里就不再讲解了。
转载:实现echarts的legend属性设置详解以及没有显示问题

var option = {
      tooltip: {
        trigger: 'item'
      },
      legend: {
        left: 'center',          //这个应该看着就知道是调整图例的位置的吧
        bottom: '76',
        width: 400,
        height: 46,
        align: 'left',
        // 使用回调函数
        formatter: function (name) {
          var data = option.series[0].data;
          var total = 0;
          var tarValue;
          for (var i = 0, l = data.length; i < l; i++) {
            total += data[i].value;
            if (data[i].name == name) {
              tarValue = data[i].value;
            }
          }
          var p = Math.round(tarValue / total * 10000) / 100; //保留百分比后两位数字。
          return name + " " + " " + p + "%";
        },
      },
};

2、数据区域样式

series: [{
        name: 'Access From',
        type: 'pie',
        radius: ['30%', '50%'],          //饼图的半径,第一项是内半径,第二项是外半径,
                                        //内半径为0就是真的饼,不是环形
        center: ['50%', '35%'],         //设置饼的原心坐标不设置就会默认在中心的位置

        avoidLabelOverLap: true,     //是否启用防止标签重叠策略，默认开启，
                                     //在标签拥挤重叠的情况下会挪动各个标签的位置，防止标签间的重叠
        minAngle: 1,                 //最小的扇区角度（0 ~ 360）
                                     //用于防止某个值过小导致扇区太小影响交互。
        label: { position: 'outside'},     //默认是在外面的
        label: {
      //label 标签的另一写法  
              normal: {
                // show: false,
                // offset:[20,-15],      这里会改变标签内容的位置 前者文字在横向上偏移 20，纵向上偏移 -15。
                position: 'outside'
              },
              show: false,
              position: 'center'
            },
                                     //饼图图形上的文本标签，可用于说明图形的一些数据信息,比如值，名称等
        data: [{ value: 79,name: '计算机网络' },
               {value: 86,name: '操作系统'},
               {value: 88,name: '计算机组成原理'},
               {value: 90,name: '算法'},
               { value: 72,name: '数据库'},
               {value: 86, name: '数据结构'},]
            }]

效果图

上面有一个formatter，大致讲一下这个是啥玩意，在legend中使用这个就是自定义图例中你所需的内容，将你所需的内容用return返回 return返回啥就能看到啥。我这里就是返回了名字和两个空格和百分比数。