I have this code, where I tried to hover over the first gauge needle to get a .popover({…}) object:
<head>
<script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/5.3.0/echarts.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<title>Gauge Chart</title>
</head>
<button id='btn1'>
Let's
</button>
<input id='slider1' type='range' value='34' min='0' max='100' step='.01'>
<input id='slider2' type='range' value='89' min='0' max='100' step='.01'>
<div id='chartid1' style='width:390px; height: 410px;'></div>
<script>
const chart1 = echarts.init(document.getElementById('chartid1'));
function update1(value1, value2) {
option = {
series: [{
type: 'gauge',
min: 0,
max: 100,
splitNumber: 10,
detail: {
fontFamily: 'Lato',
fontSize: 14,
borderWidth: 1,
borderColor: '#020202',
borderRadius: 5,
width: 32,
height: 20
},
data: [{
value: value1,
name: 'False',
itemStyle: {
color: '#dd4b50'
},
title: {
offsetCenter: ['-20%', '20%']
},
detail: {
offsetCenter: ['-20%', '36%'],
backgroundColor: '#dd4b50',
color: '#f2f2f2'
}
},
{
value: value2,
name: 'True',
itemStyle: {
color: '#3a9e4b'
},
title: {
offsetCenter: ['20%', '20%']
},
detail: {
offsetCenter: ['20%', '36%'],
color: '#f2f2f2',
backgroundColor: '#3a9e4b'
}
}
]
}]
};
chart1.setOption(option);
}
function update2() {
let value1 = Number($('#slider1').val());
let value2 = Number($("#slider2").val());
update1(value1, value2);
}
update2();
/// clickable
chart1.on('mouseenter', {dataIndex:0}, function(params) {
$(this).popover({
html: true,
sanitize: false,
title: 'Title ',
content: 'This a text',
trigger: 'hover',
placement: 'top',
container: 'body'
})
})
</script>I need to hover and get a .popover. I know I could use tooltip:{...}, but for a specific case, I need to configure a .popover. I tried to adjust the code above with mychart1.on(... but it didn’t work. I added the CDN of all the code requirements.