|
|
|
@ -197,7 +197,8 @@ export default { |
|
|
|
mounted() { |
|
|
|
|
|
|
|
this.getStat(); |
|
|
|
this.getHomeBarData(); |
|
|
|
this.btgetdata(); |
|
|
|
this.getPieData(); |
|
|
|
this.getInfoDatas(); |
|
|
|
this.getGcgNumDatas(); |
|
|
|
|
|
|
|
@ -237,7 +238,6 @@ export default { |
|
|
|
homeApi.allTygGroupTimeNum({granularity:rqtp}).then(res => { |
|
|
|
const tmpdata = res.data.data.allTimeData |
|
|
|
const dkeys = res.data.data.dkeys |
|
|
|
const groupsData = res.data.data.groupsData |
|
|
|
|
|
|
|
let datas = [] |
|
|
|
Object.values(tmpdata).forEach((value) => { |
|
|
|
@ -247,16 +247,6 @@ export default { |
|
|
|
that.klqsDatas = datas; |
|
|
|
that.klqsXDatas = dkeys; |
|
|
|
|
|
|
|
that.proportionData = [];that.groupNameData=[];that.dataP=[]; |
|
|
|
groupsData.forEach((item) => { |
|
|
|
that.proportionData.push(item.proportion); |
|
|
|
that.groupNameData.push(item.groupName); |
|
|
|
that.dataP.push({ |
|
|
|
name:item.groupName, |
|
|
|
value:item.proportion.split('%')[0] |
|
|
|
}) |
|
|
|
}) |
|
|
|
|
|
|
|
this.home_bar(); |
|
|
|
}); |
|
|
|
}, |
|
|
|
@ -265,7 +255,6 @@ export default { |
|
|
|
selitem(type) { |
|
|
|
// console.log(type); |
|
|
|
this.klselt = type; |
|
|
|
// this.getHomeBarData(); |
|
|
|
this.btgetdata(); |
|
|
|
this.autoTimer0(); |
|
|
|
}, |
|
|
|
@ -499,7 +488,7 @@ export default { |
|
|
|
] |
|
|
|
}); |
|
|
|
} |
|
|
|
clearInterval(this.timer1);//这个定时器看似多余,但是注释会影响效果,先保留 |
|
|
|
clearInterval(that.timer1);//这个定时器看似多余,但是注释会影响效果,先保留 |
|
|
|
that.timer1 = setInterval(function () { |
|
|
|
myChart.clear(); |
|
|
|
option && myChart.setOption(option); |
|
|
|
@ -772,25 +761,15 @@ export default { |
|
|
|
}); |
|
|
|
}, |
|
|
|
|
|
|
|
getHomeBarData() { |
|
|
|
getPieData() { |
|
|
|
let that = this; |
|
|
|
homeApi.homeBarData().then(res => { |
|
|
|
// /pass.passcc/allGroupTimeNum&granularity=daily |
|
|
|
// get allTimeData |
|
|
|
const tmpdata = res.data.data.allTimeData |
|
|
|
const dkeys = res.data.data.dkeys |
|
|
|
const groupsData = res.data.data.groupsData |
|
|
|
|
|
|
|
let datas = [] |
|
|
|
Object.values(tmpdata).forEach((value) => { |
|
|
|
datas.push(value.num); |
|
|
|
}); |
|
|
|
|
|
|
|
that.klqsDatas = datas; |
|
|
|
that.klqsXDatas = dkeys; |
|
|
|
const pieData = res.data.data.groupsData; |
|
|
|
|
|
|
|
that.proportionData = [];that.groupNameData=[];that.dataP=[]; |
|
|
|
groupsData.forEach((item) => { |
|
|
|
pieData.forEach((item) => { |
|
|
|
that.proportionData.push(item.proportion); |
|
|
|
that.groupNameData.push(item.groupName); |
|
|
|
that.dataP.push({ |
|
|
|
@ -866,7 +845,7 @@ export default { |
|
|
|
// {name: '博物馆',value: 12,}, |
|
|
|
// // {name: '',value: 13,} |
|
|
|
// ]; |
|
|
|
var dataP = that.dataP; |
|
|
|
|
|
|
|
function hexToRgba(hex, opacity) { |
|
|
|
return ( |
|
|
|
'rgba(' + |
|
|
|
@ -880,122 +859,116 @@ export default { |
|
|
|
')' |
|
|
|
); |
|
|
|
} |
|
|
|
let color = ['#ff9acc', '#6666ff', '#ff6600', '#02ff00','#00ffff', '#fdff00']; |
|
|
|
let color1=[], color2=[], color3=[]; |
|
|
|
// 设置每层圆环颜色和添加间隔的透明色 |
|
|
|
color.forEach((item) => { |
|
|
|
color1.push(item, 'transparent'); |
|
|
|
color2.push(hexToRgba(item, 0.4), 'transparent'); |
|
|
|
color3.push(hexToRgba(item, 1), 'transparent'); |
|
|
|
}); |
|
|
|
let data1 = []; |
|
|
|
let sum = 0; |
|
|
|
// 根据总值设置间隔值大小 |
|
|
|
dataP.forEach((item) => { |
|
|
|
sum += Number(item.value); |
|
|
|
}); |
|
|
|
// 给每个数据后添加特定的透明的数据形成间隔 |
|
|
|
dataP.forEach((item, index) => { |
|
|
|
if (item.value !== 0) { |
|
|
|
data1.push(item, { |
|
|
|
name: '', |
|
|
|
value: sum / 70, |
|
|
|
labelLine: { |
|
|
|
show: false, |
|
|
|
lineStyle: { |
|
|
|
color: 'transparent', |
|
|
|
}, |
|
|
|
}, |
|
|
|
itemStyle: { |
|
|
|
color: 'transparent', |
|
|
|
}, |
|
|
|
}); |
|
|
|
} |
|
|
|
}); |
|
|
|
var option = { |
|
|
|
tooltip: { |
|
|
|
formatter: (params) => { |
|
|
|
if (params.name !== '') { |
|
|
|
return params.name + ' : ' + params.value + '\n' + '%'; |
|
|
|
} |
|
|
|
}, |
|
|
|
}, |
|
|
|
grid: { |
|
|
|
top: 0, |
|
|
|
bottom: 0, |
|
|
|
left: 0, |
|
|
|
right: 0, |
|
|
|
containLabel: true, |
|
|
|
}, |
|
|
|
series: [ |
|
|
|
{ |
|
|
|
type: 'pie', |
|
|
|
radius: ['90%', '80%'], |
|
|
|
center: ['50%', '50%'], |
|
|
|
hoverAnimation: false, |
|
|
|
startAngle: 90, |
|
|
|
selectedMode: 'single', |
|
|
|
selectedOffset: 0, |
|
|
|
itemStyle: { |
|
|
|
normal: { |
|
|
|
color: (params) => { |
|
|
|
// console.log('params', params) |
|
|
|
return color2[params.dataIndex]; |
|
|
|
|
|
|
|
function run(myChart){ |
|
|
|
var dataP = that.dataP; |
|
|
|
// 获取新数据-处理 |
|
|
|
let color = ['#ff9acc', '#6666ff', '#ff6600', '#02ff00','#00ffff', '#fdff00']; |
|
|
|
let color1=[], color2=[], color3=[]; |
|
|
|
// 设置每层圆环颜色和添加间隔的透明色 |
|
|
|
color.forEach((item) => { |
|
|
|
color1.push(item, 'transparent'); |
|
|
|
color2.push(hexToRgba(item, 0.4), 'transparent'); |
|
|
|
color3.push(hexToRgba(item, 1), 'transparent'); |
|
|
|
}); |
|
|
|
let data1 = []; |
|
|
|
let sum = 0; |
|
|
|
// 根据总值设置间隔值大小 |
|
|
|
dataP.forEach((item) => { |
|
|
|
sum += Number(item.value); |
|
|
|
}); |
|
|
|
// 给每个数据后添加特定的透明的数据形成间隔 |
|
|
|
dataP.forEach((item, index) => { |
|
|
|
if (item.value !== 0) { |
|
|
|
data1.push(item, { |
|
|
|
name: '', |
|
|
|
value: sum / 70, |
|
|
|
labelLine: { |
|
|
|
show: false, |
|
|
|
lineStyle: { |
|
|
|
color: 'transparent', |
|
|
|
}, |
|
|
|
}, |
|
|
|
}, |
|
|
|
label: { |
|
|
|
show: false, |
|
|
|
formatter: '{b}' + ' ' + '{c}', |
|
|
|
}, |
|
|
|
data: data1, |
|
|
|
z: 666, |
|
|
|
}, |
|
|
|
{ |
|
|
|
type: 'pie', |
|
|
|
radius: ['90%', '100%'], |
|
|
|
center: ['50%', '50%'], |
|
|
|
hoverAnimation: false, |
|
|
|
startAngle: 90, |
|
|
|
selectedMode: 'single', |
|
|
|
selectedOffset: 0, |
|
|
|
itemStyle: { |
|
|
|
normal: { |
|
|
|
color: (params) => { |
|
|
|
return color3[params.dataIndex]; |
|
|
|
}, |
|
|
|
itemStyle: { |
|
|
|
color: 'transparent', |
|
|
|
}, |
|
|
|
}, |
|
|
|
label: { |
|
|
|
show: false, |
|
|
|
formatter: '{b}' + ' ' + '{c}', |
|
|
|
}, |
|
|
|
data: data1, |
|
|
|
z: 666, |
|
|
|
}, |
|
|
|
], |
|
|
|
} |
|
|
|
|
|
|
|
function run(myChart){ |
|
|
|
// 获取新数据-处理 |
|
|
|
myChart.setOption({ |
|
|
|
series: [{ |
|
|
|
data: data1, |
|
|
|
}, |
|
|
|
{ |
|
|
|
data: data1, |
|
|
|
}); |
|
|
|
} |
|
|
|
] |
|
|
|
}); |
|
|
|
var option = { |
|
|
|
tooltip: { |
|
|
|
formatter: (params) => { |
|
|
|
if (params.name !== '') { |
|
|
|
return params.name + ' : ' + params.value + '\n' + '%'; |
|
|
|
} |
|
|
|
}, |
|
|
|
}, |
|
|
|
grid: { |
|
|
|
top: 0, |
|
|
|
bottom: 0, |
|
|
|
left: 0, |
|
|
|
right: 0, |
|
|
|
containLabel: true, |
|
|
|
}, |
|
|
|
series: [ |
|
|
|
{ |
|
|
|
type: 'pie', |
|
|
|
radius: ['90%', '80%'], |
|
|
|
center: ['50%', '50%'], |
|
|
|
hoverAnimation: false, |
|
|
|
startAngle: 90, |
|
|
|
selectedMode: 'single', |
|
|
|
selectedOffset: 0, |
|
|
|
itemStyle: { |
|
|
|
normal: { |
|
|
|
color: (params) => { |
|
|
|
// console.log('params', params) |
|
|
|
return color2[params.dataIndex]; |
|
|
|
}, |
|
|
|
}, |
|
|
|
}, |
|
|
|
label: { |
|
|
|
show: false, |
|
|
|
formatter: '{b}' + ' ' + '{c}', |
|
|
|
}, |
|
|
|
data: data1, |
|
|
|
z: 666, |
|
|
|
}, |
|
|
|
{ |
|
|
|
type: 'pie', |
|
|
|
radius: ['90%', '100%'], |
|
|
|
center: ['50%', '50%'], |
|
|
|
hoverAnimation: false, |
|
|
|
startAngle: 90, |
|
|
|
selectedMode: 'single', |
|
|
|
selectedOffset: 0, |
|
|
|
itemStyle: { |
|
|
|
normal: { |
|
|
|
color: (params) => { |
|
|
|
return color3[params.dataIndex]; |
|
|
|
}, |
|
|
|
}, |
|
|
|
}, |
|
|
|
label: { |
|
|
|
show: false, |
|
|
|
formatter: '{b}' + ' ' + '{c}', |
|
|
|
}, |
|
|
|
data: data1, |
|
|
|
z: 666, |
|
|
|
}, |
|
|
|
], |
|
|
|
} |
|
|
|
option && myChart.setOption(option); |
|
|
|
} |
|
|
|
|
|
|
|
// 加延时器使图像绘制获取元素宽高最新的值 |
|
|
|
setTimeout(()=>{ |
|
|
|
var pieDom1 = document.getElementById("indexPie1"); |
|
|
|
var myChart = echarts.init(pieDom1); |
|
|
|
option && myChart.setOption(option); |
|
|
|
run(myChart); |
|
|
|
setInterval(function () { |
|
|
|
myChart.clear(); |
|
|
|
option && myChart.setOption(option); |
|
|
|
that.getPieData(); |
|
|
|
run(myChart); |
|
|
|
}, 4000); |
|
|
|
}, 200) |
|
|
|
|