echarts tooltip，设计师做了样式设计，这里我们需要使用自定义html来实现。
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'none'
},
backgroundColor: 'transparent',
borderColor: 'transparent',
formatter: function (params) {
let content = `<div class="tooltipBg">`;
console.log(params)
// 添加标题
content += `<div class="tooltipTitle">${that.name}</div>`;
// 遍历所有数据点
params.forEach(param => {
// 添加图标、名称和值
content += `<div class="tooltipItem">
<span style="display: inline-block; margin-right: 5px; border-radius: 10px; width: 10px; height: 10px; background-color: ${param.color};"></span>
<p>``{param.seriesName}</p> : <span>``{param.value}</span>
</div>`;
});
content += '</div>';
return content;
},
confine: true // 限制 tooltip 在图表内部显示
},
css部分
<style lang="scss">
.tooltipBg {
width: calc(204px - 40px);
height: calc(299px - 40px);
padding: 20px;
background: url("../assets/popbg.png");
background-size: 100% 100%;
.tooltipTitle {
font-size: 15px;
font-family: PingFang;
font-weight: 500;
color: #EBFFFF;
}
.tooltipItem {
display: flex;
justify-content: flex-start;
align-items: center;
flex-wrap: nowrap;
flex-direction: row;
align-content: flex-start;
height: 31px;
p {
font-size: 13px;
font-family: PingFang;
font-weight: bold;
color: #EBFFFF;
width: 120px;
}
span {
font-size: 15px;
font-family: DIN-Bold;
font-weight: bold;
color: #EBFFFF;
}
}
}
</style>
完整实例代码
<template>
<div class="echarts1" ref="echarts">
</div>
</template>
<script>
import * as echarts from "echarts"
export default {
name: 'echarts1',
props: {
list: {
type: Array,
default() {
return []
}
},
name: {
type: String,
default() {
return ''
}
},
index: {
type: Number,
default() {
return 0
}
},
},
data() {
return {
colorList: [
'#00A8FF',
'#00EEFF',
'#FFDB71',
'#FF9E74',
'#FF7474',
'#747BFF',
'#1A76FF',
'#DE44FF'
]
}
},
watch: {
list() {
this.drawEcharts();
},
},
mounted() {
this.drawEcharts()
},
methods: {
drawEcharts() {
var that = this
console.log(this.list)
let myChart = echarts.init(this.$refs.echarts)
window.addEventListener('resize', this.drawEcharts)
// 准备 series 数据
let seriesData = this.list.map((item, index) => ({
name: item.name,
type: 'bar',
stack: 'total',
barWidth: '100%',
itemStyle: {
normal: {
color: this.colorList[index % this.colorList.length]
}
},
data: [item.value],
label: {
show: true,
position: 'inside', // 标签位置设置为 'inside' 以在柱状图内部显示
textStyle: {
color: '#EBFFFF', // 标签文字颜色
fontSize: 13, // 字体大小
fontFamily: 'PingFang', // 字体
fontWeight: 'bold' // 字体加粗
},
formatter: '{c}' // '{c}' 将被替换为数据值
}
}));
var option = {
grid: {
containLabel: true,
left: 0,
right: 0,
top: 0,
bottom: 0,
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'none'
},
backgroundColor: 'transparent',
borderColor: 'transparent',
formatter: function (params) {
let content = `<div class="tooltipBg">`;
console.log(params)
// 添加标题
content += `<div class="tooltipTitle">${that.name}</div>`;
// 遍历所有数据点
params.forEach(param => {
// 添加图标、名称和值
content += `<div class="tooltipItem">
<span style="display: inline-block; margin-right: 5px; border-radius: 10px; width: 10px; height: 10px; background-color: ${param.color};"></span>
<p>``{param.seriesName}</p> : <span>``{param.value}</span>
</div>`;
});
content += '</div>';
return content;
},
confine: true // 限制 tooltip 在图表内部显示
},
xAxis: {
axisLine: {
show: false,
lineStyle: {
color: '#173577',
}
},
axisTick: {
show: false
},
axisLabel: {
show: false,
textStyle: {
color: 'rgba(148, 185, 212, 1)',
fontSize: 14
}
},
splitLine: {
show: false,
lineStyle: {
color: '#173577',
}
}
},
yAxis: [{
type: 'category',
inverse: true,
boundaryGap: true,
axisLabel: {
show: false,
textStyle: {
color: 'rgba(148, 185, 212, 1)',
fontSize: 14
}
},
splitLine: {
show: false
},
axisTick: {
show: false
},
axisLine: {
show: false
}
}],
series: seriesData
};
myChart.clear()
myChart.resize()
myChart.setOption(option)
},
}
}
</script>
<style lang="scss" scoped>
.echarts1 {
position: relative;
width: 100%;
height: 100%;
}
</style>
<style lang="scss">
.tooltipBg {
width: calc(204px - 40px);
height: calc(299px - 40px);
padding: 20px;
background: url("../assets/popbg.png");
background-size: 100% 100%;
.tooltipTitle {
font-size: 15px;
font-family: PingFang;
font-weight: 500;
color: #EBFFFF;
}
.tooltipItem {
display: flex;
justify-content: flex-start;
align-items: center;
flex-wrap: nowrap;
flex-direction: row;
align-content: flex-start;
height: 31px;
p {
font-size: 13px;
font-family: PingFang;
font-weight: bold;
color: #EBFFFF;
width: 120px;
}
span {
font-size: 15px;
font-family: DIN-Bold;
font-weight: bold;
color: #EBFFFF;
}
}
}
</style>
