(function () {
const WdxjEcharts = echarts.init(document.getElementById('wdxjEchart'))
let num = 0;
var imgURL = "../imagesNew/wd-center.png";
var trafficWay = [{
name: '火车',
value: 20
}, {
name: '飞机',
value: 10
}, {
name: '客车',
value: 30
}, {
name: '轮渡',
value: 40
}];
var data = [];
var color = ['#4C9EF8', '#86E145', '#F8D849', '#EC6029']
for (var i = 0; i < trafficWay.length; i++) {
data.push({
value: trafficWay[i].value,
name: trafficWay[i].name,
itemStyle: {
normal: {
borderWidth: 5,
// shadowBlur: 20,
borderColor: color[i],
// shadowColor: color[i]
}
}
}, {
value: 2,
name: '',
itemStyle: {
normal: {
label: {
show: false
},
labelLine: {
show: false
},
color: 'rgba(0, 0, 0, 0)',
borderColor: 'rgba(0, 0, 0, 0)',
borderWidth: 0
}
}
});
}
var option = {
color: color,
title: {
show: false,
text: '交通方式',
top: '48%',
textAlign: "center",
left: "49%",
textStyle: {
color: '#fff',
fontSize: 22,
fontWeight: '400'
}
},
tooltip: {
show: false
},
graphic: {
elements: [{
type: "image",
z: 3,
style: {
image: imgURL,
width: 50,
height: 50
},
left: 'center',
top: 'center',
}]
},
legend: {
show: false,
icon: "circle",
orient: 'horizontal',
// x: 'left',
data: ['火车', '飞机', '客车', '轮渡'],
right: 0,
top: 'center',
align: 'left',
// itemWidth: 10,
// itemHeight: 10,
textStyle: {
color: "#fff"
},
itemGap: 20
},
toolbox: {
show: false
},
series: [{
type: 'pie',
zlevel: 2,
silent: true,
radius: ['90%', '95%'],
startAngle: 50,
hoverAnimation: false,
// animation:false, //charts3 no
label: {
normal: {
show: false
},
},
labelLine: {
normal: {
show: false
}
},
data: _pie2()
},
//
{
type: 'pie',
zlevel: 3,
silent: true,
radius: ['86%', '88%'],
label: {
normal: {
show: false
},
},
labelLine: {
normal: {
show: false
}
},
data: _pie2()
},
// 虚线
{
type: 'pie',
zlevel: 4,
silent: true,
radius: ['80%', '84%'],
label: {
normal: {
show: false
},
},
labelLine: {
normal: {
show: false
}
},
data: _pie3()
},
{
name: '',
type: 'pie',
clockWise: false,
radius: ['65%', '70%'],
center: ['50%', '50%'],
hoverAnimation: false,
itemStyle: {
normal: {
label: {
show: false,
position: 'outside',
color: '#ddd',
formatter: function (params) {
var percent = 0;
var total = 0;
for (var i = 0; i < trafficWay.length; i++) {
total += trafficWay[i].value;
}
percent = ((params.value / total) * 100).toFixed(0);
if (params.name !== '') {
return '交通方式：' + params.name + '\n' + '\n' + '占百分比：' + percent + '%';
} else {
return '';
}
},
},
labelLine: {
length: 30,
length2: 100,
show: true,
color: '#00ffff'
}
}
},
data: data
},
]
}
function _pie2() {
let dataArr = [];
for (var i = 0; i < 8; i++) {
if (i % 2 === 0) {
dataArr.push({
name: (i + 1).toString(),
value: 25,
itemStyle: {
normal: {
color: "rgba(88,142,197,0.5)",
borderWidth: 0,
borderColor: "rgba(0,0,0,0)"
}
}
})
} else {
dataArr.push({
name: (i + 1).toString(),
value: 20,
itemStyle: {
normal: {
color: "rgba(0,0,0,0)",
borderWidth: 0,
borderColor: "rgba(0,0,0,0)"
}
}
})
}
}
return dataArr
}
function _pie3() {
let dataArr = [];
for (var i = 0; i < 100; i++) {
if (i % 2 === 0) {
dataArr.push({
name: (i + 1).toString(),
value: 25,
itemStyle: {
normal: {
color: "rgb(126,190,255)",
borderWidth: 0,
borderColor: "rgba(0,0,0,0)"
}
}
})
} else {
dataArr.push({
name: (i + 1).toString(),
value: 20,
itemStyle: {
normal: {
color: "rgba(0,0,0,0)",
borderWidth: 0,
borderColor: "rgba(0,0,0,0)"
}
}
})
}
}
return dataArr
}
//鼠标事件：'click'，'dblclick'，'mousedown'，'mouseup'，'mouseover'，'mouseout'，'globalout'。
var timer;
function doing() {
let option = WdxjEcharts.getOption();
option.series[1].startAngle = option.series[1].startAngle - 1;
option.series[2].startAngle = option.series[2].startAngle + 1;
WdxjEcharts.setOption(option);
}
function startTimer() {
timer = setInterval(doing, 100);
}
function numb() {
num = num + 5
// WdxjEcharts.setOption(option, true)
}
setInterval(function () {
numb()
}, 100);
setTimeout(startTimer, 500);
WdxjEcharts.setOption(option)
window.addEventListener('resize', function () {
WdxjEcharts.resize()
})
})()
