背景:最近做了一个多维的柱状图,数据差值过大,导致最小值无法选中,用户希望优化一下。
用户诉求1:单个柱子 悬浮显示tooltip,不要整体悬浮
解决:设置tooltip: { trigger: 'item'},设置成item,则根据图形触发,但axisPointer不生效,即无法实现悬浮有阴影的效果
用户诉求2:最后那个数据太小,悬浮和点击时很难选中,要求做到点击空白区域
解决:查询资料后发现myChart.getZr().on('click',function (params) {})可以设置空白区域,但无法获取具体点击的维度信息,仅限于单维可用。经过思考,用户的痛点在于数据太小无法选中,那么我只需要把最小值设置为可轻易选中的状态就解决了。因此想到了yAxis. type = 'log'用对数坐标来展示
即设置yAxis: { type: 'log'},并在series每个中添加barMinHeight: 10,
问题出现了,数据差别很大的值却很相近高度,且Y轴的初始值为1而非0
(1)Y轴初始值问题,设置label自定义
axisLabel: {
formatter: (params) => {
return params === 1 ? 0 : params;
},
},
(2)数据相差很大高度相同,设置对数的基数 min:1, logBase:3,这个基数是可以随时调整的。
完整代码:
option = {
color: ['#003366', '#006699', '#4cabce', '#e5323e'],
tooltip: {
trigger: 'item',
axisPointer: {
type: 'shadow'
}
},
legend: {
data: ['Forest', 'Steppe', 'Desert', 'Wetland']
},
xAxis: [
{
type: 'category',
axisTick: {show: false},
data: ['2012', '2013', '2014', '2015', '2016']
}
],
yAxis: [
{
type: 'log',
min:1,
logBase:3,
axisLabel: {
formatter: (params) => {
return params === 1 ? 0 : params;
},
},
}
],
series: [
{
name: 'Forest',
type: 'bar',
barMinHeight: 10,
data: [130, 186, 39, 32, 90]
},
{
name: 'Steppe',
type: 'bar',
barMinHeight: 10,
data: [2, 40, 17, 15, 4]
},
{
name: 'Desert',
type: 'bar',
barMinHeight: 10,
data: [4, 4, 15, 12, 8]
},
{
name: 'Wetland',
type: 'bar',
barMinHeight: 10,
data: [1, 2, 3, 4, 5]
}
]
};
总结:分析问题,找到问题症结,多查看文档,echarts功能来说还是很全面的。当Y轴为value时,是按所有取值来展示,导致数据太小的会占比很小,呈现上疏下密;当Y轴是log时,会呈现对数增长的效果,会呈现上密下疏的效果,主要看客户的需求侧重点。