ECharts——之二 表盘占比的显示 ECharts进阶使用 环形图绘制

时间：2018年11月——实践出真知

一、实际效果图

第一种，连接处特写

 

第二种，连接处特写

两种方法在显示时的思路不太一样，而且两种方法在显示的时候都有一点小瑕疵，也可以说是bug。

二、分析一下

先说第二种：第二种的实现思路是使用两个pie（饼图）进行重叠，将下面的颜色设置浅一点，上面的颜色设置深一点，然后按照顺序声明组件（颜色浅的的先声明，颜色深的后声明）。

再说第一种：第一种的实现思路中并没有用到第二个饼图，而是沿用了和隐藏环形饼图下面不显示部分一样的思路（也就是整个圆环下面空出来的部分），饼图在数据上其实是有四组的（从最下面的空白开始，顺时针：【空白】、【高亮】、【空白】、【隐藏】），但是显示的只有两组。也就是图表下方开口和高亮和正常之间的空隙这两个部分是给了满的透明度，所以显示为背景色。

再说说两种实现的bug，希望大家一起集思广益，欢迎将解决思路和方法在评论中留下来。

第二种的bug：刚才说到了第二种的思路，那么最最关键的问题就是如何保证颜色深的一定在上面呢？在一开始我们按照声明顺序的原因让他满足我们的需求进行了显示，但是在ECharts中饼图有默认的高亮显示，当我们将鼠标移动到颜色浅的那一个pei上时，浅色的会覆盖掉颜色深的部分，展示一下实际图：

很明显是覆盖了，所以随之而来的两个解决思路就是：a:设置层级。b:设置下面的pei的鼠标悬浮事件，去掉默认的高亮显示。

然后针对两个方向我都进行了尝试的解决，a:对照文档给出z、zlevel属性参数，结果都没有用。b:移除了emphasis属性及参数，没有效果，对照文档关闭legendHoverLink和hoverAnimation也依旧没有作用。

但是我觉得按照我现在的理解其实这个问题应该是可以解决的，只不过可能会稍稍复杂一点，比如，设置渐变色，让在这个节点之前的都透明，然后后面的部分按照渐变色给出，减弱层次感，应该也能达到效果。或者按照网上一些博主给出的做法，去掉ECharts中给出的文件中的pei图的高亮那一块的代码。但是这些我觉得都不是最佳的解决办法，希望有人能够帮忙解决。

第一种的bug：第一种的问题呢，就是细节部分的问题了，因为我们其实给出的是四组数据，而且在显示的两组数据中间还有一组隐藏的数据，那么问题所在就是在于响应式布局中的，不同页面显示的效果有差异的问题了。bug实际图：