|
|
@@ -2,11 +2,10 @@ let app = new Vue({
|
|
|
el: '#app',
|
|
|
data () {
|
|
|
return {
|
|
|
+ echart1Fd: true,
|
|
|
+ echart2Fd: true,
|
|
|
+ echart3Fd: true,
|
|
|
echarts1Time: 16000,
|
|
|
- timeOut1: '',
|
|
|
- timeOut2: '',
|
|
|
- timeOut3: '',
|
|
|
- timeOut4: '', // 散点图
|
|
|
titleList: [
|
|
|
{ name: '初步设计', type: 1, number: '106' },
|
|
|
{ name: '', type: 1, number: '' },
|
|
|
@@ -38,9 +37,6 @@ let app = new Vue({
|
|
|
beforeDestroy () {
|
|
|
if (this.timer) {
|
|
|
clearInterval(this.timer);
|
|
|
- clearInterval(this.timeOut1);
|
|
|
- clearInterval(this.timeOut2);
|
|
|
- clearInterval(this.timeOut3);
|
|
|
}
|
|
|
},
|
|
|
mounted () {
|
|
|
@@ -56,6 +52,33 @@ let app = new Vue({
|
|
|
initChart1 () {
|
|
|
let that = this
|
|
|
let myChart = echarts.init(this.$refs['echart1'])
|
|
|
+ myChart.on('showTip', (params) => {
|
|
|
+ // 如果是7或者15并且满足防抖则切换
|
|
|
+ if ((params.dataIndex == 5 || params.dataIndex == 11) && that.echart1Fd) {
|
|
|
+ that.echart1Fd = false
|
|
|
+ setTimeout(() => {
|
|
|
+ option.dataZoom[0].endValue = option.dataZoom[0].endValue + 6
|
|
|
+ option.dataZoom[0].startValue = option.dataZoom[0].startValue + 6
|
|
|
+ myChart.setOption(option);
|
|
|
+ // 防止勿刷新做的防抖
|
|
|
+ setTimeout(() => {
|
|
|
+ that.echart1Fd = true
|
|
|
+ }, 2000)
|
|
|
+ }, 1900);
|
|
|
+ // 如果是17表示到了最后一个,那么重新来一遍
|
|
|
+ } else if (params.dataIndex == 17 && that.echart1Fd) {
|
|
|
+ that.echart1Fd = false
|
|
|
+ setTimeout(() => {
|
|
|
+ option.dataZoom[0].endValue = 0
|
|
|
+ option.dataZoom[0].startValue = 5
|
|
|
+ myChart.setOption(option);
|
|
|
+ // 防止勿刷新做的防抖
|
|
|
+ setTimeout(() => {
|
|
|
+ that.echart1Fd = true
|
|
|
+ }, 2000)
|
|
|
+ }, 1900)
|
|
|
+ }
|
|
|
+ })
|
|
|
let option = {
|
|
|
tooltip: {
|
|
|
formatter: data => {
|
|
|
@@ -74,7 +97,7 @@ let app = new Vue({
|
|
|
show: false,
|
|
|
// xAxisIndex: [0]
|
|
|
handlesize: 0,//滑动条的 左右2个滑动条的大小
|
|
|
- startValue: 7,// 初始显示值
|
|
|
+ startValue: 5,// 初始显示值
|
|
|
endValue: 0,// 结束显示值
|
|
|
height: 10,//组件高度
|
|
|
left: "5%",
|
|
|
@@ -99,7 +122,7 @@ let app = new Vue({
|
|
|
top: '16%',
|
|
|
right: '3%',
|
|
|
left: '5%',
|
|
|
- bottom: '15%',
|
|
|
+ bottom: '10%',
|
|
|
},
|
|
|
legend: {
|
|
|
data: ["预算额", "已签合同额", '产值认定额', '结算额', '付款额'],
|
|
|
@@ -123,7 +146,7 @@ let app = new Vue({
|
|
|
},
|
|
|
axisLabel: {
|
|
|
show: true,
|
|
|
- rotate: 40,
|
|
|
+ // rotate: 40,
|
|
|
textStyle: {
|
|
|
color: '#fff',//'rgba(255,255,255,0.6)', //X轴文字颜色
|
|
|
},
|
|
|
@@ -265,37 +288,6 @@ let app = new Vue({
|
|
|
interval: 2000,
|
|
|
loopSeries: true,
|
|
|
})
|
|
|
- let arr = echart1.map(item => item.value2)
|
|
|
- this.timeOut1 = setInterval(function () {
|
|
|
- let startValue = myChart.getModel().option.dataZoom[0].startValue;
|
|
|
- let endValue = myChart.getModel().option.dataZoom[0].endValue;
|
|
|
- let start = myChart.getModel().option.xAxis[0].data[startValue];//起始X轴
|
|
|
- let end = myChart.getModel().option.xAxis[0].data[endValue];//结束X轴
|
|
|
- // 每次向后滚动一个,最后一个从头开始。
|
|
|
- // console.log(option.dataZoom[0].endValue);
|
|
|
- // 如果到最后了,就重新加载图
|
|
|
- if (option.dataZoom[0].endValue == 8) {
|
|
|
- setTimeout(() => {
|
|
|
- clearInterval(that.timeOut1);
|
|
|
- that.initChart1()
|
|
|
- }, 4000)
|
|
|
- }
|
|
|
- if (option.dataZoom[0].endValue >= 10) {
|
|
|
- option.dataZoom[0].endValue = 7
|
|
|
- option.dataZoom[0].startValue = 0
|
|
|
- } else {
|
|
|
- option.dataZoom[0].endValue = option.dataZoom[0].endValue + 8
|
|
|
- option.dataZoom[0].startValue = option.dataZoom[0].startValue + 8
|
|
|
- }
|
|
|
-
|
|
|
- // myChart.dispatchAction({
|
|
|
- // type: 'showTip',
|
|
|
- // seriesIndex: 0,
|
|
|
- // dataIndex: startValue +1,
|
|
|
- // });
|
|
|
- myChart.setOption(option);
|
|
|
- }, this.echarts1Time);
|
|
|
-
|
|
|
},
|
|
|
initChart2 () {
|
|
|
let that = this
|
|
|
@@ -307,6 +299,33 @@ let app = new Vue({
|
|
|
shadowColor: 'rgba(0,0,0,0.3)'
|
|
|
};
|
|
|
let myChart = echarts.init(this.$refs['echart2'])
|
|
|
+ myChart.on('showTip', (params) => {
|
|
|
+ // 如果是7或者15并且满足防抖则切换
|
|
|
+ if ((params.dataIndex == 5 || params.dataIndex == 11) && that.echart2Fd) {
|
|
|
+ that.echart2Fd = false
|
|
|
+ setTimeout(() => {
|
|
|
+ option.dataZoom[0].endValue = option.dataZoom[0].endValue + 6
|
|
|
+ option.dataZoom[0].startValue = option.dataZoom[0].startValue + 6
|
|
|
+ myChart.setOption(option);
|
|
|
+ // 防止勿刷新做的防抖
|
|
|
+ setTimeout(() => {
|
|
|
+ that.echart2Fd = true
|
|
|
+ }, 2000)
|
|
|
+ }, 1900);
|
|
|
+ // 如果是17表示到了最后一个,那么重新来一遍
|
|
|
+ } else if (params.dataIndex == 17 && that.echart2Fd) {
|
|
|
+ that.echart2Fd = false
|
|
|
+ setTimeout(() => {
|
|
|
+ option.dataZoom[0].endValue = 0
|
|
|
+ option.dataZoom[0].startValue = 5
|
|
|
+ myChart.setOption(option);
|
|
|
+ // 防止勿刷新做的防抖
|
|
|
+ setTimeout(() => {
|
|
|
+ that.echart2Fd = true
|
|
|
+ }, 2000)
|
|
|
+ }, 1900)
|
|
|
+ }
|
|
|
+ })
|
|
|
let option = {
|
|
|
color: ['#80F1BE', '#fec42c', '#dd4444'],
|
|
|
title: {
|
|
|
@@ -326,7 +345,7 @@ let app = new Vue({
|
|
|
show: false,
|
|
|
// xAxisIndex: [0]
|
|
|
handlesize: 0,//滑动条的 左右2个滑动条的大小
|
|
|
- startValue: 7,// 初始显示值
|
|
|
+ startValue: 5,// 初始显示值
|
|
|
endValue: 0,// 结束显示值
|
|
|
height: 10,//组件高度
|
|
|
left: "5%",
|
|
|
@@ -380,7 +399,7 @@ let app = new Vue({
|
|
|
top: '15%',
|
|
|
right: '5%',
|
|
|
left: '6%',
|
|
|
- bottom: '15%',
|
|
|
+ bottom: '10%',
|
|
|
},
|
|
|
yAxis: {
|
|
|
name: '亿元',
|
|
|
@@ -427,8 +446,8 @@ let app = new Vue({
|
|
|
},
|
|
|
axisLabel: {
|
|
|
show: true,
|
|
|
- rotate: 40,
|
|
|
- padding: [30, -15, 0, 0],
|
|
|
+ // rotate: 40,
|
|
|
+ padding: [0,0 , 0, 0],
|
|
|
textStyle: {
|
|
|
color: '#fff', //X轴文字颜色
|
|
|
fontSize: 12,
|
|
|
@@ -470,38 +489,37 @@ let app = new Vue({
|
|
|
interval: 2000,
|
|
|
loopSeries: true,
|
|
|
})
|
|
|
- this.timeOut4 = setInterval(function () {
|
|
|
- let startValue = myChart.getModel().option.dataZoom[0].startValue;
|
|
|
- let endValue = myChart.getModel().option.dataZoom[0].endValue;
|
|
|
- let start = myChart.getModel().option.xAxis[0].data[startValue];//起始X轴
|
|
|
- let end = myChart.getModel().option.xAxis[0].data[endValue];//结束X轴
|
|
|
- // 每次向后滚动一个,最后一个从头开始。
|
|
|
- // console.log(option.dataZoom[0].endValue);
|
|
|
- // 如果到最后了,就重新加载图
|
|
|
- if (option.dataZoom[0].endValue == 8) {
|
|
|
- setTimeout(() => {
|
|
|
- clearInterval(that.timeOut4);
|
|
|
- that.initChart2()
|
|
|
- }, 4000)
|
|
|
- }
|
|
|
- if (option.dataZoom[0].endValue >= 10) {
|
|
|
- option.dataZoom[0].endValue = 7
|
|
|
- option.dataZoom[0].startValue = 0
|
|
|
- } else {
|
|
|
- option.dataZoom[0].endValue = option.dataZoom[0].endValue + 8
|
|
|
- option.dataZoom[0].startValue = option.dataZoom[0].startValue + 8
|
|
|
- }
|
|
|
-
|
|
|
- // myChart.dispatchAction({
|
|
|
- // type: 'showTip',
|
|
|
- // seriesIndex: 0,
|
|
|
- // dataIndex: startValue +1,
|
|
|
- // });
|
|
|
- myChart.setOption(option);
|
|
|
- }, this.echarts1Time);
|
|
|
},
|
|
|
initChart3 () {
|
|
|
+ let that = this
|
|
|
let myChart = echarts.init(this.$refs['echart3'])
|
|
|
+ myChart.on('showTip', (params) => {
|
|
|
+ // 如果是7或者15并且满足防抖则切换
|
|
|
+ if ((params.dataIndex == 5 || params.dataIndex == 11) && that.echart3Fd) {
|
|
|
+ that.echart3Fd = false
|
|
|
+ setTimeout(() => {
|
|
|
+ option.dataZoom[0].endValue = option.dataZoom[0].endValue + 6
|
|
|
+ option.dataZoom[0].startValue = option.dataZoom[0].startValue + 6
|
|
|
+ myChart.setOption(option);
|
|
|
+ // 防止勿刷新做的防抖
|
|
|
+ setTimeout(() => {
|
|
|
+ that.echart3Fd = true
|
|
|
+ }, 2000)
|
|
|
+ }, 1900);
|
|
|
+ // 如果是17表示到了最后一个,那么重新来一遍
|
|
|
+ } else if (params.dataIndex == 17 && that.echart3Fd) {
|
|
|
+ that.echart3Fd = false
|
|
|
+ setTimeout(() => {
|
|
|
+ option.dataZoom[0].endValue = 0
|
|
|
+ option.dataZoom[0].startValue = 5
|
|
|
+ myChart.setOption(option);
|
|
|
+ // 防止勿刷新做的防抖
|
|
|
+ setTimeout(() => {
|
|
|
+ that.echart3Fd = true
|
|
|
+ }, 2000)
|
|
|
+ }, 1900)
|
|
|
+ }
|
|
|
+ })
|
|
|
let option = {
|
|
|
tooltip: {
|
|
|
formatter: data => {
|
|
|
@@ -512,7 +530,7 @@ let app = new Vue({
|
|
|
type: 'cross',
|
|
|
},
|
|
|
position: (params) => {
|
|
|
- return [params[0]+10,30]
|
|
|
+ return [params[0] + 10, 30]
|
|
|
},
|
|
|
},
|
|
|
dataZoom: [
|
|
|
@@ -677,31 +695,6 @@ let app = new Vue({
|
|
|
interval: 2000,
|
|
|
loopSeries: true,
|
|
|
})
|
|
|
- let arr = echart1.map(item => item.value2)
|
|
|
- this.timeOut2 = setInterval(function () {
|
|
|
-
|
|
|
- let startValue = myChart.getModel().option.dataZoom[0].startValue;
|
|
|
- let endValue = myChart.getModel().option.dataZoom[0].endValue;
|
|
|
- let start = myChart.getModel().option.xAxis[0].data[startValue];//起始X轴
|
|
|
- let end = myChart.getModel().option.xAxis[0].data[endValue];//结束X轴
|
|
|
- // 每次向后滚动一个,最后一个从头开始。
|
|
|
- // console.log(option.dataZoom[0].endValue);
|
|
|
-
|
|
|
- if (option.dataZoom[0].endValue >= 12) {
|
|
|
- option.dataZoom[0].endValue = 5
|
|
|
- option.dataZoom[0].startValue = 0
|
|
|
- } else {
|
|
|
- option.dataZoom[0].endValue = option.dataZoom[0].endValue + 6
|
|
|
- option.dataZoom[0].startValue = option.dataZoom[0].startValue + 6
|
|
|
- }
|
|
|
-
|
|
|
- // myChart.dispatchAction({
|
|
|
- // type: 'showTip',
|
|
|
- // seriesIndex: 0,
|
|
|
- // dataIndex: startValue +1,
|
|
|
- // });
|
|
|
- myChart.setOption(option);
|
|
|
- }, 12000);
|
|
|
},
|
|
|
initChart4 () {
|
|
|
let myChart = echarts.init(this.$refs['echart4'])
|
|
|
@@ -739,7 +732,7 @@ let app = new Vue({
|
|
|
show: true,
|
|
|
lineStyle: {
|
|
|
width: 1,
|
|
|
- color: ['#871b1a', '#638f41', '#d29e35','#b6802b']
|
|
|
+ color: ['#871b1a', '#638f41', '#d29e35', '#b6802b']
|
|
|
// color: '#000',
|
|
|
// color:(color)=>{
|
|
|
// console.log(color,'??????')
|
|
|
@@ -764,7 +757,7 @@ let app = new Vue({
|
|
|
// { offset: 0.75, color: '#7D4216' }, // 0% 处的颜色
|
|
|
// { offset: 1, color: '#430705' }// 100% 处的颜色
|
|
|
// ], false)
|
|
|
- color: ['#638f41', '#887d33', '#7d4216','#430705'],
|
|
|
+ color: ['#638f41', '#887d33', '#7d4216', '#430705'],
|
|
|
}
|
|
|
}
|
|
|
},
|
|
|
@@ -823,40 +816,11 @@ let app = new Vue({
|
|
|
type: 'cross',
|
|
|
}
|
|
|
},
|
|
|
- dataZoom: [
|
|
|
- {
|
|
|
- // start: 9,//默认为@
|
|
|
- // end: 100,//黑认认为1@0
|
|
|
- type: "slider",
|
|
|
- show: false,
|
|
|
- // xAxisIndex: [0]
|
|
|
- handlesize: 0,//滑动条的 左右2个滑动条的大小
|
|
|
- startValue: 8,// 初始显示值
|
|
|
- endValue: 0,// 结束显示值
|
|
|
- height: 10,//组件高度
|
|
|
- left: "5%",
|
|
|
- right: "4%",//右边的距离
|
|
|
- bottom: "25%",//底边的距离
|
|
|
- borderColor: "#939",
|
|
|
- fillerColor: "#269cdb",
|
|
|
- borderRadius: 5,
|
|
|
- backgroundColor: "#33384b",//两边未选中的滑动条区域的额色
|
|
|
- showDataShadow: false,//是否显示数据阴影
|
|
|
- showDetail: false,//即拖拽时候是否显示详细数值信息
|
|
|
- truerealtime: true,//是否实时更新
|
|
|
- filterMode: "filter"
|
|
|
- }, {
|
|
|
- type: 'inside',
|
|
|
- show: true,
|
|
|
- start: 1,
|
|
|
- end: 100
|
|
|
- }
|
|
|
- ],
|
|
|
grid: {
|
|
|
top: '20%',
|
|
|
right: '3%',
|
|
|
left: '5%',
|
|
|
- bottom: '25%',
|
|
|
+ bottom: '11%',
|
|
|
},
|
|
|
legend: {
|
|
|
data: ["预算额", "合同额", "结算额", "支付额"],
|
|
|
@@ -867,7 +831,7 @@ let app = new Vue({
|
|
|
},
|
|
|
},
|
|
|
xAxis: {
|
|
|
- data: echart1.map(item => item.name),
|
|
|
+ data: ['设备费','设计费','施工费','材料费'],
|
|
|
axisLine: {
|
|
|
show: true, //隐藏X轴轴线
|
|
|
lineStyle: {
|
|
|
@@ -880,7 +844,7 @@ let app = new Vue({
|
|
|
},
|
|
|
axisLabel: {
|
|
|
show: true,
|
|
|
- rotate: 40,
|
|
|
+ // rotate: 40,
|
|
|
textStyle: {
|
|
|
color: '#fff',//'rgba(255,255,255,0.6)', //X轴文字颜色
|
|
|
},
|
|
|
@@ -1002,32 +966,6 @@ let app = new Vue({
|
|
|
interval: 2000,
|
|
|
loopSeries: true,
|
|
|
})
|
|
|
- let arr = echart1.map(item => item.value2)
|
|
|
- this.timeOut3 = setInterval(function () {
|
|
|
-
|
|
|
- let startValue = myChart.getModel().option.dataZoom[0].startValue;
|
|
|
- let endValue = myChart.getModel().option.dataZoom[0].endValue;
|
|
|
- let start = myChart.getModel().option.xAxis[0].data[startValue];//起始X轴
|
|
|
- let end = myChart.getModel().option.xAxis[0].data[endValue];//结束X轴
|
|
|
- // 每次向后滚动一个,最后一个从头开始。
|
|
|
- // console.log(option.dataZoom[0].endValue);
|
|
|
-
|
|
|
- if (option.dataZoom[0].endValue >= 9) {
|
|
|
- option.dataZoom[0].endValue = 8
|
|
|
- option.dataZoom[0].startValue = 0
|
|
|
- } else {
|
|
|
- option.dataZoom[0].endValue = option.dataZoom[0].endValue + 9
|
|
|
- option.dataZoom[0].startValue = option.dataZoom[0].startValue + 9
|
|
|
- }
|
|
|
-
|
|
|
- // myChart.dispatchAction({
|
|
|
- // type: 'showTip',
|
|
|
- // seriesIndex: 0,
|
|
|
- // dataIndex: startValue +1,
|
|
|
- // });
|
|
|
- myChart.setOption(option);
|
|
|
- }, 18000);
|
|
|
-
|
|
|
},
|
|
|
},
|
|
|
})
|