一、基本概念
Echarts是一个开源的可视化图表库,可以用来制作各种类型的图表。其中,饼图是Echarts中最为常见和重要的一种图表之一。在饼图中,legend指的是图例,即标记每个扇形所代表的数据的方框或其他符号。
legend通常位于饼图的左侧、右侧、上方或下方。Echarts提供了丰富的配置选项,可以调整legend的位置、大小、颜色、字体、边框等多种样式。
二、修改legend位置的方法
1. legend.center
legend.center是一个数组,包含两个数字或百分数。当设置了legend.center时,legend将会居中显示。在这种情况下,legend.left和legend.right参数不起作用。
option = { series: [{ type: 'pie', name: 'pie', data: [ {value: 335, name: 'A'}, {value: 310, name: 'B'}, {value: 234, name: 'C'}, {value: 135, name: 'D'}, {value: 1548, name: 'E'} ], center: ['50%', '50%'], radius: ['40%', '60%'] }], legend: { orient: 'vertical', left: 'left' } };
2. legend.left和legend.right
当legend.width不为'auto'时,使用left和right参数可以将legend定位到画布的左侧或右侧。当left参数为'left'时,legend将位于画布的左侧。当right参数为'right'时,legend将位于画布的右侧。
option = { series: [{ type: 'pie', name: 'pie', data: [ {value: 335, name: 'A'}, {value: 310, name: 'B'}, {value: 234, name: 'C'}, {value: 135, name: 'D'}, {value: 1548, name: 'E'} ], center: ['50%', '50%'], radius: ['40%', '60%'] }], legend: { orient: 'vertical', width: 'auto', left: 'left', data:['A','B','C','D','E'] } };
3. legend.top和legend.bottom
当legend.height不为'auto'时,使用top和bottom参数可以将legend定位到画布的上方或下方。当top参数为'top'时,legend将位于画布的上方。当bottom参数为'bottom'时,legend将位于画布的下方。
option = { series: [{ type: 'pie', name: 'pie', data: [ {value: 335, name: 'A'}, {value: 310, name: 'B'}, {value: 234, name: 'C'}, {value: 135, name: 'D'}, {value: 1548, name: 'E'} ], center: ['50%', '50%'], radius: ['40%', '60%'] }], legend: { orient: 'horizontal', height: 'auto', top: 'top', data:['A','B','C','D','E'] } };
三、修改legend样式的方法
1. legend.textStyle
legend.textStyle可以用来设置legend中文本的样式,例如字体、字号、颜色等。
option = { series: [{ type: 'pie', name: 'pie', data: [ {value: 335, name: 'A'}, {value: 310, name: 'B'}, {value: 234, name: 'C'}, {value: 135, name: 'D'}, {value: 1548, name: 'E'} ], center: ['50%', '50%'], radius: ['40%', '60%'] }], legend: { orient: 'horizontal', height: 'auto', top: 'top', textStyle: { color: 'red', fontSize: 14, fontWeight: 'bold' }, data:['A','B','C','D','E'] } };
2. legend.itemGap
legend.itemGap可以用来设置legend中每个图例之间的距离。
option = { series: [{ type: 'pie', name: 'pie', data: [ {value: 335, name: 'A'}, {value: 310, name: 'B'}, {value: 234, name: 'C'}, {value: 135, name: 'D'}, {value: 1548, name: 'E'} ], center: ['50%', '50%'], radius: ['40%', '60%'] }], legend: { orient: 'horizontal', height: 'auto', top: 'top', itemGap: 20, data:['A','B','C','D','E'] } };
3. legend.itemWidth和legend.itemHeight
legend.itemWidth和legend.itemHeight可以用来设置legend中每个图例的宽度和高度。
option = { series: [{ type: 'pie', name: 'pie', data: [ {value: 335, name: 'A'}, {value: 310, name: 'B'}, {value: 234, name: 'C'}, {value: 135, name: 'D'}, {value: 1548, name: 'E'} ], center: ['50%', '50%'], radius: ['40%', '60%'] }], legend: { orient: 'horizontal', height: 'auto', top: 'top', itemGap: 20, itemWidth: 20, itemHeight: 10, data:['A','B','C','D','E'] } };
四、修改legend背景的方法
1. legend.backgroundColor
legend.backgroundColor可以用来设置legend的背景颜色。
option = { series: [{ type: 'pie', name: 'pie', data: [ {value: 335, name: 'A'}, {value: 310, name: 'B'}, {value: 234, name: 'C'}, {value: 135, name: 'D'}, {value: 1548, name: 'E'} ], center: ['50%', '50%'], radius: ['40%', '60%'] }], legend: { orient: 'horizontal', height: 'auto', top: 'top', itemGap: 20, backgroundColor: '#f4f4f4', data:['A','B','C','D','E'] } };
2. legend.borderWidth和legend.borderColor
legend.borderWidth和legend.borderColor可以用来设置legend的边框宽度和边框颜色。
option = { series: [{ type: 'pie', name: 'pie', data: [ {value: 335, name: 'A'}, {value: 310, name: 'B'}, {value: 234, name: 'C'}, {value: 135, name: 'D'}, {value: 1548, name: 'E'} ], center: ['50%', '50%'], radius: ['40%', '60%'] }], legend: { orient: 'horizontal', height: 'auto', top: 'top', itemGap: 20, backgroundColor: '#f4f4f4', borderWidth: 1, borderColor: 'gray', data:['A','B','C','D','E'] } };
总结
通过上面的介绍,我们了解到了Echarts饼图legend位置调整的一些基本概念、方法和技巧。我们可以使用legend.center、legend.left和legend.right、legend.top和legend.bottom等方法来调整legend的位置;使用legend.textStyle、legend.itemGap、legend.itemWidth和legend.itemHeight等方法来修改legend的样式;使用legend.backgroundColor、legend.borderWidth和legend.borderColor等方法来修改legend的背景和边框。希望这篇文章能给大家带来一些帮助,让大家更好地使用Echarts库制作出更加美观、实用的饼图。