Echart之饼图,字体太长问题

来源:互联网 发布:ubuntu安装文件格式 编辑:程序博客网 时间:2024/04/29 22:32

饼图

上代码

1.图表容器
   myPovertyVillageCount = echarts.init(document.getElementById('PovertyVillageCount'));
2.配置

    optionPovertyVillageCount = {        color: ['#7cb5ec', '#f0ec7d', '#90ec7d', '#f7a35d', '#8085e9', '#ff3d3d', '#00a0e9', '#f603ff', '#00b419', '#5f52a0'],//饼图块的颜色        title: {            text: '就失业状况',            textStyle: {                color: '#fff',                fontSize: 16,                x: 'left'//标题位置,默认left,值有center,right,如果要精确控制位置用top:数值,left:数值            },            backgroundColor: '#2f7abe',            padding: 5//标题边距,默认5        },//标题的字体颜色背景位置控制        tooltip: {            trigger: 'item',//数据项图形触发,主要在散点图,饼图等无类目轴的图表中使用。            formatter: "{b} : {c} ({d}%)"//显示名称,数值和百分比,可以回调函数,自己设置里面的格式        },        series: [            {                name: '就失业状况',                type: 'pie',                radius: '60%',                center: ['50%', '50%'],                label: {                    normal: {                        formatter: '{b}: {d}%'//饼图显示名称和百分比  formatter:'{b}'只显示名称                    }                },//图形上的文本标签,可用于说明图形的一些数据信息,比如值,名称等                data: povertyHouseholdCount,                itemStyle: {                    emphasis: {                        shadowBlur: 10,                        shadowOffsetX: 0,                        shadowColor: 'rgba(0, 0, 0, 0.5)'                    }                }//图形样式,有 normal 和 emphasis 两个状态。normal 是图形在默认状态下的样式;emphasis 是图形在高亮状态下的样式,比如在鼠标悬浮或者图例联动高亮时。            }        ]    };
3.指定的数据配置生成图表
   myPovertyVillageCount.setOption(optionPovertyVillageCount)

4.图表



5,解决字太长问题,网上给的办法是 
 formatter:function(val){   //让series 中的文字进行换行  
                 return val.name.split("-").join("\n");
}  
这样我试出来的就是百分比不显示出来,其实只要 formatter:'{b}'他的结果也只是只显示名称
这样回调函数可以写出自己想要的各种格式