|
@@ -1,7 +1,8 @@
|
|
|
let app = new Vue({
|
|
|
el: '#app',
|
|
|
- data () {
|
|
|
+ data() {
|
|
|
return {
|
|
|
+ showTip2: false,
|
|
|
year: '2022',
|
|
|
time: '',
|
|
|
timer: '',
|
|
@@ -12,19 +13,22 @@ let app = new Vue({
|
|
|
content: '{nt}个',
|
|
|
},
|
|
|
storageRecordConfig: {
|
|
|
- header: [],
|
|
|
+ header: ['项目名称', '所属企业', '总投资额'],
|
|
|
headerBGC: '#05507b33',
|
|
|
oddRowBGC: '#05507b33',
|
|
|
evenRowBGC: '',
|
|
|
- headerHeight: '40',
|
|
|
rowNum: 4,
|
|
|
align: ['center'],
|
|
|
data: [
|
|
|
- ['工程建设项目'],
|
|
|
- ['施工图设计'],
|
|
|
- ['工程建设项目'],
|
|
|
- ['施工图设计'],
|
|
|
- ['工程建设项目'],
|
|
|
+ ['建设工程项目', '山西建投', "60.32亿"],
|
|
|
+ ['建设工程项目', '山西建投', "60.32亿"],
|
|
|
+ ['建设工程项目', '山西建投', "60.32亿"],
|
|
|
+ ['建设工程项目', '山西建投', "60.32亿"],
|
|
|
+ ['建设工程项目', '山西建投', "60.32亿"],
|
|
|
+ ['建设工程项目', '山西建投', "60.32亿"],
|
|
|
+ ['建设工程项目', '山西建投', "60.32亿"],
|
|
|
+ ['建设工程项目', '山西建投', "60.32亿"],
|
|
|
+ ['建设工程项目', '山西建投', "60.32亿"]
|
|
|
],
|
|
|
},
|
|
|
companyList: [
|
|
@@ -49,18 +53,18 @@ let app = new Vue({
|
|
|
],
|
|
|
}
|
|
|
},
|
|
|
- created () {
|
|
|
+ created() {
|
|
|
this.time = formatDate()
|
|
|
this.timer = setInterval(() => {
|
|
|
this.time = formatDate()
|
|
|
}, 1000)
|
|
|
},
|
|
|
- beforeDestroy () {
|
|
|
+ beforeDestroy() {
|
|
|
if (this.timer) {
|
|
|
clearInterval(this.timer);
|
|
|
}
|
|
|
},
|
|
|
- mounted () {
|
|
|
+ mounted() {
|
|
|
// 左侧图表
|
|
|
setTimeout(() => {
|
|
|
this.initChartL1()
|
|
@@ -76,7 +80,7 @@ let app = new Vue({
|
|
|
},)
|
|
|
},
|
|
|
methods: {
|
|
|
- convertData (data) {
|
|
|
+ convertData(data) {
|
|
|
var res = []
|
|
|
for (var i = 0; i < data.length; i++) {
|
|
|
var geoCoord = this.geoCoordMap[data[i].name]
|
|
@@ -89,7 +93,7 @@ let app = new Vue({
|
|
|
}
|
|
|
return res
|
|
|
},
|
|
|
- initChinaChart () {
|
|
|
+ initChinaChart() {
|
|
|
var data = [
|
|
|
{ name: '吕梁市', value: 150 },
|
|
|
{ name: '大同市', value: 190 },
|
|
@@ -525,7 +529,7 @@ let app = new Vue({
|
|
|
],
|
|
|
})
|
|
|
},
|
|
|
- initChartL1 () {
|
|
|
+ initChartL1() {
|
|
|
let myChart = echarts.init(document.getElementById("echartL1"));
|
|
|
let option = {
|
|
|
grid: {
|
|
@@ -663,9 +667,20 @@ let app = new Vue({
|
|
|
nterval: 2000,
|
|
|
loopSeries: true,
|
|
|
})
|
|
|
+ let that = this
|
|
|
+ myChart.on('click', function (param) {
|
|
|
+ console.log(param)
|
|
|
+ if (param.name == '晋能控股') {
|
|
|
+ that.showTip2 = true
|
|
|
+ setTimeout(() => {
|
|
|
+ that.initChartR4()
|
|
|
+ that.initChartR5()
|
|
|
+ })
|
|
|
+ }
|
|
|
+ })
|
|
|
myChart.setOption(option);
|
|
|
},
|
|
|
- initChartL2 () {
|
|
|
+ initChartL2() {
|
|
|
let myChart = echarts.init(this.$refs['echartL2'])
|
|
|
var value = 0.45;
|
|
|
var data = [value];
|
|
@@ -736,7 +751,7 @@ let app = new Vue({
|
|
|
}
|
|
|
myChart.setOption(option)
|
|
|
},
|
|
|
- initChartL3 () {
|
|
|
+ initChartL3() {
|
|
|
let myChart = echarts.init(this.$refs['echartL3'])
|
|
|
let option = {
|
|
|
tooltip: {
|
|
@@ -861,7 +876,7 @@ let app = new Vue({
|
|
|
loopSeries: true,
|
|
|
})
|
|
|
},
|
|
|
- initChartL4 () {
|
|
|
+ initChartL4() {
|
|
|
let myChart = echarts.init(this.$refs['echartL4'])
|
|
|
let option = {
|
|
|
title: {
|
|
@@ -918,7 +933,7 @@ let app = new Vue({
|
|
|
loopSeries: true,
|
|
|
})
|
|
|
},
|
|
|
- initChartL5 () {
|
|
|
+ initChartL5() {
|
|
|
let myChart = echarts.init(this.$refs['echartL5'])
|
|
|
let option = {
|
|
|
title: {
|
|
@@ -974,7 +989,7 @@ let app = new Vue({
|
|
|
nterval: 2000,
|
|
|
loopSeries: true,
|
|
|
})
|
|
|
- }, initChartL6 () {
|
|
|
+ }, initChartL6() {
|
|
|
let myChart = echarts.init(this.$refs['echartL6'])
|
|
|
let option = {
|
|
|
title: {
|
|
@@ -1030,7 +1045,7 @@ let app = new Vue({
|
|
|
nterval: 2000,
|
|
|
loopSeries: true,
|
|
|
})
|
|
|
- }, initChartL7 () {
|
|
|
+ }, initChartL7() {
|
|
|
let myChart = echarts.init(this.$refs['echartL7'])
|
|
|
let option = {
|
|
|
title: {
|
|
@@ -1087,7 +1102,164 @@ let app = new Vue({
|
|
|
loopSeries: true,
|
|
|
})
|
|
|
},
|
|
|
- initChartR1 () {
|
|
|
+ initChartR4() {
|
|
|
+ let myChart = echarts.init(this.$refs['echartR4'])
|
|
|
+ let option = {
|
|
|
+ title: {
|
|
|
+ text: '2022年的可投资总额',
|
|
|
+ x: 'center',
|
|
|
+ y: '87%',
|
|
|
+ textStyle: {
|
|
|
+ color: 'rgba(255,255,255,0.6)',
|
|
|
+ fontSize: 12,
|
|
|
+ },
|
|
|
+ },
|
|
|
+ tooltip: {
|
|
|
+ trigger: 'item',
|
|
|
+ },
|
|
|
+ color: ['#69C1FF', '#4B97CC',],
|
|
|
+ legend: {
|
|
|
+ icon: 'circle',
|
|
|
+ top: 'bottom',
|
|
|
+ orient: 'vertical',
|
|
|
+ right: '1%',
|
|
|
+ textStyle: {
|
|
|
+ color: '#9DB9EB',
|
|
|
+ },
|
|
|
+ },
|
|
|
+ series: [
|
|
|
+ {
|
|
|
+ name: '',
|
|
|
+ type: 'pie',
|
|
|
+ label: {
|
|
|
+ normal: {
|
|
|
+ show: true,
|
|
|
+ position: 'center',
|
|
|
+ color: '#4c4a4a',
|
|
|
+ formatter: '{total|' + '462.83' + '}' + '\n\r' + '{active|亿元}',
|
|
|
+ rich: {
|
|
|
+ total: {
|
|
|
+ fontSize: 20,
|
|
|
+ fontFamily: "微软雅黑",
|
|
|
+ color: '#fff'
|
|
|
+ },
|
|
|
+ active: {
|
|
|
+ fontFamily: "微软雅黑",
|
|
|
+ fontSize: 15,
|
|
|
+ color: '#fff'
|
|
|
+ },
|
|
|
+ }
|
|
|
+ },
|
|
|
+ emphasis: {//中间文字显示
|
|
|
+ show: true,
|
|
|
+ }
|
|
|
+ },
|
|
|
+ radius: ['40%', '60%'],
|
|
|
+ center: ['50%', '45%'],
|
|
|
+ itemStyle: {
|
|
|
+ normal: {
|
|
|
+ label: {
|
|
|
+ show: false,
|
|
|
+ },
|
|
|
+ },
|
|
|
+ },
|
|
|
+ labelLine: {
|
|
|
+ show: false,
|
|
|
+ },
|
|
|
+ data: [
|
|
|
+ { value: 1048, name: '已使用额度' },
|
|
|
+ { value: 735, name: '可使用额度' }
|
|
|
+ ],
|
|
|
+
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ }
|
|
|
+ myChart.setOption(option)
|
|
|
+ tools.loopShowTooltip(myChart, option, {
|
|
|
+ nterval: 2000,
|
|
|
+ loopSeries: true,
|
|
|
+ })
|
|
|
+ },
|
|
|
+ initChartR5() {
|
|
|
+ let myChart = echarts.init(this.$refs['echartR5'])
|
|
|
+ let option = {
|
|
|
+ title: {
|
|
|
+ text: '2023年的可投资总额',
|
|
|
+ x: 'center',
|
|
|
+ y: '87%',
|
|
|
+ textStyle: {
|
|
|
+ color: 'rgba(255,255,255,0.6)',
|
|
|
+ fontSize: 12,
|
|
|
+ },
|
|
|
+ },
|
|
|
+ tooltip: {
|
|
|
+ trigger: 'item',
|
|
|
+ },
|
|
|
+ color: ['#69C1FF', '#4B97CC',],
|
|
|
+ legend: {
|
|
|
+ icon: 'circle',
|
|
|
+ top: 'bottom',
|
|
|
+ orient: 'vertical',
|
|
|
+ right: '1%',
|
|
|
+ textStyle: {
|
|
|
+ color: '#9DB9EB',
|
|
|
+ },
|
|
|
+ },
|
|
|
+ series: [
|
|
|
+ {
|
|
|
+ name: '',
|
|
|
+ type: 'pie',
|
|
|
+ label: {
|
|
|
+ normal: {
|
|
|
+ show: true,
|
|
|
+ position: 'center',
|
|
|
+ top: '50',
|
|
|
+ color: '#4c4a4a',
|
|
|
+ formatter: '{total|' + '462.83' + '}' + '\n\r' + '{active|亿元}',
|
|
|
+ rich: {
|
|
|
+ total: {
|
|
|
+ fontSize: 20,
|
|
|
+ fontFamily: "微软雅黑",
|
|
|
+ color: '#fff'
|
|
|
+ },
|
|
|
+ active: {
|
|
|
+ fontFamily: "微软雅黑",
|
|
|
+ fontSize: 15,
|
|
|
+ color: '#fff'
|
|
|
+ },
|
|
|
+ }
|
|
|
+ },
|
|
|
+ emphasis: {//中间文字显示
|
|
|
+ show: true,
|
|
|
+ }
|
|
|
+ },
|
|
|
+ radius: ['40%', '60%'],
|
|
|
+ center: ['50%', '45%'],
|
|
|
+ itemStyle: {
|
|
|
+ normal: {
|
|
|
+ label: {
|
|
|
+ show: false,
|
|
|
+ },
|
|
|
+ },
|
|
|
+ },
|
|
|
+ labelLine: {
|
|
|
+ show: false,
|
|
|
+ },
|
|
|
+ data: [
|
|
|
+ { value: 1048, name: '已使用额度' },
|
|
|
+ { value: 735, name: '可使用额度' }
|
|
|
+ ],
|
|
|
+
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ }
|
|
|
+ myChart.setOption(option)
|
|
|
+ tools.loopShowTooltip(myChart, option, {
|
|
|
+ nterval: 2000,
|
|
|
+ loopSeries: true,
|
|
|
+ })
|
|
|
+ },
|
|
|
+ initChartR1() {
|
|
|
let myChart = echarts.init(this.$refs['echartR1'])
|
|
|
let option = {
|
|
|
title: {
|
|
@@ -1144,7 +1316,7 @@ let app = new Vue({
|
|
|
loopSeries: true,
|
|
|
})
|
|
|
},
|
|
|
- initChartR2 () {
|
|
|
+ initChartR2() {
|
|
|
let myChart = echarts.init(this.$refs['echartR2'])
|
|
|
let option = {
|
|
|
title: {
|
|
@@ -1201,7 +1373,7 @@ let app = new Vue({
|
|
|
loopSeries: true,
|
|
|
})
|
|
|
},
|
|
|
- initChartR3 () {
|
|
|
+ initChartR3() {
|
|
|
let myChart = echarts.init(this.$refs['echartR3'])
|
|
|
let option = {
|
|
|
title: {
|