要将 ECharts 的横向柱状图中的图例显示为纵轴上的数据

要将 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
  • 3
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值