ECharts“图例标记图形”样式调整

这两天的工作中，遇到一个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内容的丰富性，在其提供的图形领域，会有无限的创造空间。