xioayue
/
btgym
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

更新数据

lite
luyisha 3 years ago
parent
f97e9d64ee
commit
826e73ba66
1 changed files with 105 additions and 132 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 237
      src/views/index.vue

237
src/views/index.vue
View File

@ -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];
},
},
},
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,
},
],
}
function run(myChart){
var dataP = that.dataP;
// 获取新数据-处理
myChart.setOption({
series: [{
data: data1,
},
{
data: data1,
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];
},
},
},
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)

Write Preview
Loading…
Cancel
Save