Echarts之Pie （一）

太过爱你忘了你带给我的痛 2022-09-10 12:25 20阅读 0赞

### Echarts之Pie （一） ###

*  一、最小角度设置
 *  二、调整起始角度
 *   *  2-1起始角度 90
     *  2-2起始角度 0
     *  2-3起始角度 180
 *  三、样式调整测试
 *   *  3-1测试网址
     *  3-2测试代码

问题描述：echarts pie图，数据过小压缩问题处理  
如下：  
![01][]

# 一、最小角度设置 #

当对应元素value过小或为0时，怎么让对应元素在pie图上有一个最小的占位。  
设置如下：

series: [{
    ...
           minAngle:10,//设定 最小角度
    ...
    }]

效果图：  
![02][]

# 二、调整起始角度 #

series: [{
    ...
             startAngle:90,//起始角度 不设置该值默认为：90
    ...
    }]

起始角度，即第一个数据(如下代码)开始的位置，不设置该值默认为：90。

let echartData = [{
            name: "A类",
            value: "3720"
        },
        {
            name: "B类",
            value: "2920"
        },
        {
            name: "C类",
            value: "2200"
        },
        {
            name: "D类",
            value: "0"
        }
    ];
    
    series: [{
    		...
            data: echartData,
            startAngle:90,//起始角度 不设置该值默认为：90
            }]
           ...

## 2-1起始角度 90 ##

startAngle:90,//起始角度 不设置该值默认为：90

![03][]

## 2-2起始角度 0 ##

startAngle:0,//起始角度 不设置该值默认为：90

![056][]

## 2-3起始角度 180 ##

startAngle:180,//起始角度 不设置该值默认为：90

![06][]

# 三、样式调整测试 #

## 3-1测试网址 ##

