导语
接到变更需求，要求将原来的列表自动滚动效果，更改为圆形环展示方式，默认时自动划分扇区面积大小，圆环需要有动态旋转效果。鼠标悬浮于圆环时，圆环停止旋转，点击所选等级扇区时，出现对应的列表信息。
分析
原来页面用的图表都是echart，所以这个效果还计划用echart的pie图，然后考虑定时来改变旋转角度，直接粘代码，如下：
<script>
var myChart = echarts.init(document.getElementById('main1'));
var rotateNum = 360，xinYongTimer;
function xingYongPie(){
var pieData = [{name:'A级', value:80},{name:'B级', value:50},{name:'C级', value:20}];
var colorList=['#66CDAA', '#FFA54F', '#FF0000'];
var option = {
tooltip: {
show: true,
trigger: 'item',
enterable: true,
axisPointer: {type: 'shadow'},
showDelay: 0,//显示延时，添加显示延时可以避免频繁切换
hideDelay: 50,//隐藏延时
transitionDuration: 0,//动画变换时长
backgroundColor: 'rgba(0,0,0,0.7)',//背景颜色（此时为默认色）
borderRadius: 8,//边框圆角
padding: 10, // [5, 10, 15, 20] 内边距
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级"){len = 80};
if(type=="B级"){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="览海特需门诊">览海特需门诊</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%'], //饼图的中心（圆心）坐标
radius: ['40%', '80%'], //饼图的半径
itemStyle: { //图形样式
normal: {
borderColor: '#1e2239',
borderWidth: 0.1,
color:function(params) {
return colorList[params.dataIndex]
}
},
},
label: { //标签的位置
normal: {
show: true,
position: 'inside', //标签的位置
formatter: "{b}",
textStyle: {
color: '#fff',
}
},
emphasis: {
show: true,
textStyle: {
fontWeight: 'bold'
}
}
}
}
]
};
myChart.clear();
myChart.setOption(option,true);
//鼠标事件：'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>
