一 柱状图
1.去掉刻度和轴线
效果图:

代码:
xAxis: {
show: false, // 是否显示轴
},
yAxis: {
axisLine: {
show: false, // 线
},
axisTick: {
show: false, // 刻度
},
},
2.值显示在图形上&不同颜色
series: [
{
barWidth: '70%', // 宽度
label: {
normal: {
position: 'insideLeft', // 内含,靠左
},
},
itemStyle: {
normal: {
color: function(params) {
return that.colorList[params.dataIndex]; // 显示不同颜色
},
},
},
},
],
3.文字超出截取
效果图:

代码:
xAxis: {
axisLabel: {
formatter: (e) => e.replace(/(.{4})/g, '$1\n'), // 4个字就换行 {}一般用来表示匹配的长度
},
},
本文详细介绍如何使用ECharts去除柱状图的刻度和轴线,实现数据值直接显示在柱子上,并采用不同颜色区分,同时解决长标签文字超出显示的问题。通过具体代码实例,帮助读者掌握图表美化的方法。
4万+

被折叠的 条评论
为什么被折叠?



