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

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

2024-04-21 10:04:58 前端知识 前端哥 666 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
标签
评论
发布的文章

CSS(8)空间转换 动画

2024-04-29 12:04:29

CSS介绍(4)--背景属性

2024-04-29 12:04:26

Web学习记录---CSS(1)

2024-04-29 12:04:17

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