Echart之饼图，字体太长问题

最新推荐文章于 2024-12-31 14:01:23 发布

原创

最新推荐文章于 2024-12-31 14:01:23 发布 · 2.5k 阅读

1 ·

CC 4.0 BY-SA版权

本文探讨如何在Echarts饼图中有效处理因标签文字过长导致的展示问题，提供优化方案和实践技巧。

饼图

上代码

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: '就失业状况',