Echarts柱形图中当图例名称和X轴刻度名称一样时图例无法显示


let legendData = ['医师数', '技师数'];
let myChart = echarts.init($("#row4_col1")[0]);
myChart.setOption({
	title: {
		text: ''
	},
	legend: {
		show: true,
		data: [
			{
				name: legendData[0],
				textStyle: {
					backgroundColor: "green",
					padding: 4,
					color: "white"
				}
			},
			{
				name: legendData[1],
				textStyle: {
					backgroundColor: "orange",
					padding: 4,
					color: "white"
				}
			}
		]
	},
	tooltip: {
		show:  true,
		trigger: 'axis'
	},
	xAxis: {
		type: 'category',
		nameTextStyle: {
			align: 'center'
		},
		data: legendData
	},
	yAxis: {
		type: 'value',
		min: 0.00,
		max: 1.00,
		interval: 0.10,
		// data: [0.9000, 0.9200, 0.9400, 0.9600, 0.9800, 1.0000],// 只有type为category时才有效
		axisLabel: {
			formatter: function (value, index) {
				return value.toFixed(2);
			}
		}
	},
	series: [
		{
			type: 'bar',
			data: [
				{value: 0.68, itemStyle: {color: "green"}},
				{value: 0.96, itemStyle: {color: "orange"}}
			],
			barWidth: 40,
			label: {
				show: true,
				position: 'top',
				formatter: function (params) {
					return params.value.toFixed(2);
				}
			},
			tooltip: {
				formatter: function (params, ticket, callback) {
					return params.seriesName + "<br/>" + params.name + ":" + params.value.toFixed(2);
				}
			}
		}
	]
});
图一    就差图例不显示的效果
图二    图例是有了但是柱形图X轴位置错了的效果

一般图例能显示的前提是legend中的name与series中的name保持一致,且与X轴刻度名称不相同。而目前的情况是图例名称也就是legend中的name与X轴刻度名称相同,就算与series中的name保持一致,图例依然不显示,也就是源码展现出来的图一的效果。图二还不如图一。

注:基于Echarts 4.9.0版本。

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值