echarts 饼状图颜色渐变以及tooltip自定义样式，tooltip使用自定义html
echarts组件代码
<template>
<div class="echartsBody">
<div class="echartsBody1" ref="echarts1"></div>
<div class="echartsBody2">
<div class="echartsBody2Inner">
<div class="echartsTitle">{{ total }}</div>
<div class="echartsDesc">{{ title }}</div>
</div>
</div>
</div>
</template>
<script>
import * as echarts from "echarts"
export default {
name: 'echarts1',
components: {},
data() {
return {}
},
props: {
list: {
type: Array,
default() {
return [];
}
},
title: {
type: String,
default() {
return '测试统计';
}
},
total: {
type: String,
default() {
return 0;
}
},
},
watch: {
list() {
this.drawEcharts()
},
},
mounted() {
var that = this;
const viewElem = document.body;
// 监听窗口变化,重绘echarts
const resizeObserver = new ResizeObserver(() => {
setTimeout(() => {
that.drawEcharts();
}, 300)
});
resizeObserver.observe(viewElem);
},
computed: {
colorList: function () {
var that = this;
var colorList = []
that.list.forEach((type) => {
var color = new echarts.graphic.LinearGradient(0, 0, 1, 1, [{
offset: 0,
color: type.color1
}, {
offset: 1,
color: type.color2
}])
colorList.push(color)
});
return colorList
}
},
methods: {
drawEcharts() {
var that = this
let myChart = echarts.init(this.$refs.echarts1)
var colors = this.colorList
var data = []
that.list.forEach((type) => {
if (type.checked) {
var datas = {
...type,
itemStyle: {
normal: {
borderColor: new echarts.graphic.LinearGradient(0, 0, 1, 1, [{
offset: 0,
color: type.color1
}, {
offset: 1,
color: type.color2
}]),
}
}
}
data.push(datas)
}
});
var option = {
color: colors,
tooltip: {
trigger: 'item',
backgroundColor: 'rgba(0, 0, 0, 0)', // 设置 tooltip 背景色为透明
borderColor: 'rgba(0, 0, 0, 0)',
opacity: 1,
shadowColor: 'rgba(0, 0, 0, 0)', // 设置阴影颜色为透明
shadowBlur: 0, // 设置阴影模糊度为0，即无阴影
// 使用自定义的 formatter 函数
formatter: function (params) {
console.log(params)
// 获取当前项的颜色
var color = params.data.color1;
// 或者如果颜色是渐变色，你可能需要从params.data中获取color1和color2
// var color1 = params.data.color1;
// var color2 = params.data.color2;
// 使用获取到的颜色设置nums和line的样式
return `
<div class="tooltipWin">
<h4 class="tooltipTitle">测试统计</h4>
<div class="tooltipDesc">
<div class="line" style="background-color: ${color};"></div>
<span>${params.name}</span>
<p><span class="nums" style="color: ``{color};">``{params.value}</span>个</p>
</div>
</div>
`;
}
},
legend: {
show: false,
orient: 'horizontal',
left: 'center',
bottom: '0',
itemWidth: 16,
itemHeight: 12,
itemGap: 30,
icon: 'rect',
textStyle: {
color: 'rgba(255, 255, 255, 1)',
fontSize: '14'
},
data: data
},
series: [
{
name: '测试执行统计',
type: 'pie',
// roseType: 'area',
center: ['50%', '50%'],
radius: ['35%', '65%'],
// borderCap: 'round',
label: {
show: false,
normal: {
show: false,
fontSize: 14,
color: '#92B2D7'
}
},
labelLine: {
show: false,
length: 1,
length2: 10
},
data: data
},
]
}
myChart.clear()
myChart.resize()
myChart.setOption(option)
},
}
}
</script>
<style lang="scss" scoped>
.echartsBody {
position: relative;
width: 100%;
height: calc(100% - 0px);
background: url("../assets/bg.png") center center no-repeat;
display: flex;
justify-content: center;
align-items: center;
flex-wrap: nowrap;
flex-direction: row;
align-content: flex-start;
.echartsBody1 {
position: relative;
width: 100%;
height: calc(100% - 0px);
}
.echartsBody2 {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: calc(100% - 0px);
display: flex;
justify-content: center;
align-items: center;
flex-wrap: nowrap;
flex-direction: column;
align-content: flex-start;
pointer-events: none;
.echartsBody2Inner {
display: flex;
width: 86px;
height: 86px;
border-radius: 50%;
border: 1px solid rgba(#00D1FF, 0.5);
justify-content: center;
align-items: center;
flex-wrap: nowrap;
flex-direction: column;
align-content: flex-start;
}
.echartsTitle {
font-size: 24px;
font-family: YouSheBiaoTiHei, YouSheBiaoTiHei;
font-weight: 400;
line-height: 28px;
background: linear-gradient(360deg, #1EAEFF 0%, #D3FFFF 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.echartsDesc {
font-size: 14px;
font-family: PingFang SC, PingFang SC;
font-weight: 500;
color: #B8CCFF;
}
}
}
</style>
<style lang="scss">
.tooltipWin {
width: 154px;
height: 70px;
background: rgba(#05364d, 0.7);
opacity: 1;
border: 1px solid #5896b3;
.tooltipTitle {
font-size: 14px;
font-family: PingFang SC, PingFang SC;
font-weight: 500;
color: #0BF5FF;
padding-left: 10px;
padding-top: 10px;
}
.tooltipDesc {
display: flex;
justify-content: flex-start;
align-items: center;
flex-wrap: nowrap;
flex-direction: row;
align-content: flex-start;
padding-left: 10px;
padding-top: 10px;
.line {
width: 4px;
height: 10px;
background: #FFB600;
border-radius: 0px 0px 0px 0px;
opacity: 1;
margin-right: 7px;
}
span {
font-size: 14px;
font-family: PingFang SC, PingFang SC;
font-weight: 500;
color: #C9EFFF;
}
p {
font-size: 14px;
font-family: PingFang SC, PingFang SC;
font-weight: bold;
color: #fff;
margin-left: 20px;
}
}
}
</style>
