echarts柱状图显示百分比_Echarts 饼状图显示信息,内容,值,百分比都显示的代码 更改图例等问题汇总...

增加了显示比例，显示内容

显示比例代码显示完整代码：

series: [
        {
            name:'访问来源',
            type:'pie',
            radius: ['50%', '70%'],
            avoidLabelOverlap: false,
            label: {
                normal: {
                    formatter: '{b}:{c}' + 'nr' + '({d}%)',
                    show: true,
                    position: 'left'
                },
                emphasis: {
                    show: true,
                    textStyle: {
                        fontSize: '30',
                        fontWeight: 'bold'
                    }
                }
            },
            labelLine: {
                normal: {
                    show: true
                }
            },
            data:[
                {value:335, name:'直接访问'},
                {value:310, name:'邮件营销'},
                {value:234, name:'联盟广告'},
                {value:135, name:'视频广告'},
                {value:1548, name:'搜索引擎'}
            ]
        }
    ]
具体添加的代码就是：
formatter: '{b}:{c}' + 'nr' + '({d}%)',  //增加了格式

如果要增加饼图的横线，则把横线标签设置为true即可:

labelLine: {
                normal: {
                    show: true
                }
            },

原图

效果图

另外对于{a} {b} {c} {d}变量的解释：

{a} <br/>{b}: {c} ({d}%)"//模板变量有 {a}、{b}、{c}、{d}，分别表示系列名，数据名，数据值，百分比;

如果要修改图形的颜色则增加与以下代码：color

tooltip: {
        trigger: 'item',
        formatter: "{a} <br/>{b}:  ({d}%)"
    },
    color:['red', 'green','yellow','blueviolet'],
    legend: {

如图希望图例不显示，则增加代码：show: false，如下：

legend: {
        show: false,
        orient: 'vertical',
        x: 'right',
        data:['男','女']
    },

更改图例，加入代码：icon，具体代码如下：

legend: {
         icon: 'circle',
        orient: 'vertical',
        left: 'left',
        data: ['直接访问','邮件营销','联盟广告','视频广告','搜索引擎']
    },

另外还支持以下图形：

标志图形类型，默认自动选择（8种类型循环使用，不显示标志图形可设为'none'），默认循环选择类型有：
'circle' | 'rectangle' | 'triangle' | 'diamond' |
'emptyCircle' | 'emptyRectangle' | 'emptyTriangle' | 'emptyDiamond' 
另外，还支持五种更特别的标志图形'heart'（心形）、'droplet'（水滴）、'pin'（标注）、'arrow'（箭头）和'star'（五角星），这并不出现在常规的8类图形中，但无论是在系列级还是数据级上你都可以指定使用，同时，'star' + n（n>=3)可变化出N角星，如指定为'star6'则可以显示6角星 
自1.3.5起支持symbol为自定义图片，格式为'image://' + '图片路径'， 如'image://../asset/ico/favicon.png'

原图

效果图

更改图例位置：增加以下代码：

 orient: 'horizontal',//水平方向
         left: 'center',
         bottom:"bottom", 

legend的具体参数信息如下：

legend={
    show:true,                                  //是否显示
    zlevel:0,                                   //所属图形的Canvas分层，zlevel 大的 Canvas 会放在 zlevel 小的 Canvas 的上面
    z:2,                                         //所属组件的z分层，z值小的图形会被z值大的图形覆盖
    left:"center",                              //组件离容器左侧的距离,'left', 'center', 'right','20%'
    top:"top",                                   //组件离容器上侧的距离,'top', 'middle', 'bottom','20%'
    right:"auto",                               //组件离容器右侧的距离,'20%'
    bottom:"auto",                              //组件离容器下侧的距离,'20%'
    width:"auto",                               //图例宽度
    height:"auto",                              //图例高度
    orient:"horizontal",                        //图例排列方向
    align:"auto",                               //图例标记和文本的对齐,left,right
    padding:5,                                   //图例内边距，单位px  5  [5, 10]  [5,10,5,10]
    itemGap:10,                                  //图例每项之间的间隔
    itemWidth:25,                               //图例标记的图形宽度
    itemHeight:14,                              //图例标记的图形高度
    formatter:function (name) {                 //用来格式化图例文本，支持字符串模板和回调函数两种形式。模板变量为图例名称 {name}
        return 'Legend ' + name;
    },
    selectedMode:"single",                    //图例选择的模式,true开启,false关闭,single单选,multiple多选
    inactiveColor:"#ccc",                     //图例关闭时的颜色
    textStyle:mytextStyle,                    //文本样式
    data:['类别1', '类别2', '类别3'],          //series中根据名称区分
    backgroundColor:"transparent",            //标题背景色
    borderColor:"#ccc",                         //边框颜色
    borderWidth:0,                               //边框线宽
    shadowColor:"red",                          //阴影颜色
    shadowOffsetX:0,                            //阴影水平方向上的偏移距离
    shadowOffsetY:0,                            //阴影垂直方向上的偏移距离
    shadowBlur:10,                               //阴影的模糊大小
};

原图

效果图

更多源代码可以关注我个人公众号：随记草堂