隐藏饼图数据为0项区域

Posted 2023-04-11

参考技术A 业务场景：使用Echarts绘制饼图以及折线图。第一种只有饼图，分别为年月日的销量占比，进行数据的渲染。第二种是饼图+折线图，且两者存在联动。

第一种：只有饼图

若是只有饼图的话，可以在数据进行push时，将相应的数值0转为‘null’（使用三目运算），基于饼图的渲染策略。遇到‘null’或者‘’时，饼图是不渲染这块的内容。这样数据为0的数值项就被过滤掉了。

第二种：饼图 + 折线图

这种饼图和折线图有关联的，特别的是，由于是引用官方的示例，使用dataset数据集，统一管理数据，饼图和折线图共享数据，若是采用第一种方式的方法，这样就会影响折线图的渲染，折线就会发生断点，影响画面效果。

要求：

1.饼图不显示数值为0的项，且不显示label和labelline。

2.折线图不断点，且0值正常渲染。

solution：解决思路:     

            --1.正常处理数据，但设置minAngle:0，且 minShowLabelAngle:0.0001。（最小扇区角度为0，设置为最小显示标签角度大于0即可。注意，部门数据不为0，但是占比角度较小，所以设置minShowAngle的数值要很小。）

        --2.若是不使用dataset的数据管理集，可在series内pie的itemStyle的属性内，进行自定义设置，一般在属性后使用响应的函数返回值控制。

ECharts常用图表 饼图

1.图表4 饼图

1.1.饼图的实现步骤

• 步骤1 ECharts 最基本的代码结构

 此时 option 是一个空空如也的对象

• 步骤2 准备数据

•  步骤3 准备配置项 在 series 下设置 type:pie

 

注意 :

• 饼图的数据是由 name 和 value 组成的字典所形成的数组
• 饼图无须配置 xAxis 和 yAxis

1.2.饼图的常见效果

显示数值

• label.show : 显示文字
• label.formatter : 格式化文字

• 南丁格尔图

南丁格尔图指的是每一个扇形的半径随着数据的大小而不同, 数值占比越大, 扇形的半径也就越大

roseType:'radius'

        var option =                 series : [
                                             type : 'pie' ,                         data : pieData ,                         label :                             show : true ,                             formatter : function ( arg )                                 return arg . data . name + ' 平台 ' + arg . data . value + ' 元 \\n' + arg . percent + '%'                                      ,                 roseType : 'radius'                      ]

 

 选中效果

• selectedMode: 'multiple'

        选中模式，表示是否支持多个选中，默认关闭，支持布尔值和字符串，字符串取值可         选 'single' ， 'multiple' ，分别表示单选还是多选
 

• selectedOffset: 30

        选中扇区的偏移距离

 

圆环

• radius

饼图的半径。可以为如下类型：

number ：直接指定外半径值。

string ：例如， '20%' ，表示外半径为可视区尺寸（容器高宽中较小一项）的 20% 长度。

Array. ：数组的第一项是内半径，第二项是外半径, 通过 Array , 可以将饼图设置为圆环图

 

1.3.饼图的特点

饼图可以很好地帮助用户快速了解不同分类的数据的占比情况

下一篇：ECharts常用图表 05 地图

往期文章：

• 数据可视化你了解多少？
• ECharts的基本使用
• ECharts常用图表 02 折线图
• ECharts常用图表 03 散点图

---

黑马前端专栏干货多多，关注再学，好方便~

2022年前端学习路线图：课程、源码、笔记，技术栈 另外此线路图实时更新！需要课后资料的友友们，可以直接告诉我喔~