|
...
|
...
|
@@ -5,25 +5,33 @@ export default { |
|
|
|
data () {
|
|
|
|
return {
|
|
|
|
chartInstance: null,
|
|
|
|
allData: {
|
|
|
|
polyline: {
|
|
|
|
data: {
|
|
|
|
name: "申报率",
|
|
|
|
data: ["12", "15", "21", "81", "20", "37", "45", "23", "12", "50", "70", "14", "92", "76", "67", "45", "77", "20", "35", "50"]
|
|
|
|
},
|
|
|
|
declareNumer: "1200848",
|
|
|
|
declareRate: "98.55%",
|
|
|
|
numerTitle: "本月应申报",
|
|
|
|
rateTitle: "本月申报率"
|
|
|
|
},
|
|
|
|
xAxis: {
|
|
|
|
today: ["1号", "2号", "3号", "4号", "5号", "6号", "7号", "8号", "9号", "10号", "11号", "12号", "13号", "14号", "15号", "16号", "17号", "18号", "19号", "20号"]
|
|
|
|
}
|
|
|
|
},
|
|
|
|
// allData: {
|
|
|
|
// polyline: {
|
|
|
|
// data: {
|
|
|
|
// name: "申报率",
|
|
|
|
// data: ["12", "15", "21", "81", "20", "37", "45", "23", "12", "50", "70", "14", "92", "76", "67", "45", "77", "20", "35", "50"]
|
|
|
|
// },
|
|
|
|
// declareNumer: "1200848",
|
|
|
|
// declareRate: "98.55%",
|
|
|
|
// numerTitle: "本月应申报",
|
|
|
|
// rateTitle: "本月申报率"
|
|
|
|
// },
|
|
|
|
// xAxis: {
|
|
|
|
// today: ["1号", "2号", "3号", "4号", "5号", "6号", "7号", "8号", "9号", "10号", "11号", "12号", "13号", "14号", "15号", "16号", "17号", "18号", "19号", "20号"]
|
|
|
|
// }
|
|
|
|
// },
|
|
|
|
allData:{},
|
|
|
|
startValue: 0, // 区域缩放的起点值
|
|
|
|
endValue: 9, // 区域缩放的终点值
|
|
|
|
timerId: null, // 定时器的标识
|
|
|
|
titleFontSize: 30
|
|
|
|
titleFontSize: 30,
|
|
|
|
declareRate: '0%',
|
|
|
|
declareRateLeft: 0,
|
|
|
|
declareRateRight: '%',
|
|
|
|
declareNumer: 0,
|
|
|
|
curve: 'KPIDA0ACBBP',
|
|
|
|
rateTitle: 'KPIDA0ACBBK',
|
|
|
|
numerTitle: 'KPIDA0ACBBG'
|
|
|
|
}
|
|
|
|
},
|
|
|
|
computed: {
|
|
...
|
...
|
@@ -40,13 +48,18 @@ export default { |
|
|
|
},
|
|
|
|
comimgsizeStyle () {
|
|
|
|
return {
|
|
|
|
width: this.titleFontSize + 'px'
|
|
|
|
width: this.titleFontSize / 1.5 + 'px'
|
|
|
|
}
|
|
|
|
},
|
|
|
|
comboxtextStyle () {
|
|
|
|
return {
|
|
|
|
fontSize: this.titleFontSize / 3 + 'px'
|
|
|
|
}
|
|
|
|
}
|
|
|
|
},
|
|
|
|
mounted () {
|
|
|
|
this.initChart()
|
|
|
|
this.getData()
|
|
|
|
this.getData(this)
|
|
|
|
window.addEventListener('resize', this.screenAdapter)
|
|
|
|
this.screenAdapter()
|
|
|
|
},
|
|
...
|
...
|
@@ -59,9 +72,10 @@ export default { |
|
|
|
this.chartInstance = echarts.init(document.getElementById('declarepolyline_ref'))
|
|
|
|
const initOption = {
|
|
|
|
grid: {
|
|
|
|
left: '5%',
|
|
|
|
right: '35%',
|
|
|
|
bottom: '3%',
|
|
|
|
top: '10%',
|
|
|
|
left: '1%',
|
|
|
|
right: '30%',
|
|
|
|
bottom: '1%',
|
|
|
|
containLabel: true
|
|
|
|
},
|
|
|
|
legend: {
|
|
...
|
...
|
@@ -70,23 +84,43 @@ export default { |
|
|
|
},
|
|
|
|
xAxis: {
|
|
|
|
type: 'category',
|
|
|
|
boundaryGap: false
|
|
|
|
boundaryGap: false,
|
|
|
|
axisLabel: {
|
|
|
|
textStyle: {
|
|
|
|
color: '#E6E8EB'
|
|
|
|
}
|
|
|
|
}
|
|
|
|
},
|
|
|
|
yAxis: {
|
|
|
|
type: 'value',
|
|
|
|
splitLine: {
|
|
|
|
show: false
|
|
|
|
},
|
|
|
|
axisLabel: {
|
|
|
|
textStyle: {
|
|
|
|
color: '#E6E8EB'
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
this.chartInstance.setOption(initOption)
|
|
|
|
},
|
|
|
|
async getData () {
|
|
|
|
// await this.$http.get()
|
|
|
|
// const { data: ret } = await this.$http.get('declarepolyline')
|
|
|
|
// this.allData = ret
|
|
|
|
this.updateChart()
|
|
|
|
this.startInterval()
|
|
|
|
getData (that) {
|
|
|
|
const { proxy } = Vue.getCurrentInstance();
|
|
|
|
var params = {
|
|
|
|
curve: that.curve,
|
|
|
|
rateTitle: that.rateTitle,
|
|
|
|
numerTitle: that.numerTitle
|
|
|
|
};
|
|
|
|
proxy.$http.get("/api-web/bigScreen/declarePolyline", params, function (res) {
|
|
|
|
if(res.success){
|
|
|
|
console.log(res.obj)
|
|
|
|
that.allData = res.obj;
|
|
|
|
that.updateChart()
|
|
|
|
that.startInterval()
|
|
|
|
}
|
|
|
|
});
|
|
|
|
|
|
|
|
},
|
|
|
|
updateChart () {
|
|
|
|
// 半透明的颜色值
|
|
...
|
...
|
@@ -108,25 +142,17 @@ export default { |
|
|
|
const timeArr = this.allData.xAxis.today
|
|
|
|
const seriesData = this.allData.polyline.data.data
|
|
|
|
const seriesName = this.allData.polyline.data.name
|
|
|
|
const declareRate = this.allData.polyline.declareRate
|
|
|
|
if(declareRate.indexOf('.') > 0){
|
|
|
|
this.declareRateLeft = declareRate.split('.')[0] + '.'
|
|
|
|
this.declareRateRight = declareRate.split('.')[1]
|
|
|
|
}
|
|
|
|
this.declareNumer = this.allData.polyline.declareNumer
|
|
|
|
// 图例的数据
|
|
|
|
const legendArr = this.allData.polyline.data.data.map(item => {
|
|
|
|
return item.name
|
|
|
|
})
|
|
|
|
const numerTitle = this.allData.polyline.numerTitle // 本月应申报 标题
|
|
|
|
const rateTitle = this.allData.polyline.rateTitle // 本月申报率 标题
|
|
|
|
const declareNumer = this.allData.polyline.declareNumer // 本月应申报 数值
|
|
|
|
const declareRate = this.allData.polyline.declareRate // 本月申报率 数值
|
|
|
|
const htmlText = numerTitle + '\n' + declareNumer + '\n' + rateTitle + '\n' + declareRate
|
|
|
|
console.log(htmlText)
|
|
|
|
const dataOption = {
|
|
|
|
// title: {
|
|
|
|
// text: htmlText,
|
|
|
|
// top: '25%',
|
|
|
|
// right: '15%',
|
|
|
|
// textStyle: {
|
|
|
|
// color: '#F1F2F5'
|
|
|
|
// }
|
|
|
|
// },
|
|
|
|
xAxis: {
|
|
|
|
data: timeArr
|
|
|
|
},
|
|
...
|
...
|
@@ -181,12 +207,12 @@ export default { |
|
|
|
if (this.timerId) {
|
|
|
|
clearInterval(this.timerId)
|
|
|
|
}
|
|
|
|
let index = 30
|
|
|
|
let index = 10
|
|
|
|
this.timerId = setInterval(() => {
|
|
|
|
this.startValue++
|
|
|
|
this.endValue++
|
|
|
|
if ((this.allData.polyline.data).length > 0) {
|
|
|
|
index = (this.allData.polyline.data)[0].data.length
|
|
|
|
if (this.allData.polyline.data.data.length > 0) {
|
|
|
|
index = this.allData.polyline.data.data.length
|
|
|
|
}
|
|
|
|
if (this.endValue > index - 1) {
|
|
|
|
this.startValue = 0
|
...
|
...
|
|