**测试地址一：**  
[https://www.makeapie.com/editor.html?c=x1r0Pqnp-I][https_www.makeapie.com_editor.html_c_x1r0Pqnp-I]

**测试地址二：**  
[https://echarts.apache.org/examples/zh/editor.html?c=pie-doughnut][https_echarts.apache.org_examples_zh_editor.html_c_pie-doughnut]

## 3-2测试代码 ##

代码为以上样式 截图对应代码，直接复制就可用

let bgColor = '#fff';
    let title = '总量';
    let color = ['#0E7CE2', '#FF8352', '#E271DE', '#F8456B', '#00FFFF', '#4AEAB0'];
    let echartData = [{
            name: "A类",
            value: "3720"
        },
        {
            name: "B类",
            value: "2920"
        },
        {
            name: "C类",
            value: "2200"
        },
        {
            name: "D类",
            value: "0"
        }
    ];
    
    let formatNumber = function(num) {
        let reg = /(?=(\B)(\d{3})+$)/g;
        return num.toString().replace(reg, ',');
    }
    let total = echartData.reduce((a, b) => {
        return a + b.value * 1
    }, 0);
    
    option = {
        backgroundColor: bgColor,
        color: color,
        // tooltip: {
        //     trigger: 'item'
        // },
        title: [{
            text: '{name|' + title + '}\n{val|' + formatNumber(total) + '}',
            top: 'center',
            left: 'center',
            textStyle: {
                rich: {
                    name: {
                        fontSize: 14,
                        fontWeight: 'normal',
                        color: '#666666',
                        padding: [10, 0]
                    },
                    val: {
                        fontSize: 32,
                        fontWeight: 'bold',
                        color: '#333333',
                    }
                }
            }
        },{
            text: '单位：个',
            top: 20,
            left: 20,
            textStyle: {
                fontSize: 14,
                color:'#666666',
                fontWeight: 400
            }
        }],
        series: [{
            type: 'pie',
            radius: ['45%', '60%'],
            center: ['50%', '50%'],
            data: echartData,
            hoverAnimation: false,
            startAngle:180,//起始角度 不设置该值默认为：90
            minAngle:10,//设定 最小角度
            itemStyle: {
                normal: {
                    borderColor: bgColor,
                    borderWidth: 2
                }
            },
            labelLine: {
                normal: {
                    length: 20,
                    length2: 120,
                    lineStyle: {
                        color: '#e6e6e6'
                    }
                }
            },
            label: {
                normal: {
                    formatter: params => {
                        return (
                            '{icon|●}{name|' + params.name + '}{value|' +
                            formatNumber(params.value) + '}'
                        );
                    },
                    padding: [0 , -100, 25, -100],
                    rich: {
                        icon: {
                            fontSize: 16
                        },
                        name: {
                            fontSize: 14,
                            padding: [0, 10, 0, 4],
                            color: '#666666'
                        },
                        value: {
                            fontSize: 18,
                            fontWeight: 'bold',
                            color: '#333333'
                        }
                    }
                }
            },
        }]
    };

其他Echarts相关效果其实可以直接在上面提供的网站上寻找  
[https://www.makeapie.com/][https_www.makeapie.com]

[01]: /images/20220829/f952d40d137f4a64b8060f78b656aee5.png
[02]: /images/20220829/390e3d263f4c4d34bce70754fd411347.png
[03]: /images/20220829/e3ea5b0d58d7487a9c3df26af40ee66b.png
[056]: /images/20220829/9836ff43c3f543f5ab17f2235f769aec.png
[06]: /images/20220829/4599a707c49541d1a392673e24753cb3.png
[https_www.makeapie.com_editor.html_c_x1r0Pqnp-I]: https://www.makeapie.com/editor.html?c=x1r0Pqnp-I
[https_echarts.apache.org_examples_zh_editor.html_c_pie-doughnut]: https://echarts.apache.org/examples/zh/editor.html?c=pie-doughnut
[https_www.makeapie.com]: https://www.makeapie.com/

发表评论取消回复

表情：

评论列表（有 0 条评论，20人围观）

还没有评论，来说两句吧...

相关阅读

相关 Echarts pie 饼图类型后显示数据

Echarts pie 饼图类型后显示数据 ![在这里插入图片描述][70] ![在这里插入图片描述][70 1] sysPie:function(libt

灰太狼/ 2023年10月18日 09:43/ 0 赞/ 181 阅读

相关 echarts饼图外圈转动动画 pie

![在这里插入图片描述][20191012180722543.gif] 就是这个东西，会围着饼图转动准备：两个div，一个装饼图，一个装那个转圈的。。。这里就只写转圈的了

「爱情、让人受尽委屈。」/ 2023年06月07日 05:35/ 0 赞/ 307 阅读

相关 Echarts 之pie 环形图

实现步骤：一、引入Echars > npm install echarts 二、main.js中导入 // 图表--插件 import e

朴灿烈づ我的快乐病毒、/ 2023年01月19日 11:50/ 0 赞/ 69 阅读

相关初遇Echarts之Echarts入门

初次使用Echarts 首先咱们来说说什么是Echarts，用途是什么——ECharts 是一个使用 JavaScript 实现的开源可视化库，涵盖各行业图表，满足各种需

￡神魔★判官ぃ/ 2022年11月27日 03:24/ 0 赞/ 248 阅读

相关 )CSS3 PIE

1：)CSS3 PIE CSS3 PIE(“Progressive Internet Explorer”的缩写)工具可以让IE6至IE8的所有版本实现大多数的CSS3修饰特性

╰半夏微凉°/ 2022年10月02日 10:58/ 0 赞/ 165 阅读

相关 Echarts之Pie （一）

Echarts之Pie （一）一、最小角度设置二、调整起始角度 2-1起始角度 90 2-2起始角度 0 2-3起

太过爱你忘了你带给我的痛/ 2022年09月10日 12:25/ 0 赞/ 21 阅读

相关 matplotlib基础（4）之饼图 pie

from matplotlib import colors import matplotlib.pyplot as plt import numpy a

谁借莪１个温暖的怀抱￠/ 2022年09月04日 13:55/ 0 赞/ 207 阅读

相关 poj-3122-pie

Pie <table> <tbody> <tr> <td><strong>Time Limit:</strong> 1000MS</td>

逃离我推掉我的手/ 2022年05月20日 06:17/ 0 赞/ 211 阅读

相关 PIE SDK过滤

1. 算法功能简介过滤功能使用斑点分组方法来消除分类文件中被隔离的分类像元，用以解决分类图像中出现的孤岛问题。 PIE SDK支持算法功能的执行

忘是亡心i/ 2021年12月24日 02:47/ 0 赞/ 208 阅读

相关 ECharts之折线图

效果图 ![在这里插入图片描述][20190801172702725.gif] 背景图片 ![20190725170845879.png][] 下载EChar

ゝ一世哀愁。/ 2021年09月30日 05:00/ 0 赞/ 1298 阅读