echarts修改legend图例标记样式

要修改 Echarts 图表中的图例标记样式，你可以通过设置 `legend.icon` 属性来实现。下面是一个例子：

option = {
  // ... 其他配置项
  legend: {
    data: ['系列一', '系列二', '系列三'],
    icon: 'circle', // 设置图例标记为圆形
    textStyle: {
      fontSize: 14,
      fontWeight: 'bold'
    }
  },
  series: [
    {
      name: '系列一',
      type: 'line',
      data: [10, 20, 30, 40, 50]
    },
    {
      name: '系列二',
      type: 'line',
      data: [50, 40, 30, 20, 10]
    },
    {
      name: '系列三',
      type: 'line',
      data: [30, 20, 10, 20, 30]
    }
  ]
};

在上面的例子中，我们通过设置 `legend.icon` 属性为 `'circle'`，将图例标记修改为圆形。你可以根据需要设置不同的标记类型，比如 `'rect'`、`'triangle'`、`'diamond'` 等。

此外，你还可以通过设置 `legend.textStyle` 属性来修改图例文本样式，比如字体大小、字重等。

相关问题

echarts legend图例样式

ECharts提供了多种设置图例样式的方式，可以通过以下属性来设置图例样式：

1. textStyle: 设置图例文本的样式，包括颜色、字号、字体等。
2. itemWidth: 设置图例标记的宽度。
3. itemHeight: 设置图例标记的高度。
4. borderColor: 设置图例边框的颜色。
5. borderWidth: 设置图例边框的宽度。
6. borderRadius: 设置图例边框的圆角半径。
7. backgroundColor: 设置图例的背景色。
8. padding: 设置图例内边距。

以下是一个设置图例样式的示例代码：

option = {
  // 设置图例组件
  legend: {
    textStyle: {
      color: '#333',
      fontSize: 14
    },
    itemWidth: 20,
    itemHeight: 14,
    borderColor: '#ccc',
    borderWidth: 1,
    borderRadius: 5,
    backgroundColor: '#fff',
    padding: [10, 20]
  },
  // 其他配置项...
  // ...
};

以上代码设置了图例文本颜色为`#333`，字号为`14`，标记宽度为`20`，标记高度为`14`，边框颜色为`#ccc`，边框宽度为`1`，边框圆角半径为`5`，背景色为`#fff`，内边距为`[10, 20]`。

echarts 中 legend

在echarts中，legend（图例）是用于展示不同系列的标记和名称的组件。根据引用、和，可以了解到一些有关图例的属性和设置。

首先，可以设置图例离容器左、右、上、下侧的距离（left、right、top、bottom）。这些值可以是具体的像素值，也可以是相对于容器高宽的百分比，还可以是'left'、'center'、'right'这样的相对位置。如果设置为'left'、'center'、'right'，图例会根据相应的位置自动对齐。

其次，可以设置图例每项之间的间隔（itemGap）。这个间隔可以是水平间隔或纵向间隔，取决于图例的布局方式。

还可以设置图例标记的图形的宽度和高度（itemWidth、itemHeight），以及格式化图例文本（formatter）。格式化图例文本可以使用字符串模板或回调函数来处理，根据图例的名称进行相应的格式化。

此外，还可以设置图例文字的样式，包括颜色、字体大小、字体粗细等。

综上所述，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/weixin_44123848/article/details/106382199)[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^v92^chatsearchT3_1"}}] [.reference_item style="max-width: 33.333333333333336%"]
- *2* [Echarts 中 legend属性自动换行](https://blog.csdn.net/XXXTENTACIONXXXX/article/details/130743251)[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^v92^chatsearchT3_1"}}] [.reference_item style="max-width: 33.333333333333336%"]
- *3* [Echarts legend属性使用](https://blog.csdn.net/chen__cheng/article/details/118388833)[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^v92^chatsearchT3_1"}}] [.reference_item style="max-width: 33.333333333333336%"]
[ .reference_list ]