Echarts常遇见的问题

最新推荐文章于 2026-05-04 09:06:47 发布

原创最新推荐文章于 2026-05-04 09:06:47 发布 · 2k 阅读

1 ·

本内容遵循CC 4.0 BY-SA版权协议

前端同时被 2 个专栏收录

5 篇文章

订阅专栏

echarts

1 篇文章

订阅专栏

这篇博客总结了Echarts在使用过程中遇到的一些问题，包括rich文本在legend中不显示的原因，柱状图数值无法在X轴下方适当位置显示，柱状图的重叠与堆叠处理，以及折线图legend名称缺失的问题。通过分析原因并提供解决方案，帮助开发者更好地理解和解决Echarts图表显示异常的状况。

1、使用rich,legend里面的标签无法显示

legend:{
				formatter: function (name){
					var data=pieChartData;
					var total = 0;
					var target;
					var arr = [];
					for (var i = 0, l = data.length; i < l; i++) {
						total += data[i].value;
						if (data[i].name == name) {
							target = data[i].value;
							arr.push('{a|'+name+'}','{b|'+((target))+'}');
						}
					}
					return arr.join('\n')
				},
				bottom:0,
				left:'center',
				textStyle:{
					rich:{
						a:{
							fontSize:16,
							verticalAlign:'top',
							align:'center',
							color: '#FFFFFF',
							padding:[0,15,28,0]
						},
						b:{
							fontSize:14,
							align:'center',
							color: '#FFFFFF',
							padding:[0,15,0,0],
							lineHeight:25
						}
					}
				}
			},

原因1：被页面的背景颜色覆盖了，可以把案例放到官网测试

原因2：当前使用的版本不支持rich，最新的版本：

<script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>

注意：必须要引入jQuery

效果图：

2、柱状图中数值无法显示在X轴下方（有距离的显示）

3、echarts柱状图多柱重叠和堆叠处理

option = {
    title: {
        text: '世界人口总量',
        subtext: '数据来自网络'
    },
    tooltip: {
        trigger: 'axis',
        axisPointer: {
            type: 'shadow'
        }
    },
    legend: {
        data: ['2011年', '2012年']
    },
    grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
    },
    yAxis: {
        type: 'value',
        boundaryGap: [0, 0.01]
    },
    xAxis: {
        type: 'category',
        data: ['巴西', '印尼', '美国', '印度', '中国', '世界人口(万)']
    },
    series: [
        {
            name: '2011年',
            type: 'bar',
           stack:'堆叠',
            data: [1111, 2222, 3333, 4444, 5555, 6666]
        },
        {
            name: '2012年',
            type: 'bar',
        stack:'堆叠',
            data: [19325, 23438, 31000, 121594, 134141, 681807]
        }
    ]
};

option = {
    title: {
        text: '世界人口总量',
        subtext: '数据来自网络'
    },
    tooltip: {
        trigger: 'axis',
        axisPointer: {
            type: 'shadow'
        }
    },
    legend: {
        data: ['2011年', '2012年']
    },
    grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
    },
    yAxis: {
        type: 'value',
        boundaryGap: [0, 0.01]
    },
    xAxis: {
        type: 'category',
        data: ['巴西', '印尼', '美国', '印度', '中国', '世界人口(万)']
    },
    series: [
        {
            name: '2011年',
            type: 'bar',
           barGap: '-100%',
            data: [1111, 2222, 3333, 4444, 5555, 6666]
        },
        {
            name: '2012年',
            type: 'bar',
        
            data: [19325, 23438, 31000, 121594, 134141, 681807]
        }
    ]
};

堆叠效果图：

重叠效果图：

4、折线图legend名称没出来

原因所在：

option = {
			backgroundColor: '#082D46',
			color: ['#3398DB'],
			tooltip: {
				trigger: 'axis',
				axisPointer: {
					type: 'cross',
					crossStyle: {
						color: '#999'
					}
				}
			},
			toolbox: {
				feature: {
					dataView: {show: true, readOnly: false},
					magicType: {show: true, type: ['line', 'bar','bar']},
					restore: {show: true},
					saveAsImage: {show: true}
				}
			},
			legend: {
				data: [
					{
						name:'未加密数',
						textStyle: {
							color: 'red'          // 图例文字颜色
						}
					},
					{
						name:'已加密数',
						icon : 'rect',
						textStyle: {
							color: '#000'          // 图例文字颜色
						}
					},
					{
						name:'终端加密率1（%）',
						textStyle: {
							color: '#000'          // 图例文字颜色
						}
					}
				],
				bottom:0,
				left:'left',
				orient: 'vertical'
			},
			xAxis: [
				{
					type: 'category',
					data: name,
					axisLabel: {
						show: true,
						textStyle: {
							color: '#fff'
						}
					},
					axisPointer: {
						type: 'shadow'
					}
				}
			],
			yAxis: [
				{
					type: 'value',
					name: '单位（台）',
					min: 0,
					max: 4000,
					interval: 1000,
					axisLabel: {
						formatter: '{value}',
						textStyle: {
							color: '#FFFFFF'
						}
					},
					splitLine: {
						lineStyle: {
							// 使用深浅的间隔色
							color: ['#FFFFFF']
						}
					},
					nameTextStyle: {
						color: ['#FFFFFF']
					},
					axisLine:{
						lineStyle:{
							color:'#FFFFFF',
							width:1,//这里是为了突出显示加上的
						}
					}
				},
				{
					type: 'value',
					name: '未加密数',
					axisLabel: {
						formatter: '{value}',
						textStyle: {

						}
					},
					splitLine: {
						lineStyle: {
							// 使用深浅的间隔色
							color: ['#082D46']
						}
					},
				},
				{
					type: 'value',
					name: '终端加密率',
					min: 0,
					max: 100,
					interval: 20,
					axisLabel: {
						formatter: '{value}',
						textStyle: {
							color: '#BFCDD7'
						}
					},
					splitLine: {
						lineStyle: {
							// 使用深浅的间隔色
							color: ['#082D46']
						}
					},
					nameTextStyle: {
						color: ['#0087ED']
					},
					axisLine:{
						lineStyle:{
							color:'#',
							width:1,//这里是为了突出显示加上的
						}
					}
				}
			],
			series: [
				{
					name: '已加密数',
					type: 'bar',
					stack:'堆叠',
					data: data,
					barWidth : 30,
					color:'#1B86D1',
					itemStyle: {
						normal: {
							label: {
								show: true,		//开启显示
								position: 'bottom',	//在下方显示
								textStyle: {	    //数值样式
									color: 'white',
									fontSize: 26
								}
							}
						}
					}
				},
				{
					name: '未加密数',
					type: 'bar',
					barWidth : 30,
					stack:'堆叠',
					data: data2,
					/*itemStyle: {
						normal: {
							color: function(params) {
								var colorList = ["white"];
								return colorList[params.dataIndex]
							}
						}
					},*/
					itemStyle: {
						normal: {
							label: {
								show: true,		//开启显示
								position: 'bottom',	//在下方显示
								textStyle: {	    //数值样式
									color: 'white',
									fontSize: 26
								}
							}
						}
					},
					color:'red',
				},
				{
					name: '终端加密率（%）',
					type: 'line',
					yAxisIndex: 1,
					data: data3,
					color:'#1B86D1',
					itemStyle: {
						normal: {
							label: {
								show: true,		//开启显示
								position: 'bottom',	//在下方显示
								textStyle: {	    //数值样式
									color: 'white',
									fontSize: 26
								}
							}
						}
					}
				},

			]
		};

series 里面的name值 要和 legend 中data 里面的name对应