摘要：今天要用到的理論在前兩篇都講過，如果你錯(cuò)過了前兩篇，你應(yīng)該先看看。但是我們可否用生成一個(gè)圖，自己為其寫一個(gè)呢答案是肯定的。但一切的一切前提是，要支持單軸輪播，這個(gè)圖只有一個(gè)系列。

今天要用到的理論在前兩篇都講過，如果你錯(cuò)過了前兩篇，你應(yīng)該先看看。
從0開始寫一個(gè)支持單軸輪播的雷達(dá)圖之首篇
從0開始寫一個(gè)支持單軸輪播的雷達(dá)圖之中篇

通過前面我們自己實(shí)現(xiàn)了一個(gè)Radar圖，并對其實(shí)現(xiàn)了單軸輪播和hover，我們已經(jīng)明白了其中的坐標(biāo)變換，在工作中，我們用自己寫的雷達(dá)圖來做產(chǎn)品的可能性不大，畢竟精力有限，而且和Echarts的圖表相比，展示效果和魯棒性都沒法比。但是我們可否用Echarts生成一個(gè)radar圖，自己為其寫一個(gè)tooltip呢,答案是肯定的。
但一切的一切前提是，要支持單軸hover輪播，這個(gè)Radar圖只有一個(gè)系列。其實(shí)現(xiàn)的核心思想：通過實(shí)例化Echarts對象的option，我們可以獲取畫布大小，獲取標(biāo)簽和值，生成坐標(biāo)系，算出要hover點(diǎn)的坐標(biāo)，然后添加上面說的hover事件和自動(dòng)輪播事件，直接上源碼：

/*target 添加畫布的容器，option即為setOption中的Option，autoOption用于設(shè)定是否自動(dòng)輪播，是否hover觸發(fā)，*/  
 function addHover(target,option,autoOption={autoShow:false,hoverEnable:true,time:1000}){
    const m =Math;
    var center ={  //獲取畫布的中心偏離比，因?yàn)閑charts支持百分?jǐn)?shù)控制radar圖在畫布中的位置，所以我們需要計(jì)算這個(gè)點(diǎn)，當(dāng)然我們也可以為了方便，不在option中設(shè)置，這樣我們就可以直接用畫布的中心點(diǎn),即（0.5,0.5）；
        pointx:(option.radar.center&&Number(option.radar.center[0].substr(0,option.radar.center[0].length-1))/100)||0.5,  //計(jì)算X軸的偏離比例
        pointy:(option.radar.center&&Number(option.radar.center[1].substr(0,option.radar.center[1].length-1))/100)||0.5, //計(jì)算y軸的偏離比例
    };
    var x=target.offsetWidth*center.pointx,y=target.offsetHeight*center.pointy; //計(jì)算radar中心點(diǎn)x的值，計(jì)算radar中心點(diǎn)x的值
    var indicator = option.radar.indicator; //獲取option中radar的標(biāo)簽
    var data = option.series[0].data[0].value;//獲取option中radar的值，我們在這里只去第一個(gè)series的值；
    var length = indicator.length; //獲取標(biāo)簽的長度，即雷達(dá)的拐點(diǎn)數(shù)，這個(gè)很重要
    var step =-1; //自動(dòng)輪播要用到的參數(shù)
    var hovering =false ; //這個(gè)參數(shù)是控制輪播與hover同時(shí)觸發(fā)，顯示hover值，暫停輪播顯示
    var radius=option.radar.radius,pointData=[]; //獲取radar的半徑
    var style ={  //hover顯示的樣式
        color:"#fff",
        border:"1px solid rgb(51,51,51)",
        borderRadius:"4px",
        backgroundColor:"rgba(50,50,50,0.7)"
    };

    const single = 2*m.PI /length*(-1);
    for(let i = 0;i
創(chuàng)建hover事件和自動(dòng)輪播顯示標(biāo)簽
創(chuàng)建標(biāo)簽
    let label =document.createElement("label");
    label.style.position="absolute";
    label.style.display="none";
    target.appendChild(label);
    function hoverLabel(label,point,text,style){
        label.style.display ="none";
        label.style.top=point.y+"px";
        label.style.left=point.x+"px";
        label.style.border=style.border;
        label.style.color =style.color;
        label.style.borderRadius=style.borderRadius;
        label.style.backgroundColor = style.backgroundColor;
        label.style.transition ="left 0.4s cubic-bezier(0.23,1,0.32,1),top 0.4s cubic-bezier(0.23,1,0.32,1)";
        label.style.zIndex = 999;
        label.innerHTML =text;
        label.style.display ="inline";
    }
    function removeLabel(dom) {
        dom.style.display ="none";
    }
添加輪播事件
    autoOption.autoShow&&(setInterval(function () { //控制輪播
        step = (step+1)%length;
        var showPoint={
            x:pointData[step][0]+x,
            y:y-pointData[step][2]
        }
        var tag =indicator[step];
        var text = tag.name+":"+m.round(data[step]*100/tag.max)+"%";
        (!hovering)&&hoverLabel(label,showPoint,text,style);
    },autoOption.time||1000));
    target.addEventListener("click",function(event){
        console.log(event);
    });
添加hover事件
 
    autoOption.hoverEnable&&(target.addEventListener("mousemove",function(event){  //控制hover
        const canvas= target.querySelector("canvas");
        const mouse = getMousePos(canvas, event);
        let point={};
        let index =-1;
        const r =5;
        point.x=mouse.x-x;
        point.y=y-mouse.y;
        for(let i=0;i (item[0] - r) && point.x < (item[0] + r) && point.y > (item[1] - r) && point.y < (item[1] + r)) {
                index = i;
                break;
            }
        }
       if(index!==-1){
            var tag =indicator[index]
            var text = tag.name+":"+m.round(data[index]*100/tag.max)+"%";
            hovering =true;
            hoverLabel(label,mouse,text,style);
        }else{
            hovering =false;
            removeLabel(label);
        }
    }))
}

