echarts 添加百分号%

效果如下：
这里写图片描述
echart 3.0写法：

option = {
    //提示框组件,鼠标移动上去显示的提示内容
    tooltip: {
       trigger: 'item',
       formatter: "{a} <br/>{b}: {c} ({d}%)"//模板变量有 {a}、{b}、{c}、{d}，分别表示系列名，数据名，数据值，百分比。
    },
    //图例
    legend: {
        //图例垂直排列
        orient: 'vertical',
        x: 'left',
        //data中的名字要与series-data中的列名对应，方可点击操控
        data:['直接访问','邮件营销','联盟广告','视频广告','搜索引擎']
    },
    series: [
        {
            name:'访问来源',
            type:'pie',
            //饼状图
           // radius: ['50%', '70%'],
            avoidLabelOverlap: false,
            //标签
            label: {
                normal: {
                    show: true,
                    position: 'inside',
                    formatter: '{d}%',//模板变量有 {a}、{b}、{c}、{d}，分别表示系列名，数据名，数据值，百分比。{d}数据会根据value值计算百分比

                   textStyle : {                   
                    align : 'center',
                    baseline : 'middle',
                    fontFamily : '微软雅黑',
                    fontSize : 15,
                    fontWeight : 'bolder'
                 }
                },
            },
            data:[
                {value:335, name:'直接访问'},
                {value:310, name:'邮件营销'},
                {value:234, name:'联盟广告'},
                {value:135, name:'视频广告'},
                {value:1548, name:'搜索引擎'}
            ]
        }
    ]
};

  

echart 2.0写法：

    //其余部分相同，label部分有所区别,在2.0中label是itemStyle的一项属性
    series: [
        {
            name:'访问来源',
            type:'pie',
            //饼状图
           // radius: ['50%', '70%'],
            avoidLabelOverlap: false,
            //标签
            itemStyle : {
                normal : {
                    label:{
                        show : true,
                        position : 'inner',
                        formatter: '{d}%',
                        distance : 0.7 //这项是标识距离中心点的距离
                        textStyle : {                   
                            align : 'center',
                            baseline : 'middle',
                            fontFamily : '微软雅黑',
                            fontSize : 15,
                            fontWeight : 'bolder'
                         }
                    },
                    labelLine:{
                        show : false
                    }
                }
            },
            data:[
                {value:335, name:'直接访问'},
                {value:310, name:'邮件营销'},
                {value:234, name:'联盟广告'},
                {value:135, name:'视频广告'},
                {value:1548, name:'搜索引擎'}
            ]
        }
    ]

   

因为没有仔细看版本，纠结了好半天写法，果然学前端最重要的就是：认真看文档，认真看文档，认真看文档！重要的事情说三遍！！！

另外推荐2个官网网站，可以实施编辑echart，非常方便：
这是echart3.0：
http://www.echartsjs.com/gallery/editor.html?c=pie-doughnut，
这是echart2.0:
http://echarts.baidu.com/echarts2/doc/example.html
---------------------
作者：澪月
来源：CSDN
原文：https://blog.csdn.net/For_GG/article/details/78326076
版权声明：本文为博主原创文章，转载请附上博文链接！