1. 程式人生 > 實用技巧 >echart-環形圖-取消或改變滑鼠以上效果,取消環形圖滑鼠以上變大和標籤浮框顯示

echart-環形圖-取消或改變滑鼠以上效果,取消環形圖滑鼠以上變大和標籤浮框顯示

用了echart搭建完專案,專案經理說滑鼠一移上去老閃(顯示浮框資訊和環形圖變大)讓去了

這邊看了api發現竟然沒有相關文件,最後自己慢慢嘗試和參考各種api後改了,總結如下:

hoverAnimation:false

取消掉環形圖滑鼠移上去時自動放大,這個要設定在series裡才會生效,而且api沒hoverAnimation

series: [
                            {
                                hoverAnimation:false,
                                name: '狀態',
                                type: 
'pie', radius: ['34%', '46%'], x:'-45%', label: {show:false}, data: [ {value: 10, name: '電流', // selected: true,//環形圖開口
itemStyle: { color: "#a4cdee", }, }, {value: 12, name: '溫度', itemStyle: { color:
"#5490ff", }, }, {value: 1, name: '電壓', itemStyle: { color: "#a085be", }, }, ] } ]

toolTip:{show:false}:取消浮框顯示

tooltip: {//設定滑鼠移上去後會顯示資料 -黑框浮層
                    
                            show:false,//關閉滑鼠移上去後顯示浮框資訊
                            trigger: 'item',
                            formatter: '{a} <br/>{b} ({d}%)'//a:頭部標題 b:單項名稱name c:值value d:百分比
                        },

legend:{selectedMode:false,//取消標題點選後事件-這裡顯示和隱藏指定項}

legend: {
                        selectedMode:false,//取消標題點選後事件-這裡顯示和隱藏指定項
                        icon:'circle',//標題圖例的樣式--預設圓角長方體
                        width:100,//設定寬度超出就會縱向排列
                        right: 10,
                        top:60,//lengend 距頂部距離
                        itemGap : 24,//上下間隔
                        // backgroundColor:'red',//圖例背景色
                        textStyle:{//文字樣式
                            padding:[0,0,0,10],//上右下左 調節左側小圓點到文字間距
                            fontSize:22,
                            color:"#595969",
                             // lineHeight: 56,
                        }
                        // data: ['線上', '離線']
                    },

改後事件取消

改前事件: