本文目录一览：
设置两个chart.legend.position会覆盖吗
这里将针对highcharts图表组件内的图例legend展开讲述，图例的显示位置调整，亮瞎你的双眼！
一、将图例Legend放于图表右侧
1、设置chart的marginRight属性值
chart: {
marginRight: 120
},
2、设置legend图例属性值如下
legend: {
align: ‘right’, //水平方向位置
verticalAlign: ‘top’, //垂直方向位置
x: 0, //距离x轴的距离
y: 100 //距离Y轴的距离
},
3、效果图如下：
二、将图例放于图表左上角
1、设置legend的属性
legend: {
align: ‘left’, //水平方向位置
verticalAlign: ‘top’, //垂直方向位置
x: 0, //距离x轴的距离
y: 0 //距离Y轴的距离
},
2、效果图如下：
三、将图例放于图表上方中央
1、设置legend属性如下
legend: {
align: ‘center’, //水平方向位置
verticalAlign: ‘top’, //垂直方向位置
x: 0, //距离x轴的距离
y: 20 //距离Y轴的距离
},
2、效果图如下：
四、将图例放于下方中央
1、设置legend属性如下
legend: {
align: ‘center’, //水平方向位置
verticalAlign: ‘bottom’, //垂直方向位置
x: 0, //距离x轴的距离
y: 0 //距离Y轴的距离
},
Echarts中legend属性使用的方法详解
目录orientx/y(left/top)样式设置itemGapitemHeighttextStyleselecteddata补充：自定义legend属性总结Echarts的legend属性是对图例组…
Echarts的legend属性是对图例组件的相关配置
而legend就是Echarts图表中对图形的解释部分：
其中legend自身常用的配置属性如下：
设置图例的朝向
属性值：
设置图例在X轴方向上的位置以及在Y轴方向上的位置
例子：
注意：边框宽度和内边距属性值为数值，不加单位。
控制每一项的间距，也就是图例之间的距离属性值为数值，不带单位
控制图例图形的高度属性值为数字，不加单位
设置图例文字样式属性值为一个对象
设置图例的某个选项的数据默认是显示还是隐藏。
false: 隐藏
属性值：对象，属性值内容：图例上的数据与boolean构成键值对
如果某选项设置为false，那么图标上的数据也会默认不显示，而图例会以灰色样式显示
图例上显示的文字信息，如果不设置该项，默认会以series设置的信息作为图例信息。如果设置该项， 必须与series设置的信息一致 ，才会生效。
而该属性的作用：可以单独对图例中某个选项进行单独设置样式
比如：
以上单独设置中
name:指定该项的名称，必填
icon:指定图例项的icon，可以为内置的图形7个图形，或者自定义图标的形式： ‘image://url’
textStyle:：设置文本样式
实现效果
到此这篇关于Echarts中legend属性使用的文章就介绍到这了,更多相关Echarts legend属性使用内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！
Echarts legend属性使用
Echarts的legend属性是对图例组件的相关配置
而legend就是Echarts图表中对图形的解释部分：
其中legend自身常用的配置属性如下：
设置图例的朝向
属性值：
设置图例在X轴方向上的位置以及在Y轴方向上的位置
例子：
注意：边框宽度和内边距属性值为数值，不加单位。
控制每一项的间距，也就是图例之间的距离
属性值为数值，不带单位
控制图例图形的高度
属性值为数字，不加单位
设置图例文字样式
属性值为一个对象
设置图例的某个选项的数据默认是显示还是隐藏。
false: 隐藏
属性值：对象，属性值内容：图例上的数据与boolean构成键值对
如果某选项设置为false，那么图标上的数据也会默认不显示，而图例会以灰色样式显示
图例上显示的文字信息，如果不设置该项，默认会以series设置的信息作为图例信息。如果设置该项， 必须与series设置的信息一致 ，才会生效。
而该属性的作用：可以单独对图例中某个选项进行单独设置样式
比如：
以上单独设置中
name:指定该项的名称，必填
icon:指定图例项的icon，可以为内置的图形7个图形，或者自定义图标的形式： ‘image://url’
textStyle:：设置文本样式
原创文章，作者：小蓝，如若转载，请注明出处：https://www.506064.com/n/150522.html
微信扫一扫 
支付宝扫一扫 