echarts之环形图_echarts环形图

echarts中环形图就是饼图，区别在于是否定义了图形内部镂空的半径而已，就像下图：

那么现在有了一个圆环，中间如果空着的话就太难看了，所以给了如下的样式：

就是要给圆环中心添加内容。如果是单纯的添加内容的话，有以下三种方式：

1、graphic，是原生图形元素组件。优点是支持多种图形元素，但是如果要实现上图不太合适。因为圆环中心的字体有两种样式，面对多种样式，我能想到的只有富文本。

2、label，支持富文本，实现上图完全没问题，但是人家貌似不是干这个的。。。

如果使用了珍贵的label，那后面改要求也要展示这个怎么办。而且如果使用label还有一个问题，就是鼠标移向中间文字的时候，就相当于鼠标移向了一部分圆环，很容易就让客户迷迷糊糊的，到底中间的数字是总体的还是那部分圆环的？

3、title，这是我最终采取的方式，支持富文本，而且如果非要展示标题也可以用html写。代码如下：

option = {
    title: {
        text: '{b|10000000}',
        subtext: '{a|年薪}',
        subtextStyle:{
          rich:{
              a:{
                  fontSize:"38",
              }
          }  
        },
        textStyle:{
            rich:{
                b:{
                    fontSize:"48"
                }
            }
        },
        left: 'center',
        top:"center"
    },
    tooltip: {
        trigger: 'item',
        formatter: '{a} <br/>{b} : {c} ({d}%)'
    },
    legend: {
        orient: 'vertical',
        left: 'left',
        data: ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎']
    },
    series: [
        {
            name: '访问来源',
            type: 'pie',
            radius: ['40%','55%'],
            center: ['50%', '50%'],
            data: [
                {value: 335, name: '直接访问'},
                {value: 310, name: '邮件营销'},
                {value: 234, name: '联盟广告'},
                {value: 135, name: '视频广告'},
                {value: 1548, name: '搜索引擎'}
            ],
            emphasis: {
                itemStyle: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
            }
        }
    ]
};

效果：