導(dǎo)語(yǔ)
接到變更需求，要求將原來(lái)的列表自動(dòng)滾動(dòng)效果，更改為圓形環(huán)展示方式，默認(rèn)時(shí)自動(dòng)劃分扇區(qū)面積大小，圓環(huán)需要有動(dòng)態(tài)旋轉(zhuǎn)效果。鼠標(biāo)懸浮于圓環(huán)時(shí)，圓環(huán)停止旋轉(zhuǎn)，點(diǎn)擊所選等級(jí)扇區(qū)時(shí)，出現(xiàn)對(duì)應(yīng)的列表信息。
分析
原來(lái)頁(yè)面用的圖表都是echart，所以這個(gè)效果還計(jì)劃用echart的pie圖，然后考慮定時(shí)來(lái)改變旋轉(zhuǎn)角度，直接粘代碼，如下：
<script>
????????var myChart = echarts.init(document.getElementById('main1'));
????????var rotateNum = 360，xinYongTimer;
????????function xingYongPie(){
????????????????var pieData = [{name:'A級(jí)', value:80},{name:'B級(jí)', value:50},{name:'C級(jí)', value:20}];
????????????????var? colorList=['#66CDAA', '#FFA54F', '#FF0000'];
????????????????var option =? { ?
????????????????????????tooltip: {
????????????????????????????show: true,
????????????????????????????trigger: 'item',
????????????????????????????enterable: true,
????????????????????????????axisPointer: {type: 'shadow'},
????????????????????????????showDelay: 0,//顯示延時(shí)，添加顯示延時(shí)可以避免頻繁切換
????????????????????????????hideDelay: 50,//隱藏延時(shí)
? ? ? ? ? ? ? ? ? ? ? ? ? ? transitionDuration: 0,//動(dòng)畫(huà)變換時(shí)長(zhǎng)
? ? ? ? ? ? ? ? ? ? ? ? ? ?backgroundColor: 'rgba(0,0,0,0.7)',//背景顏色（此時(shí)為默認(rèn)色）
? ? ? ? ? ? ? ? ? ? ? ? ? ?borderRadius: 8,//邊框圓角
? ? ? ? ? ? ? ? ? ? ? ? ? ?padding: 10,? ? // [5, 10, 15, 20] 內(nèi)邊距
? ? ? ? ? ? ? ? ? ? ? ? ? ?position: function (point, e, dom, rect, size) {
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? $(dom).css("max-height","300px");
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? $(dom).css("overflow-y","auto");
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?return [point[0] + 10, point[1] - 10];
? ? ? ? ? ? ? ? ? ? ? ? ? ? ?},
? ? ? ? ? ? ? ? ? ? ? ? ? ? //triggerOn:'click',
? ? ? ? ? ? ? ? ? ? ? ? ? ? ?formatter: function (params) {
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? var type = params.data.name;
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? var color = params.color;
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? var len = 20;
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? if(type=="A級(jí)"){len = 80};
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? if(type=="B級(jí)"){len = 50};
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? var contentHtml = '<table id="xinYongTab" style="width:240px;height:300px;overflow-y:auto">';
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? for (var i=1; i<=len; i++) {
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?contentHtml += '<tr><td width="30px" style="color:'+color+'" >'+type+'</td><td class="infoText" title="覽海特需門(mén)診">覽海特需門(mén)診</td><td width="50px" class="infoText">98分</td></tr>';
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?contentHtml += '</table>';
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?stopRotate();
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? return contentHtml;
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?}
? ? ? ? ? ? ? ? ? ? ? ? ?}, ? ?
series : [
{
name: '',
type: 'pie',
data:pieData,
startAngle:rotateNum,
center: ['50%', '45%'], //餅圖的中心（圓心）坐標(biāo)
radius: ['40%', '80%'], //餅圖的半徑
itemStyle: { //圖形樣式
normal: {
borderColor: '#1e2239',
borderWidth: 0.1,
color:function(params) {
return colorList[params.dataIndex]
}
},
},
label: { //標(biāo)簽的位置
normal: {
show: true,
position: 'inside', //標(biāo)簽的位置
formatter: "",
textStyle: {
color: '#fff',
}
},
emphasis: {
show: true,
textStyle: {
fontWeight: 'bold'
}
}
}
}
]
};
myChart.clear();
myChart.setOption(option,true);
? ? ? ? ? ? //鼠標(biāo)事件：'click'，'dblclick'，'mousedown'，'mouseup'，'mouseover'，'mouseout'，'globalout'。
myChart.on('mouseover', function(params) {
var opt = myChart.getOption();
stopRotate();
myChart.setOption(opt);
});
myChart.on('mouseout', function(params) {
var opt = myChart.getOption();
startRotate();
myChart.setOption(opt);
});
? ? }
window.onload = function(){
xingYongPie();
setTimeout(startRotate, 500);
}
function rotate(){
rotateNum --;
if(rotateNum == 0){
rotateNum = 360;
}
var option = myChart.getOption();
option.series[0].startAngle = rotateNum;
myChart.setOption(option);
}
function startRotate(){
????xinYongTimer = setInterval(rotate, 100);
}
function stopRotate(){
????clearInterval(xinYongTimer);
????xinYongTimer = null;
}
</script>
