echarts柱状图只有一组数据显示图例
时间: 2023-08-23 15:15:19 浏览: 145
echarts 柱状图渐变色背景
5星 · 资源好评率100%
根据引用\[1\]和引用\[2\]的内容,你可以通过设置`series`中的`name`属性来显示图例。在你的代码中,每个柱状图都有一个`name`属性,分别是"峰"、"平"和"谷"。这些名称将被用作图例的标签。确保在Echarts的配置中设置`legend`属性为`show: true`,以确保图例显示出来。
以下是一个示例代码片段,展示了如何设置图例:
```javascript
option = {
legend: {
show: true
},
series: \[
{
name: "峰",
type: "bar",
stack: "值",
data: fengList,
itemStyle: {
color: state.getThemeConfig.curveConfig\[0\],
},
},
{
name: "平",
type: "bar",
stack: "值",
data: pingList,
itemStyle: {
color: state.getThemeConfig.curveConfig\[1\],
},
},
{
name: "谷",
type: "bar",
stack: "值",
data: guList,
itemStyle: {
color: state.getThemeConfig.curveConfig\[2\],
},
},
\],
};
```
通过以上配置,你的柱状图将会显示具有相应名称的图例。
#### 引用[.reference_title]
- *1* [ECharts柱状图图形标签间隔显示](https://blog.csdn.net/jixuziyuan/article/details/127617220)[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^v91^control_2,239^v3^insert_chatgpt"}} ] [.reference_item]
- *2* [echarts 自定义柱状图颜色,并展示图例。](https://blog.csdn.net/qq_44830966/article/details/123991912)[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^v91^control_2,239^v3^insert_chatgpt"}} ] [.reference_item]
- *3* [自定义Echarts柱状图, 一图显示多组数据](https://blog.csdn.net/weixin_40463857/article/details/126158538)[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^v91^control_2,239^v3^insert_chatgpt"}} ] [.reference_item]
[ .reference_list ]
阅读全文