以下是一个例子,演示如何设置极坐标系中 tooltip 文本的样式:
option = {
polar: {
center: ['50%', '50%'],
radius: '80%'
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross'
},
textStyle: {
color: 'white', // 文本颜色
fontSize: 14, // 文本字号
fontFamily: 'Arial, sans-serif' // 字体
// 其他文本样式属性
},
formatter: function(params) {
var result = params[0].name + '<br>';
params.forEach(function(item) {
result += item.seriesName + ': ' + item.value + '<br>';
});
return result;
}
},
angleAxis: {
type: 'value',
startAngle: 0
},
radiusAxis: {
min: 0
},
polar: {
center: ['50%', '50%'],
radius: '80%'
},
series: [{
type: 'bar',
data: [2, 1, 3, 4],
coordinateSystem: 'polar',
name: 'A',
stack: 'a'
}, {
type: 'bar',
data: [5, 1, 2, 6],
coordinateSystem: 'polar',
name: 'B',
stack: 'a'
}, {
type: 'bar',
data: [1, 2, 3, 4],
coordinateSystem: 'polar',
name: 'C',
stack: 'a'
}],
indicator: [
{ text: '指示器1', max: 5 },
{ text: '指示器2', max: 5 },
{ text: '指示器3', max: 5 },
{ text: '指示器4', max: 5 }
]
};
在上述例子中,通过在 textStyle 属性中设置颜色、字号、字体等属性,可以控制 tooltip 文本的样式。你可以根据需要调整这些属性以满足你的设计需求。
转载请注明出处:http://www.zyzy.cn/article/detail/5238/ECharts