导语
接到变更需求,要求将原来的列表自动滚动效果,更改为圆形环展示方式,默认时自动划分扇区面积大小,圆环需要有动态旋转效果。鼠标悬浮于圆环时,圆环停止旋转,点击所选等级扇区时,出现对应的列表信息。
分析
原来页面用的图表都是echart,所以这个效果还计划用echart的pie图,然后考虑定时来改变旋转角度,直接粘代码,如下:
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 = '
'+type+' | 览海特需门诊 | 98分 |
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;
}