Skip to content
On this page

如何不显示空数据

首先需要明确的是,这个不显示空数据不是指dataSet中不传入空数据,传入data之前筛除空数据肯定是不会显示,但是这样做的话常见问题是会导致legend也不显示对应系列(饼图下),所有在传入空数据给dataSet的情况下,一般我们会对系列的label进行格式限制,label.formatter是支持回调函数格式的,默认入参是params,在这个params上,我们可以找到系列/类目对应的数据,通过判断数据是否为空或 0,来决定返回空字符串还是正确格式的字符串,就可以控制不显示空数据了;

使用特殊颜色/图案/纹理

做图表功能时,颜色方案,最常见的就是渐变颜色,有些特殊地方的样式,会用到纹理,可能上述的普通方式无法实现某些变态需求,我们就可以参考echarts文档,看这种样式是否支持html格式输出,例如tooltip就是默认使用html格式渲染的,这是我们就可以用到 html、css 技术来实现这部分功能; 当然,除了上面提到的 html/css 方案,在某些地方上,例如legend.iconseries.symbol之类的地方会用到一些图案,除了 echarts 文档中提到的内置symbol图案外,还可以使用上图片链接/base64、复合 svg(即单 path 的 svg,因为 echarts 不支持多路径 svg 格式),需要注意的点有两个,一个是使用图片时的分辨率问题,第二是使用 svg 时,只支持复合 svg(需要 UI 帮忙转一下格式),且 svg 不支持多色(因为复合 svg 是单路径的);