首页 前端知识 Echarts环形图中间配置默认显示,hover到其它选项时,会切换显示当前展示。移除展示默认。

Echarts环形图中间配置默认显示,hover到其它选项时,会切换显示当前展示。移除展示默认。

2024-04-21 10:04:58 前端知识 前端哥 691 576 我要收藏

echarts环形图,存在多个配置项时,环形中间需要默认显示,选中某项配置,鼠标移入其他配置时,依然能够切换其他配置效果

<template>
<div class="home">
<div style="width: 500px; height: 500px" ref="main"></div>
</div>
</template>
<script>
import * as echarts from "echarts";
export default {
name: "HomeView",
data() {
return {
Circularchart: {
tooltip: {
trigger: "item",
},
legend: {
top: "5%",
left: "left",
orient: "vertical",
},
color: ["#F72C5B", "#7dbcca", "#e9c66d", "#6fab72", "#d853d9"],
series: [
{
type: "pie",
radius: ["40%", "70%"],
avoidLabelOverlap: false,
label: {
fontSize: 16,
lineHeight: 20,
position: "center",
formatter: (params) => {
// 设置默认显示第一个数据,函数接收一个参数,拿到所有配置项,遍历所有配置项,判断,下标为0的,第一个配置项信息,return 出去设置为默认值。
console.log(params);
if (params.dataIndex === 0) {
console.log(params.percent);
return ("{Proportiondefault|" + params.percent.toFixed(2) + "%}" + "\n{name|" + params.name + "}");
} else {
return "";
}
},
emphasis: {
formatter: (params) => { //切换非默认选项配置数据展示
if (params.dataIndex != 0) {
return ("{Proportiondefault|" + params.percent.toFixed(2) +"%}" + "\n{name|" + params.name +"}");
} else {
return;
}
},
},
rich: {
Proportion: {
//切换的数字参数配置
fontSize: 35, //显示样式大小
backgroundColor: "white", //覆盖数据的背景
},
name: {
//切换的,name名字配置
color: "#333",
fontSize: 20,
backgroundColor: "white",
},
Proportiondefault: {
fontSize: 30,
backgroundColor: "white",
},
},
},
labelLine: {
show: false,
},
data: [
{ value: 746, name: "A" },
{ value: 735, name: "B" },
{ value: 580, name: "C" },
{ value: 484, name: "D" },
{ value: 300, name: "E" },
],
},
],
},
};
},
mounted() {
let myChart = echarts.init(this.$refs.main);
myChart.setOption(this.Circularchart);
},
};
</script>
复制

效果图=> 默认显示A
在这里插入图片描述

切换hover,其他配置
在这里插入图片描述

转载请注明出处或者链接地址:https://www.qianduange.cn//article/5548.html
标签
评论
还可以输入200
共0条数据,当前/页
发布的文章

JQuery中的load()、$

2024-05-10 08:05:15

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!