echarts 图例有数值但是柱子不显示问题

如图所示在做echarts图表时发现柱状图有数值,但是柱子没展示,后来发现这个没展示的数值是最小值和左侧y轴的最小值保持持平了,所以没有展示出来。

将下图中设置y轴最小值为0就可以了

	yAxis: [{
					type: 'value',
					name: '产出',
					min: 0
					max: 'dataMax',

					axisLabel: {
						formatter: '{value}'
					}
				}
				}],

修改后,如图所示,最小值设置成0就会展示出来

ECharts 是一款开源的可视化图表库,它提供了丰富多样的图表类型,其中包括柱状图。而叠加柱状图则是柱状图的一种变体,可以同时展示两个或多个数据系列的数值。 要在 ECharts 中创建叠加柱状图,首先需要创建一个柱状图实例,并指定其类型为柱状图。然后,通过配置项设置数据的来源和样式等属性。 一个简单的叠加柱状图的代码如下所示: ```javascript // 创建柱状图实例 var myChart = echarts.init(document.getElementById('chart')); // 配置项 var option = { // 柱状图类型 series: [ { type: 'bar', // 第一个柱子数据 data: [120, 200, 150, 80, 70, 110], // 柱子的样式 itemStyle: { color: 'blue' } }, { type: 'bar', // 第二个柱子数据 data: [100, 180, 160, 90, 80, 100], // 柱子的样式 itemStyle: { color: 'red' } } ] }; // 将配置项设置到柱状图实例中 myChart.setOption(option); ``` 在这个代码中,我们创建了一个 ID 为 `chart` 的元素作为柱状图的容器。然后,通过配置项中的 `series` 属性设置了两个柱子数据和样式等信息。第一个柱子数据是 `[120, 200, 150, 80, 70, 110]`,颜色为蓝色;第二个柱子数据是 `[100, 180, 160, 90, 80, 100]`,颜色为红色。最后,通过 `setOption` 方法将配置项设置到柱状图实例中。 通过以上代码,就能够实现两个柱子叠加在一起的柱状图效果。当然,你也可以根据自己的需求进一步调整配置项,如调整柱子的宽度、添加图例等。
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Imency

我想喝瓶冰可落

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值