两种方法： 1.自带属性，自带样式 ； 2. 自定义样式
renderBarChart () {
// let that = this
const barChart = echarts.init(document.getElementById('bar-chart'))
const barOptions = {
title: {
// text: this.selectEchartData.label.length > 32 ? this.selectEchartData.label.substr(0, 32) + '...' : this.selectEchartData.label,
textStyle: {
fontSize: 14
},
left: 'center'
},
tooltip: { // 属性自带样式
trigger: 'axis',
confine: true,
textStyle: {
fontSize: 12
}
},
grid: {
left: '2%',
right: '4%',
bottom: '4%',
containLabel: true
},
xAxis: {
triggerEvent: true, // 开启坐标轴标签响应和触发鼠标事件,自定义x轴文字样式
// type: 'category',
data: this.selectEchartData.questionResVOList.map(obj => obj.optionLabel),
axisLabel: {
formatter: function (value) {
return value.length > 7 ? value.substring(0, 4) + '...' : value
},
textStyle: {
fontSize: 12,
color: '#999999',
fontWeight: 400
},
interval: 0 // x轴文字
},
axisLine: {
lineStyle: {
color: '#E0E0E0'
}
},
axisTick: {
inside: true,
show: false
}
},
yAxis: [
{
type: 'value',
scale: true,
min: 0,
// max: (value) => { // 当数据位数不固定时,最大值向上取整
// let num = 10 ** (value.max.toString().length - 2)
// return Math.ceil(value.max / num) * num
// },
minInterval: 5,
splitLine: {
show: true,
lineStyle: {
type: 'dashed',
color: '#ddd'
}
},
axisLine: {
lineStyle: {
color: '#E0E0E0'
}
},
axisLabel: {
textStyle: {
color: '#999999'
}
},
axisTick: {
inside: true
}
}
],
series: [{
label: {
show: true, // 是否显示
position: 'top', // 数值显示的位置
textStyle: {
fontSize: 10,
color: '#333333',
fontWeight: 600
}
},
type: 'bar',
barWidth: '24px',
// barWidth: '60%',
itemStyle: {
color: function (params) {
return '#FF783D'
// return that.customColors[params.dataIndex % that.customColors.length]/
}
},
data: this.selectEchartData.questionResVOList.map(obj => obj.voteCount)
}]
}
barChart.setOption(barOptions)
// 自定义悬浮x轴文字样式
barChart.on('mouseover', 'xAxis', function (e) {
console.log(e,999);
let axisTip = document.querySelector('.axis-tip')
axisTip.innerText = e.value
axisTip.style.left = e.event.offsetX + 'px'
axisTip.style.top = e.event.offsetY + 'px'
axisTip.style.display = 'block'
})
barChart.on('mouseout', 'xAxis', function (e) {
let axisTip = document.querySelector('.axis-tip')
axisTip.innerText = ''
axisTip.style.display = 'none'
})
},
.axis-tip {
display: none;
position: absolute;
padding: 5px 5px;
font-size: 12px;
line-height: 18px;
max-width: 200px;
height: fit-content;
color: #575757;
background: #ffffff;
box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.2);
border-radius: 4px;
bottom: 0;
left: 0;
}
<div id="bar-chart" ref="barChartRef" style="width:40%;height:250px;"></div>
<div class="axis-tip"></div>
标签：textStyle,echart,悬浮,selectEchartData,value,color,柱状图,true,axisTip From： https://www.cnblogs.com/everseventh/p/17928180.html