Browse Source

更新

lite
luyisha 3 years ago
parent
commit
69282df389
  1. 2
      src/App.vue
  2. 110
      src/views/index.vue

2
src/App.vue

@ -155,7 +155,7 @@ export default {
clearInterval(this.polling); clearInterval(this.polling);
this.polling = setInterval(() => { this.polling = setInterval(() => {
// //
this.autoChange(); // this.autoChange();
}, 20000); }, 20000);
}, },
}, },

110
src/views/index.vue

@ -8,8 +8,8 @@
<span class="kliu_title">总服务人次趋势</span> <span class="kliu_title">总服务人次趋势</span>
<div class="kliu_st"> <div class="kliu_st">
<span id="yitem" :class="klselt == 'y' ? 'spactive' : ''" @click="selitem('y')"></span> <span id="yitem" :class="klselt == 'y' ? 'spactive' : ''" @click="selitem('y')"></span>
<span id="mitem" :class="klselt == 'm' ? 'spactive' : ''" @click="selitem('m')"></span> <span id="mitem" :class="klselt == 'm' ? 'spactive' : ''" @click="selitem2('m')"></span>
<span id="ditem" :class="klselt == 'd' ? 'spactive' : ''" @click="selitem('d')"></span> <span id="ditem" :class="klselt == 'd' ? 'spactive' : ''" @click="selitem3('d')"></span>
</div> </div>
</div> </div>
<!-- 立体柱状图 --> <!-- 立体柱状图 -->
@ -177,7 +177,9 @@ export default {
rsqsData_z: [], rsqsData_z: [],
proportionData: [], proportionData: [],
proportionData_z: [], proportionData_z: [],
groupNameData: [] groupNameData: [],
timer1: null,//
timer2: null,//
}; };
}, },
// //
@ -270,6 +272,7 @@ export default {
selitem(type) { selitem(type) {
// console.log(type); // console.log(type);
this.klselt = type; this.klselt = type;
// this.getHomeBarData();
this.btgetdata() this.btgetdata()
}, },
selitem2(type) { selitem2(type) {
@ -508,33 +511,27 @@ export default {
] ]
}); });
} }
setInterval(function () { that.timer1 = setInterval(function () {
myChart.clear(); myChart.clear();
option && myChart.setOption(option); option && myChart.setOption(option);
run(myChart); run(myChart);
}, 3600); }, 5000);
}, },
// //
line_zone() { line_zone() {
let that = this;
var chartDom = document.getElementById("kl-line"); var chartDom = document.getElementById("kl-line");
var option; var option;
var xData = this.rsqsXData; var xData = this.rsqsXData;
var gcolor = ['#FF99CC', '#6666FF', '#FF6600', '#7049f0', '#fa704d', '#01babc'] var gcolor = ['#FF99CC', '#6666FF', '#FF6600', '#7049f0', '#fa704d', '#01babc']
var name = []
// var data = [
// [174, 137, 135, 34, 152, 135, 140, 160, 100, 174, 137, 135, 34],
// [134, 74, 137, 135, 161, 137, 300, 220, 250, 134, 74, 137, 135],
// [147, 134, 155, 131, 174, 122, 140, 160, 150, 127, 134, 175, 161],
// [124, 147, 175, 134, 122, 175, 180, 110, 130, 154, 187, 125, 134],
// [154, 174, 157, 175, 121, 157, 200, 250, 280, 134, 174, 157, 175],
// ]
var data = this.rsqsData_z var data = this.rsqsData_z
var series = []; var series = [];
for (var i = 0; i < data.length; i++) { for (var i = 0; i < data.length; i++) {
console.log(gcolor[i]) // console.log(gcolor[i])
series.push({ series.push({
name: this.rsqsDataName[i], name: this.rsqsDataName[i],
@ -685,21 +682,75 @@ export default {
}, },
series: series, series: series,
} }
// function run(myChart){ function run(myChart){
// // - // -
// myChart.setOption({ that.getGcgNumDatas();
// series: series setTimeout(() => {
// }); var xData = that.rsqsXData;
// } var gcolor = ['#FF99CC', '#6666FF', '#FF6600', '#7049f0', '#fa704d', '#01babc']
// setTimeout(()=>{
var data = that.rsqsData_z
var series = [];
for (var i = 0; i < data.length; i++) {
// console.log(gcolor[i])
series.push({
name: that.rsqsDataName[i],
type: "line",
symbolSize: 3,// 10 [20, 10] 2010[ default: 4 ]
symbol: 'circle',//ECharts 'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow'
smooth: true, //线
showSymbol: false, // symbol, false tooltip hover
areaStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: gcolor[i]
}, {
offset: 0.8,
color: '#fff',
}], false),
// shadowColor: 'rgba(255,255,255, 0.1)',
shadowBlur: 10,
opacity: 0.3,
}
},
itemStyle: {
normal: {
color: gcolor[i],
lineStyle: {
width: 1,
type: 'solid' //'dotted'线 'solid'线
},
borderColor: gcolor[i], // color
borderWidth: 8,//线 0 [ default: 0 ]
barBorderRadius: 0,
label: {
show: false,
},
opacity: 0.5,
}
},
data: data[i],
})
}
myChart.setOption({
xAxis: [{data: xData}],
series: series
});
}, 2000);
}
setTimeout(()=>{
var myChart = echarts.init(chartDom); var myChart = echarts.init(chartDom);
option && myChart.setOption(option); option && myChart.setOption(option);
// setInterval(function () { setInterval(function () {
// myChart.clear(); myChart.clear();
// option && myChart.setOption(option); option && myChart.setOption(option);
// run(myChart); run(myChart);
// }, 600); }, 3000);
// }, 600) }, 200)
}, },
addNumber(start, end, id) { addNumber(start, end, id) {
@ -785,8 +836,11 @@ export default {
getGcgNumDatas() { getGcgNumDatas() {
let that = this let that = this
that.rsqsDatas = [];
this.rsqsDataName = [];
that.rsqsData_z = [];
homeApi.allGcgNumDatas().then(res => { homeApi.allGcgNumDatas().then(res => {
///pass.passcc/toDayGroupsEnterNum'
const tmpdata = res.data.data const tmpdata = res.data.data
tmpdata.forEach((item) => { tmpdata.forEach((item) => {
this.rsqsDataName.push(item.groupName); this.rsqsDataName.push(item.groupName);

Loading…
Cancel
Save