echarts -环形图高亮时中间文字设置（三）

最新推荐文章于 2025-07-11 10:20:42 发布

yb305小白

最新推荐文章于 2025-07-11 10:20:42 发布

阅读量4k

点赞数

CC 4.0 BY-SA版权

分类专栏： echarts3 文章标签： echarts3 环形图高亮动画

本文链接：https://blog.youkuaiyun.com/yb305/article/details/88895478

echarts3 专栏收录该内容

11 篇文章

订阅专栏

本文介绍了一个使用ECharts实现的设备报警率动态展示案例。通过饼状图的形式，展示了不同设备的报警数量及其在总报警数中的占比，并实现了图表中各设备数据项的自动循环高亮效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

var myChart4 = null;
var currentIndex = -1;
var chart4Interval;
var data = [{"areaId":null,"areaName":"xxxx轮胎有限公司","deviceCode":"dht5084416002","deviceName":"5-1-MN002","alarmCount":"1385","allCount":"20146","alarmRate":"6.87"},{"areaId":null,"areaName":"xxxx化工公司","deviceCode":"ccc5087717013","deviceName":"废气总排口","alarmCount":"1244","allCount":"14928","alarmRate":"8.33"}];

function deviceAlarmRateOfTotal(data){
        if(myChart4!=null){
            myChart4.dispatchAction({
                type: 'downplay',
                seriesIndex: 0,
                dataIndex: currentIndex
            });
            myChart4.dispatchAction({
                type: 'hideTip'
            });
        }
        currentIndex = -1;
        if(chart4Interval!=null){
            clearInterval( chart4Interval);
        }
        myChart4 = echarts.init(document.getElementById("chart_msc4"));
        var arry = [];
        for(var i=0;i<data.length;i++){
            arry[i] = {value:data[i].alarmCount, name:data[i].deviceName};
        }
        var option = {
            tooltip: {
                trigger: 'item',
                formatter: function(params,ticket,calback){
                    var str = '<div  style="text-align:center;width:5em;color:#fff;background:transparent;border-color:#0e335f;margin:-5px; transition: all 2s;z-index:100000000;" id="toolTipBox" >'+
                       '<p style="font-size:size*1.2;margin:0px;font-weight:bold;">'+params.percent+'%</p>'+
                        '<p style="font-size:size*0.8;margin:0px 0px 0px 0px; color:#fff">'+params.name+'</p></div>';
                 
                    return str;
                },
                position:function(point,params,dom,rect,size){
                    var marginW = Math.ceil(size.contentSize[0]/2);
                    var marginH = Math.ceil(size.contentSize[1]/2);
                    dom.style.marginLeft = "-" + marginW + 'px';
                    dom.style.marginTop = '-' + marginH + "px";
                    return ['50%','50%'];

                },
                alwaysShowContent:true,
                backgroundColor:"transparent",
                textStyle:{
                    fontSize:size,
                    color:'#0e335f'
                }
            },
            color:['#234591','#90ac45',"#24feb4",'#1bb2d8','#066660','#88b0bb',"#2b65bc","#75a0e1"],
            series: [
                {
                    name: '设备报警占比',
                    type: 'pie',
                    center: ['50%', '50%'], // 饼图的圆心坐标
                    radius: ['70%', '80%'],
                    avoidLabelOverlap: false,
                    label: {
                        normal: {
                            show: false,
                            position: 'center'
                        },
                        emphasis: {
                            show: false,
                            textStyle: {
                                fontSize: 10,
                                color:"#0e335f"
                            }
                        }
                    },
                    labelLine: {
                        normal: {
                            show: false
                        }
                    },
                    data:arry.slice(0,15)
                }
             ]
        };
        myChart4.setOption(option,true);

        chart4Interval =  setInterval(function(){
            var dataLength= option.series[0].data.length;
            // 取消之前高亮的图形
            myChart4.dispatchAction({
                type: 'downplay',
                seriesIndex: 0,
                dataIndex: currentIndex
            });
            currentIndex = (currentIndex + 1) % dataLength;
            // 高亮当前图形
            myChart4.dispatchAction({
                type: 'highlight',
                seriesIndex: 0,
                dataIndex: currentIndex
            });
            // 显示 tooltip
            myChart4.dispatchAction({
                type: 'showTip',
                seriesIndex: 0,
                dataIndex: currentIndex
            });

            if(currentIndex>dataLength){
                currentIndex = -1;
            }

            $("#toolTipBox").animate({},function(){
                $("#toolTipBox").css({'height':'38px','transform':'rotate(360deg)'});
            });
        }, 5000);
    }