这两天的工作中,遇到一个ECharts方面的问题,需要把环形图“图例标记图形”隐藏掉,像下图这样。我用到的方法是,itemWidth:0。继续深入学习后发现,其中拥有的奥妙远不止于此。
1. 隐藏“图例标记图形”
ECharts中legend组件是对图例的说明,用来设置图例的相关样式。最初我用itmeWidth:0的方式可以说是一种变相隐藏。实际上图形的高度依然存在,依旧占据空间。(当然了,用itemHeight:0也可以隐藏图形)
legend有一个属性:icon,icon的属性值设置为"none",即可隐藏图形。图形隐藏后,其宽、高、间隔等属性仍然生效,可以理解为类似css的visibility: hidden,即使元素不可见,依然占据页面的空间。如图:
legend: { //图例说明,解释(图例设置)
icon: "none", // 控制图形样式
itemWidth: 100, // 设置图例宽度
itemHeight: 10, // 设置图例高度
itemGap: 25, // 设置图例间距
}
2. “图例标记图形”的其他类型
ECharts 提供的标记类型包括 'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow', 'none'。(这些属性不仅仅适用于环形图,不针对某一类型的图表,对其他所有类型的图表都有效果)
legend: { //图例说明,解释(图例设置)
icon: "circle", // 'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow'
itemWidth: 100, // 设置图例宽度
itemHeight: 10, // 设置图例高度
itemGap: 25, // 设置图例间距
}
样式分别对应:
3. 自定义“图例标记图形”
格式为:icon: 'image://xxx/b.png',image后面的“//”不能省略,且“:”与“//”之间也不能有空格。
个人测试:我的本地环境js文件和图片文件在同一个目录,却不能直接通过图片名称引入,必须用“./image/xxx.png”的方式引入,这说明:js里对应的文件渲染到页面上,基准路径是相对于html文件的(话说js和css文件中的相对路径,其基准路径是不同的)。
legend: {
icon: 'image://./images/icon1.png',
}
4. “图例标记图形”颜色修改
标记图形的颜色,默认和对应的图形的颜色一致。
查阅了一些资料,legend提供的textStyle仅仅是修改文字的样式 ,那怎么处理呢?(是不是我太爱钻牛角尖了?官方根本就没有提供修改的方法???泪奔,好像也没有应用的场景)
5. “图例标记图形”排序
我又有了一个奇怪的想法,在不改变数据顺序的情况下,如何对标记图形重新排序呢?
经过一番尝试,可以通过为itemGap设置负值来实现倒序排序,emmmm,想想也确实是这个道理呀,哈哈。
ECharts是一个纯 Javascript 的商业级数据图表,初次接触,对其理解的并不深入,不过倒也初步感受到了ECharts内容的丰富性,在其提供的图形领域,会有无限的创造空间。