Echarts 饼状图更改起始角度，饼图显示百分比，修改legend文字样式和图标

这是原始效果
要实现如下效果

更改饼图颜色

直接在option内设置 color

let option ={
// 设置颜色
 color: ['#4D96BE', '#3EFFE8', '#42CAEB'],
  title: {
          show: false
        },
        ......

修改legend文字样式和图标

设置legend图标为圆点
legend. icon= “circle”

   legend: {
        orient: 'vertical',
        left: 10,
        data: ['直接访问', '邮件营销', '联盟广告'],
          icon: "circle",
          ......

设置legend文字样式使用
legend. formatter（用来格式化图例文本，支持字符串模板和回调函数两种形式。） 和
legend.textStyle. rich (在 rich 里面，可以自定义富文本样式。利用富文本样式，可以在标签中做出非常丰富的效果。)

// 设置legend文字样式
 formatter: function (name) {
            let target;
            for (let i = 0; i < data.length; i++) {
              if (data[i].name === name) {
                target = data[i].value;
              }
            }
            let arr = ["{a|" + name + "}", "{b|" + target + '条'+ "}"];
            return arr.join("\n");
          },
           textStyle: {
             rich: {
               a: {
                 fontSize: 16,
                 color: "#333",
                 padding: 10
               },
               b: {
                 fontSize: 14,
                 color: "#EA5504"
               }
             }
           }

更改起始角度

看原图我们可以发现，饼图是从顶部顺时针开始渲染的，以饼图的圆心为原点画坐标轴的话就是以90度的地方为起始角度

所以想要从底部开始渲染的画，只需要在 series里设置 startAngle: 270

饼图显示百分比

在series里设置label

      label: {           //饼图图形上的文本标签
              normal: {
                show: true,
                position: 'inner', //标签的位置
                textStyle: {
                  fontWeight: 300,
                  fontSize: 16      //文字的字体大小
                },
                formatter: '{d}%'
              }
            }

完整代码

let data = [
                {value: 335, name: '直接访问'},
                {value: 310, name: '邮件营销'},
                {value: 234, name: '联盟广告'},
            ]

option = {
     color: ['#4D96BE', '#3EFFE8', '#42CAEB'],
    tooltip: {
        trigger: 'item',
        formatter: '{a} <br/>{b}: {c} ({d}%)'
    },
    legend: {
        orient: 'vertical',
        left: 10,
        data: ['直接访问', '邮件营销', '联盟广告'],
          icon: "circle",
          formatter: function (name) {
            let target;
            for (let i = 0; i < data.length; i++) {
              if (data[i].name === name) {
                target = data[i].value;
              }
            }
            let arr = ["{a|" + name + "}", "{b|" + target + '条'+ "}"];
            return arr.join("\n");
            // return name + '  ' + target + '条'
          },
           textStyle: {
             rich: {
               a: {
                 fontSize: 16,
                 color: "#333",
                 padding: 10
               },
               b: {
                 fontSize: 14,
                 color: "#EA5504"
               }
             }
           }
    },
    series: [
        {
            name: '访问来源',
            type: 'pie',
            startAngle: 270, //起始角度
            // radius: ['50%', '70%'],
            avoidLabelOverlap: false,
              label: {           //饼图图形上的文本标签
              normal: {
                show: true,
                position: 'inner', //标签的位置
                textStyle: {
                  fontWeight: 300,
                  fontSize: 16      //文字的字体大小
                },
                formatter: '{d}%'
              }
            },
            emphasis: {
                label: {
                    show: true,
                    fontSize: '30',
                    fontWeight: 'bold'
                }
            },
            labelLine: {
                show: false
            },
            data: data
        }
    ]
};