diff --git a/src/views/index.vue b/src/views/index.vue index 623f526..e0e59a6 100644 --- a/src/views/index.vue +++ b/src/views/index.vue @@ -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)