Appearance
如何不显示空数据
首先需要明确的是,这个不显示空数据不是指dataSet
中不传入空数据,传入data
之前筛除空数据肯定是不会显示,但是这样做的话常见问题是会导致legend
也不显示对应系列(饼图下),所有在传入空数据给dataSet
的情况下,一般我们会对系列的label
进行格式限制,label.formatter
是支持回调函数格式的,默认入参是params
,在这个params
上,我们可以找到系列/类目对应的数据,通过判断数据是否为空或 0,来决定返回空字符串还是正确格式的字符串,就可以控制不显示空数据了;
使用特殊颜色/图案/纹理
做图表功能时,颜色方案,最常见的就是渐变颜色,有些特殊地方的样式,会用到纹理,可能上述的普通方式无法实现某些变态需求,我们就可以参考echarts
文档,看这种样式是否支持html
格式输出,例如tooltip
就是默认使用html
格式渲染的,这是我们就可以用到 html、css 技术来实现这部分功能; 当然,除了上面提到的 html/css 方案,在某些地方上,例如legend.icon
、series.symbol
之类的地方会用到一些图案,除了 echarts 文档中提到的内置symbol
图案外,还可以使用上图片链接/base64、复合 svg(即单 path 的 svg,因为 echarts 不支持多路径 svg 格式),需要注意的点有两个,一个是使用图片时的分辨率问题,第二是使用 svg 时,只支持复合 svg(需要 UI 帮忙转一下格式),且 svg 不支持多色(因为复合 svg 是单路径的);