至于調(diào)用，那就簡單了
 第一步：
 var ele = document.getElementById("chart");
 var draw = echarts.init(ele);
 第二步：
 配置你的option
 var option ={};
 第三步畫出你的雷達(dá)圖
 draw.setOption(option);
 第四步：綁定事件：
 addHover(ele,option,{autoShow:true,hoverEnable:true});

上面，其實(shí)只是一個(gè)簡易的版本，在實(shí)際應(yīng)用中，我們需要考慮很多問題。

圖表局部刷新帶來的數(shù)據(jù)重載，就上面的代碼，完全不行，我們沒有清除定時(shí)器，這樣會(huì)找出多個(gè)hover重疊

用過Echarts的人，我們都知道，tooltip有個(gè)formatter函數(shù)，用于顯示數(shù)據(jù)的格式化，以便展示出我們想要的效果。

性能問題，每次Hover生成一個(gè)labe元素，是否太消耗性能，作為產(chǎn)品，我們應(yīng)該怎樣優(yōu)化

怎樣才能更通用，更方便的讓人使用


基于上述問題，我對這個(gè)輪播函數(shù)做了改進(jìn)和封裝，使用方法是這樣的：
   /*Echarts圖表的正常實(shí)例化*/ 
    var target = document.getElementById("highOpinionChart");
    myChart = echarts.init(target);
    myChart.setOption(option);
    /*為圖表綁定輪播事件和Hover事件*/
    var radarAutoInfo = {hoverEnable: true, autoShow: true, time: 2000, formatter:function(v){
        return v.text + ":" + (v.value*100/v.max).toFixed(2)+"%";
    }};        
    RadarAutoTip(myChart,target, option, radarAutoInfo);  //綁定
    //測試停止，開始和重置方法
    document.querySelector("#reset").addEventListener("click",function (e) {
       console.log(e);
       if(e.target.innerText === "停止"){
           e.target.innerText ="開始"
           myChart.radarAutoTip.stop();
       }else{
           e.target.innerText  = "停止";
           myChart.radarAutoTip.start();
       }
    });
    document.querySelector("#rereset").addEventListener("click",function (e) {
        myChart.radarAutoTip.reset();
    });

至此，我們就完全解決了Echarts單軸輪播問題。
如果你嫌上面講的太瑣碎，不直觀，可以直接取github看我的試驗(yàn)源碼，文件是radarAutoTip.html,歡迎star
本文首發(fā)于：http://closertb.site ，轉(zhuǎn)載請注明