echarts 使legend底部居中

要使echarts图例（legend）位于底部居中，可以使用以下代码：

legend: {
    orient: 'horizontal',
    bottom: '0%',
    left: 'center',
}

其中，`orient`属性设置图例的排列方式，`bottom`属性设置图例距离容器底部的距离，`left`属性设置图例距离容器左侧的距离，这里设置为居中。

另外，如果想要设置图例的宽度，可以使用`width`属性，例如：

legend: {
    orient: 'horizontal',
    bottom: '0%',
    left: 'center',
    width: '80%',
}

这里将图例的宽度设置为容器宽度的80%。

相关问题

echarts legend居中显示

ECharts是一款强大的JavaScript图表库，想要让图例居中显示，你可以通过设置legend的配置项来实现。首先，在初始化图表时，找到`legend`部分并设置相关属性：

var option = {
  // 其他图表配置...
  legend: {
    show: true, // 是否显示图例，默认true
    orient: 'vertical', // 图例方向，垂直居中可以设为'center'
    position: 'bottom', // 图例位置，这里为了垂直居中，通常底部对齐
    left: '50%', // 如果orient设为'vertical'，则left用于水平居中，值应为宽度的一半
    top: 'middle', // 对于垂直布局，top也可以设为'middle'实现居中
    layout: 'horizontal', // 这里指定为'horizontal'表示图例横向排列，如果是垂直居中则不需要这个选项
    align: 'center', // 水平方向上的对齐方式，'center'用于居中
    verticalAlign: 'middle', // 垂直方向上的对齐方式，同样设为'middle'实现居中
  },
};

// 使用echarts实例的setOption方法更新配置
yourChart.setOption(option);

这样，你的ECharts图例就会按照设定的方式居中显示了。

echarts设置legend位置

要设置Echarts图例（legend）的位置，可以在legend属性中修改以下几个参数：

1. x: 可以设定图例在左（left）、右（right）、居中（center）或填写数字（如100px）来自定义位置。
2. y: 可以设定图例在上（top）、下（bottom）、居中（center）或填写数字（如100px）来自定义位置。
3. padding: 可以使用padding属性来设置图例与边界的距离，格式为padding:[上，右，下，左]，其中上下左右分别表示距离上方、右方、下方和左方的距离。

以下是一个示例代码，展示了几种常见的图例排列方式：

1. 图例在中间底部：

legend: {
  orient: 'vertical',
  left: 'center',
  bottom: 'bottom',
  data: ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎']
}

2. 图例在右下角：

legend: {
  orient: 'vertical',
  left: 'right',
  top: 'bottom',
  data: ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎']
}

通过调整x、y和padding等参数，您可以根据需要自定义图例的位置。更多关于Echarts图例设置的信息，您可以参考中提供的链接。<span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
- *1* [Echarts图例位置 - legend属性](https://blog.csdn.net/qq_43592064/article/details/105272843)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 33.333333333333336%"]
- *2* [关于如何设置echart图例（legend）的位置](https://blog.csdn.net/qq_42959262/article/details/84791034)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 33.333333333333336%"]
- *3* [echarts legend 排列问题](https://download.csdn.net/download/qq_36437172/12420436)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 33.333333333333336%"]
[ .reference_list ]