坐标轴,字体颜色,如下:
const option = {
tooltip: {
show: true,
trigger: 'axis',
backgroundColor: "#fff",
textStyle: {
color: "#333333",
},
axisPointer: {
type: 'shadow',
},
formatter: function (params) {
const res = {}
params.map(item => {
res.name = item.name,
res.color = item.color,
res.value = item.value,
res.ratio = parseInt(item.value * 100 / calculateData.totalArea)
})
return `<div style="background:#fff; padding:0 10px 0 5px">
<p>${res.name}</p>
<p>
<i style='display: inline-block; 10px; height: 10px; background:${res.color}; margin-right: 5px; border-radius: 50%'></i>
<span style="padding-left:4px">面积:${res.value}m<sup>2</sup></span>
</p>
<span style="padding-left:20px">占比:${res.ratio}%</span>
</div>`
},
},
xAxis: {
type: 'category',
data: dataX,
axisLabel: {
show: true,
textStyle: {
color: '#fff'
}
},
axisLine: {
lineStyle: {
type: 'solid',
color: '#0A55EB',
}
},
},
yAxis: {
type: 'value',
axisLabel: {
// formatter: '{value}',
textStyle: {
color: '#fff'
}
},
splitLine: { show: false },
axisLine: {
lineStyle: {
type: 'solid',
color: '#0A55EB',
}
},
},
series: [
{
name: '面积',
type: 'bar',
barWidth: '40%',
data: seriesDataTemp,
},
],
};