要将 ECharts 的横向柱状图中的图例显示为纵轴上的数据,并确保这些数据在图例中呈现,通常涉及到每个类别(y 轴上的标签)都需要定义为一个单独的系列。这样,图例会自动显示所有系列名,也就是 y 轴上的所有数据。
下面提供了一个示例代码,展示如何实现这样的设置:
option = {
legend: {
orient: 'vertical',
left: 'left',
width:"auto"
},
tooltip: {
},
grid: {
left: '4%',
right: '4%',
bottom: '1%',
containLabel: true
},
xAxis: {
type: 'value',
},
yAxis: {
type: 'category',
axisLabel: {
show: false // 不显示y轴类目名称
}
},
series: [{"name":"网空战情参考-专题报告","type":"bar","barMaxWidth":"20px","data":[178],"itemStyle":{"color":"#3498db"}},{"name":"每日一译","type":"bar","barMaxWidth":"20px","data":[102],"itemStyle":{"color":"#e74c3c"}},{"name":"网空战情参考-简报","type":"bar","barMaxWidth":"20px","data":[101],"itemStyle":{"color":"#2ecc71"}},{"name":"事件分析","type":"bar","barMaxWidth":"20px","data":[71],"itemStyle":{"color":"#f1c40f"}},{"name":"流行恶意代码分析报告","type":"bar","barMaxWidth":"20px","data":[66],"itemStyle":{"color":"#9b59b6"}},{"name":"APT分析报告","type":"bar","barMaxWidth":"20px","data":[43],"itemStyle":{"color":"#1abc9c"}},{"name":"安全简讯","type":"bar","barMaxWidth":"20px","data":[37],"itemStyle":{"color":"#34495e"}},{"name":"安全漏洞预警动态","type":"bar","barMaxWidth":"20px","data":[20],"itemStyle":{"color":"#e67e22"}},{"name":"技术文献","type":"bar","barMaxWidth":"20px","data":[10],"itemStyle":{"color":"#7f8c8d"}},{"name":"新闻消息","type":"bar","barMaxWidth":"20px","data":[8],"itemStyle":{"color":"#ec7063"}}]
};
```JAVASCRIP