I've integrated echart () into my Vue.js application, and I'm attempting to personalize the tooltip on a ring chart. However, I'm facing challenges in achieving this customization. My goal is to show my own JSON data in the tooltip when hovering over a specific color.
HTML code:
<ve-ring :data="OptionRingChart" :settings="chartSettings"></ve-ring>
Javascript code:
chartSettings: {
itemStyle: {
normal: {
color: function (params) {
var colorList = [
'red', 'lightgreen'
];
return colorList[params.dataIndex]
}
}
},
label: {
normal: {
show: false
}
},
tooltip: {
show: true,
trigger: 'item',
position: ['35%', '32%'],
backgroundColor: 'implements',
textStyle: {
color: '#000000',
fontStyle: 'normal',
fontWeight: 'normal',
fontFamily: 'sans-serif',
fontSize: 55,
},
},
},
OptionRingChart: {
color: ['green', 'red'],
columns: ['name', 'test'],
rows: [
{ 'name': 'D', 'test': 1 },
{ 'name': 'C', 'test': 2 }
],
},