Recently, I have been working on chart-related requirements, and I use echarts to draw charts.
I encountered a rather tricky point today, which is the overlap and comparison of two histograms. The design diagram designed the color of a certain histogram to be lighter, because when the echarts histogram itself hovers over the column, there will be a In the highlighted state , the drawn graphic itself looks like this:
When the mouse hovers up, because the background color of the budget pillar is designed to be relatively forward, when the mouse hovers, the prompt is displayed normally, but when it is highlighted by echarts itself, the pillar is invisible:
Because it affects the effect of the chart, I want to turn off the highlighting state of echarts. After checking the documentation, I found that echarts provides us with attributes to control whether the highlighting is displayed:
Just set series.emphasis.disabled to true to turn off highlighting when hovering.
option = {
series: [
{
name: '预算数据',
type: 'bar',
barWidth: '60%',
color: '#EAF6FE',
emphasis: {
disabled: true,
focus: 'none'
},
data: [100, 520, 200, 350, 400, 370, 260]
},
{
name: '实际数据',
type: 'bar',
barWidth: '60%',
color: '#60BBFD',
barGap: '-100%',
emphasis: {
disabled: true,
focus: 'none'
},
data: [10, 52, 200, 334, 390, 330, 220]
}
]
};
After configuring this property, when the mouse moves over the column, the chart will not be affected and can be viewed normally.
But one thing to note is that this attribute is only supported by versions after 5.3.0 . If configured in versions before 5.3.0, it will not take effect! Therefore, if it is a version before 5.3.0, you can choose to contact the UI to modify the color of the chart or upgrade the echarts version of your project.