Effect
example code
<template>
<div class="echart-app">
<div id="main"></div>
<p class="num top1">80.09%</p>
<p class="num top2">64.34%</p>
<!-- 数据 -->
<div class="text">
<p class="p1">数据1 xxxxxx</p>
<p class="p2">数据2 xxxxxx</p>
</div>
</div>
</template>
<script>
export default {
mounted(){
this.into()
},
methods:{
into(){
var chartDom = document.getElementById('main');
var myChart = this.$echarts.init(chartDom);
var option;
option = {
color: ["#003366", "#006699", "#4cabce", "#e5323e"],
title: {
text: '标题'
},
legend: {
},
polar: {
radius: [90, '80%']
},
angleAxis: {
show:false,
max: 110,
startAngle: 90
},
radiusAxis: {
type: 'category',
},
tooltip: {
show: false
},
series: [
{
type: 'bar',
data: [
{
value: 100,
itemStyle: {
color: '#a90000'
}
},
{
value: 100,
itemStyle: {
color: '#006699'
}
}
],
coordinateSystem: 'polar',
}
]
};
option && myChart.setOption(option);
}
}
}
</script>
<style lang="scss" scoped>
.echart-app{
position: relative;
#main{
width: 300px;
height: 300px;
position: relative;
}
.num{
position: absolute;
left: 98px;
font-size: 14px;
}
.top1{
top:13px
}
.top2{
top:28px
}
.text{
font-size: 14px;
position: absolute;
right: 0;
bottom: 0;
.p1::before{
content: '';
position: absolute;
top:20px;
left: -10px;
width: 8px;
height: 8px;
background-color: red;
border-radius: 4px;
}
.p2::before{
content: '';
position: absolute;
top:54px;
left: -10px;
width: 8px;
height: 8px;
background-color: blue;
border-radius: 4px;
}
}
}
</style>