使用场景:一般使用饼图会有两个数据,且两个数据鼠标指着会有相应的提示,以下的使用场景是展示车辆的出租率,只需要百分比这一个数,且另外个数的tooltip也需要隐藏
<template>
<div ref="rentout" class="rentout">
</div>
</template>
<script setup lang="ts">
import { onMounted, ref, computed } from "vue";
import * as echarts from "echarts";
import { reqMonthRentalRate } from '/@/api/echarts/echarts'
import { useRouter, useRoute } from 'vue-router'
const router = useRouter()
const route = useRoute()
const rentout = ref()
// 获取的月出租率
const finallyData = ref()
// 其他
const others = computed(() => {
return 1 - finallyData.value
})
onMounted(
async () => {
await getMonthRentalRate()
await init()
},
)
const getMonthRentalRate = async () => {
let result = await reqMonthRentalRate()
// 保留两位小数
finallyData.value = Math.round(result.slice(-1)[0].rentalRate * 100) / 100
}
const transformFontSize = (fontsize) => {
// 获取屏幕可视区宽度
const width = document.body.clientWidth
const ratio = width / 1920
// 取下整
return fontsize * ratio
}
const init = () => {
var myChart = echarts.init(rentout.value);
let option = {
name: '出租',
tooltip: {
trigger: 'item',
formatter: "{b} : {d}%"
},
series: [
{
name: '出租',
type: 'pie',
radius: ['65%', '80%'],
color: ["#0e587e", "#fdaf46"],
label: {
normal: {
position: 'inner',
show: false,
}
},
data: [
{ name: '其他', value: others.value },
{ name: '出租率', value: finallyData.value, selected: true, label: { show: true, fontSize: transformFontSize(20), position: 'center', } },
],
itemStyle: {
normal: {
label: {
show: true,
position: 'center',
//formatter: '{b} : {c} ({d}%)' //带当前图例名 + 百分比
formatter: '{d}%\n{b}',//只要百分比
fontSize: transformFontSize(20),
color: '#fdaf46',
},
labelLine: { show: true }
}
},
tooltip: {//出租率才提示
formatter(params) { //格式化鼠标移上去显示内容样式
if (params.name == '出租率') {
return params.name + params.percent + '%';
}
},
},
}
]
}
window.onresize = function () { myChart.resize(); }
myChart.setOption(option);
}
</script>