|
|
@@ -2,7 +2,10 @@ let app = new Vue({
|
|
|
el: '#app',
|
|
|
data () {
|
|
|
return {
|
|
|
+ type: true, // 切换柱状图状态
|
|
|
showTip2: false,
|
|
|
+ showTip3: false,
|
|
|
+ echartTitle: '',
|
|
|
year: '2022',
|
|
|
time: '',
|
|
|
timer: '',
|
|
|
@@ -14,7 +17,7 @@ let app = new Vue({
|
|
|
},
|
|
|
storageRecordConfig: {
|
|
|
// waitTime: '2000000',
|
|
|
- header: ['企业集团', '项目名称 ', '投资总额'],
|
|
|
+ header: ['企业集团', '项目名 ', '投资总额'],
|
|
|
// headerBGC: '#05507b33',
|
|
|
// oddRowBGC: '#05507b33',
|
|
|
// evenRowBGC: '#05507b33',
|
|
|
@@ -25,15 +28,20 @@ let app = new Vue({
|
|
|
rowNum: 4,
|
|
|
align: ['center'],
|
|
|
data: [
|
|
|
- ['建设工程项目', '山西建投', "60.32亿"],
|
|
|
- ['建设工程项目', '山西建投', "60.32亿"],
|
|
|
- ['建设工程项目', '山西建投', "60.32亿"],
|
|
|
- ['建设工程项目', '山西建投', "60.32亿"],
|
|
|
- ['建设工程项目', '山西建投', "60.32亿"],
|
|
|
- ['建设工程项目', '山西建投', "60.32亿"],
|
|
|
- ['建设工程项目', '山西建投', "60.32亿"],
|
|
|
- ['建设工程项目', '山西建投', "60.32亿"],
|
|
|
- ['建设工程项目', '山西建投', "60.32亿"]
|
|
|
+ ['国际能源', '娄烦县120MW智慧光伏发电项目+10%储能', "67840.59 "],
|
|
|
+ ['国际能源', '平朔矿区150MW农光储氢一体化项目', "78403.10 "],
|
|
|
+ ['汾酒集团', '汾酒2030技改原酒产储能扩建项目（一期）', "910181.50 "],
|
|
|
+ ['大地控股', '山西大地控股忻州新店矿业有限公司投资建设年产800万吨精品砂石骨料项目', "86691.03 "],
|
|
|
+ ['潞安化工', '分布式光伏发电项目', "20055.81 "],
|
|
|
+ ['太重集团', '设立太重（大同）新能源产业投资公司', "3000.00 "],
|
|
|
+ ['大地控股', '山西大地宏翔环保科技有限公司电厂固废资源化综合利用建设项目', "36000.00 "],
|
|
|
+ ['大地控股', '山西大地海科环保科技有限公司电厂固废资源化综合利用建设项目', "31061.11 "],
|
|
|
+ ['汾酒集团', '保健酒园区新增原酒产能项目', "49836.77 "],
|
|
|
+ ['汾酒集团', '白玉酒厂改扩建项目', "49617.44 "],
|
|
|
+ ['华阳新材', '5GW高效光伏组件制造项目', "48224.63 "],
|
|
|
+ ['华新燃气', '吉县—延长输气管道项目（一期工程）', "35400.00 "],
|
|
|
+ ['太重集团', '建设液压挖掘机配套油缸项目', "26000.00 "],
|
|
|
+ ['华远陆港', '物产集团参股设立项目公司投资建设山西物产万科（太原）综合物流产业园项目', "66000.00 "]
|
|
|
],
|
|
|
},
|
|
|
companyList: [
|
|
|
@@ -99,6 +107,10 @@ let app = new Vue({
|
|
|
swiper.autoplay.start();
|
|
|
}
|
|
|
})
|
|
|
+ setInterval(() => {
|
|
|
+ this.type = !this.type
|
|
|
+ this.initChartL3()
|
|
|
+ }, 2000)
|
|
|
},
|
|
|
methods: {
|
|
|
convertData (data) {
|
|
|
@@ -606,7 +618,7 @@ let app = new Vue({
|
|
|
},
|
|
|
},
|
|
|
splitLine: {
|
|
|
- show: false,
|
|
|
+ show: true,
|
|
|
lineStyle: {
|
|
|
color: "#204561",
|
|
|
width: 1,
|
|
|
@@ -627,7 +639,7 @@ let app = new Vue({
|
|
|
{
|
|
|
name: "2022年额度",
|
|
|
type: "bar",
|
|
|
- data: [1200, 680, 562, 268, 717, 843, 987, 126, 723, 569, 534, 753, 864, , 834, 764, 978, 843, 987, 126],
|
|
|
+ data: [283.42, 622.16, 251.91, 163.19, 46.44, 14.87, 0.00, 32.07, 9.06, 13.88, 143.16, 0.29, 33.75, 49.99, 7.38, 10.41, 0.00, 0.00],
|
|
|
showBackground: false,
|
|
|
backgroundStyle: {
|
|
|
color: "#18416F",
|
|
|
@@ -638,11 +650,11 @@ let app = new Vue({
|
|
|
color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
|
|
|
{
|
|
|
offset: 0,
|
|
|
- color: "#132543",
|
|
|
- }, //柱图渐变色
|
|
|
+ color: '#082550',
|
|
|
+ },
|
|
|
{
|
|
|
offset: 1,
|
|
|
- color: "#897DFF",
|
|
|
+ color: '#69c0ff',
|
|
|
},
|
|
|
]),
|
|
|
},
|
|
|
@@ -650,7 +662,7 @@ let app = new Vue({
|
|
|
{
|
|
|
name: "2023年额度",
|
|
|
type: "bar",
|
|
|
- data: [658, 1125, 658, 999, 643, 675, 743, 724, 733, 725, 652, 865, 749, 359, 241, 643, 675, 743],
|
|
|
+ data: [285.48, 627.03, 254.41, 164.08, 46.76, 14.93, 0.00, 32.45, 9.17, 14.01, 143.52, 0.27, 34.61, 51.45, 7.53, 10.52, 0.00, 0.00],
|
|
|
showBackground: false,
|
|
|
backgroundStyle: {
|
|
|
color: "#18416F",
|
|
|
@@ -661,11 +673,12 @@ let app = new Vue({
|
|
|
color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
|
|
|
{
|
|
|
offset: 0,
|
|
|
- color: "#132543",
|
|
|
- }, //柱图渐变色
|
|
|
+ color: '#082550',
|
|
|
+ },
|
|
|
{
|
|
|
offset: 1,
|
|
|
- color: "#FED95B",
|
|
|
+ color: '#957DFF',
|
|
|
+
|
|
|
},
|
|
|
]),
|
|
|
},
|
|
|
@@ -694,23 +707,97 @@ let app = new Vue({
|
|
|
if (param.name == '晋能控股') {
|
|
|
that.showTip2 = true
|
|
|
setTimeout(() => {
|
|
|
- that.initChartR4()
|
|
|
- that.initChartR5()
|
|
|
+ // that.initChartR4()
|
|
|
+ // that.initChartR5()
|
|
|
+ that.initChartL2b()
|
|
|
})
|
|
|
}
|
|
|
})
|
|
|
myChart.setOption(option);
|
|
|
},
|
|
|
+ initChartL2b () {
|
|
|
+ let myChart = echarts.init(this.$refs['echartL2b'])
|
|
|
+ var value = 0.37;
|
|
|
+ var data = [value];
|
|
|
+ let option = {
|
|
|
+ backgroundColor: 'transparent',
|
|
|
+ title: [
|
|
|
+ {
|
|
|
+ // text: '总额度285.48亿',
|
|
|
+ // formatter: `<span>总额度</span>285.48亿`,
|
|
|
+ x: '37%',
|
|
|
+ y: '80%',
|
|
|
+ textStyle: {
|
|
|
+ fontSize: 24,
|
|
|
+ fontWeight: 'bold',
|
|
|
+ color: '#2CB7E0',
|
|
|
+ lineHeight: 16,
|
|
|
+ textAlign: 'center',
|
|
|
+ },
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ series: [
|
|
|
+ {
|
|
|
+ type: 'liquidFill',
|
|
|
+ radius: '70%',
|
|
|
+ center: ['50%', '40%'],
|
|
|
+ color: [
|
|
|
+ {
|
|
|
+ type: 'linear',
|
|
|
+ x: 0,
|
|
|
+ y: 0,
|
|
|
+ x2: 0,
|
|
|
+ y2: 1,
|
|
|
+ colorStops: [
|
|
|
+ {
|
|
|
+ offset: 0,
|
|
|
+ color: '#446bf5',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ offset: 1,
|
|
|
+ color: '#2ca3e2',
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ globalCoord: false,
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ data: [value, value], // data个数代表波浪数
|
|
|
+ backgroundStyle: {
|
|
|
+ borderWidth: 1,
|
|
|
+ color: 'RGBA(51, 66, 127, 0.7)',
|
|
|
+ },
|
|
|
+ label: {
|
|
|
+ normal: {
|
|
|
+ textStyle: {
|
|
|
+ fontSize: 30,
|
|
|
+ color: '#fff',
|
|
|
+ },
|
|
|
+ },
|
|
|
+ },
|
|
|
+ outline: {
|
|
|
+ // show: false
|
|
|
+ borderDistance: 0,
|
|
|
+ itemStyle: {
|
|
|
+ borderWidth: 2,
|
|
|
+ borderColor: 'transparent',
|
|
|
+ },
|
|
|
+ },
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ }
|
|
|
+ myChart.setOption(option)
|
|
|
+ },
|
|
|
initChartL2 () {
|
|
|
let myChart = echarts.init(this.$refs['echartL2'])
|
|
|
- var value = 0.45;
|
|
|
+ var value = 0.37;
|
|
|
var data = [value];
|
|
|
let option = {
|
|
|
backgroundColor: 'transparent',
|
|
|
title: [
|
|
|
{
|
|
|
- text: '450.12亿',
|
|
|
- x: '33%',
|
|
|
+ // text: '总额度285.48亿',
|
|
|
+ // formatter: `<span>总额度</span>285.48亿`,
|
|
|
+ x: '37%',
|
|
|
y: '80%',
|
|
|
textStyle: {
|
|
|
fontSize: 24,
|
|
|
@@ -774,7 +861,7 @@ let app = new Vue({
|
|
|
},
|
|
|
initChartL3 () {
|
|
|
let myChart = echarts.init(this.$refs['echartL3'])
|
|
|
- let option = {
|
|
|
+ option = {
|
|
|
tooltip: {
|
|
|
trigger: 'axis',
|
|
|
formatter: '指标：' + '{c0}' + '<br/>' + '发展线：' + '{c1}' + '<br/>' + '生存线：' + '{c2}', //+ '<br/>'+ '{a1}：{c1}' + '%',
|
|
|
@@ -854,7 +941,7 @@ let app = new Vue({
|
|
|
]),
|
|
|
},
|
|
|
},
|
|
|
- data: [10, 20, 30, 40, 50],
|
|
|
+ data: [70, 52, 33, 41, 52],
|
|
|
// markLine: {
|
|
|
// symbol: ['none', 'none'],
|
|
|
// data: [
|
|
|
@@ -932,6 +1019,7 @@ let app = new Vue({
|
|
|
},
|
|
|
],
|
|
|
}
|
|
|
+
|
|
|
myChart.setOption(option)
|
|
|
// tools.loopShowTooltip(myChart, option, {
|
|
|
// nterval: 2000,
|
|
|
@@ -939,6 +1027,18 @@ let app = new Vue({
|
|
|
// })
|
|
|
},
|
|
|
initChartL4 () {
|
|
|
+ let data = [
|
|
|
+ { value: [173.43, 129], name: '煤炭产业' },
|
|
|
+ { value: [23.10, 2], name: '火电产业' },
|
|
|
+ { value: [22.87, 8], name: '冶金产业' },
|
|
|
+ { value: [9.71, 5], name: '焦化产业' },
|
|
|
+ { value: [8.35, 6], name: '其他传统产业' }
|
|
|
+ ]
|
|
|
+ let count = 0
|
|
|
+ data.forEach(item => {
|
|
|
+ count += item.value[0]
|
|
|
+ })
|
|
|
+
|
|
|
let myChart = echarts.init(this.$refs['echartL4'])
|
|
|
let option = {
|
|
|
title: {
|
|
|
@@ -952,13 +1052,14 @@ let app = new Vue({
|
|
|
},
|
|
|
tooltip: {
|
|
|
trigger: 'item',
|
|
|
- formatter: '{b}' + '：' + '{c}' + '<br/>' + '占比：' + '{d}%',
|
|
|
- // position: ['30%', '87%'],
|
|
|
+ formatter: function (params) {
|
|
|
+ return params.name + '，' + (params.value[0] / count * 100).toFixed(2) + '%' + '</br >' + params.value[1] + '个' + '，' + params.value[0] + '亿'
|
|
|
+ }
|
|
|
},
|
|
|
color: ['#6682f5', '#8ba2ff', '#69c0ff', '#43ede3'],
|
|
|
legend: {
|
|
|
orient: 'horizontal',
|
|
|
- show: true,
|
|
|
+ show: false,
|
|
|
icon: 'circle',
|
|
|
top: 'bottom',
|
|
|
orient: 'vertical',
|
|
|
@@ -975,8 +1076,8 @@ let app = new Vue({
|
|
|
name: '',
|
|
|
type: 'pie',
|
|
|
// radius: ['0%', '70%'],
|
|
|
- radius: ['40%', '55%'],
|
|
|
- center: ['45%', '55%'],
|
|
|
+ radius: ['50%', '65%'],
|
|
|
+ center: ['50%', '55%'],
|
|
|
itemStyle: {
|
|
|
normal: {
|
|
|
borderColor: 'rgba(1,31,64,0.7)',
|
|
|
@@ -989,12 +1090,7 @@ let app = new Vue({
|
|
|
labelLine: {
|
|
|
show: false,
|
|
|
},
|
|
|
- data: [
|
|
|
- { value: 1048, name: '煤炭' },
|
|
|
- { value: 735, name: '火电' },
|
|
|
- { value: 580, name: '焦化' },
|
|
|
- { value: 484, name: '风电' },
|
|
|
- ],
|
|
|
+ data,
|
|
|
},
|
|
|
],
|
|
|
}
|
|
|
@@ -1003,12 +1099,35 @@ let app = new Vue({
|
|
|
nterval: 2000,
|
|
|
loopSeries: true,
|
|
|
})
|
|
|
+ let that = this
|
|
|
+ myChart.on('click', function (param) {
|
|
|
+ console.log(param)
|
|
|
+ that.showTip3 = true
|
|
|
+ setTimeout(() => {
|
|
|
+ that.initChartT1(data, option)
|
|
|
+ })
|
|
|
+ })
|
|
|
},
|
|
|
initChartL5 () {
|
|
|
+ let data = [
|
|
|
+ { value: [29.26, 102], name: '新一代信息技术产业' },
|
|
|
+ { value: [59.11, 38], name: '高端装备制造产业' },
|
|
|
+ { value: [3.96, 5], name: '新材料产业' },
|
|
|
+ { value: [2.12, 7], name: '生物产业' },
|
|
|
+ { value: [0, 0], name: '新能源汽车产业' },
|
|
|
+ { value: [100.09, 79], name: '新能源产业' },
|
|
|
+ { value: [15.48, 32], name: '节能环保产业' },
|
|
|
+ { value: [0, 0], name: '数字创意产业' },
|
|
|
+ { value: [3.00, 3], name: '相关服务业' },
|
|
|
+ ]
|
|
|
+ let count = 0
|
|
|
+ data.forEach(item => {
|
|
|
+ count += item.value[0]
|
|
|
+ })
|
|
|
let myChart = echarts.init(this.$refs['echartL5'])
|
|
|
let option = {
|
|
|
title: {
|
|
|
- text: '传统产业',
|
|
|
+ text: '战略性新兴产业',
|
|
|
x: 'center',
|
|
|
y: '0%',
|
|
|
textStyle: {
|
|
|
@@ -1018,12 +1137,13 @@ let app = new Vue({
|
|
|
},
|
|
|
tooltip: {
|
|
|
trigger: 'item',
|
|
|
- formatter: '{b}' + '：' + '{c}' + '<br/>' + '占比：' + '{d}%',
|
|
|
- // position: ['30%', '87%'],
|
|
|
+ formatter: function (params) {
|
|
|
+ return params.name + '，' + (params.value[0] / count * 100).toFixed(2) + '%' + '</br >' + params.value[1] + '个' + '，' + params.value[0] + '亿'
|
|
|
+ }
|
|
|
},
|
|
|
color: ['#6682f5', '#8ba2ff', '#69c0ff', '#43ede3'],
|
|
|
legend: {
|
|
|
- show: true,
|
|
|
+ show: false,
|
|
|
icon: 'circle',
|
|
|
top: 'bottom',
|
|
|
orient: 'vertical',
|
|
|
@@ -1040,8 +1160,8 @@ let app = new Vue({
|
|
|
name: '',
|
|
|
type: 'pie',
|
|
|
// radius: ['0%', '70%'],
|
|
|
- radius: ['40%', '55%'],
|
|
|
- center: ['45%', '55%'],
|
|
|
+ radius: ['50%', '65%'],
|
|
|
+ center: ['50%', '55%'],
|
|
|
itemStyle: {
|
|
|
normal: {
|
|
|
borderColor: 'rgba(1,31,64,0.7)',
|
|
|
@@ -1054,12 +1174,7 @@ let app = new Vue({
|
|
|
labelLine: {
|
|
|
show: false,
|
|
|
},
|
|
|
- data: [
|
|
|
- { value: 1048, name: '煤炭' },
|
|
|
- { value: 735, name: '火电' },
|
|
|
- { value: 580, name: '焦化' },
|
|
|
- { value: 484, name: '风电' },
|
|
|
- ],
|
|
|
+ data
|
|
|
},
|
|
|
],
|
|
|
}
|
|
|
@@ -1068,11 +1183,35 @@ let app = new Vue({
|
|
|
nterval: 2000,
|
|
|
loopSeries: true,
|
|
|
})
|
|
|
- }, initChartL6 () {
|
|
|
+ let that = this
|
|
|
+ myChart.on('click', function (param) {
|
|
|
+ console.log(param)
|
|
|
+ that.showTip3 = true
|
|
|
+ setTimeout(() => {
|
|
|
+ that.initChartT1(data, option)
|
|
|
+ })
|
|
|
+ })
|
|
|
+ },
|
|
|
+ initChartL6 () {
|
|
|
+ let data = [
|
|
|
+ { value: [25.82, 43], name: '化工产业' },
|
|
|
+ { value: [17.36, 21], name: '煤层气产业' },
|
|
|
+ { value: [0.04, 1], name: '文旅康养' },
|
|
|
+ { value: [1.51, 7], name: '体育产业' },
|
|
|
+ { value: [9.32, 5], name: '酿造' },
|
|
|
+ { value: [71.12, 129], name: '建筑房地产' },
|
|
|
+ { value: [9.11, 14], name: '农业' },
|
|
|
+ { value: [0, 0], name: '其他' },
|
|
|
+ ]
|
|
|
+ let count = 0
|
|
|
+ data.forEach(item => {
|
|
|
+ count += item.value[0]
|
|
|
+ })
|
|
|
+
|
|
|
let myChart = echarts.init(this.$refs['echartL6'])
|
|
|
let option = {
|
|
|
title: {
|
|
|
- text: '战略性新兴产业',
|
|
|
+ text: '特色优势产业',
|
|
|
x: 'center',
|
|
|
y: '0%',
|
|
|
textStyle: {
|
|
|
@@ -1082,12 +1221,14 @@ let app = new Vue({
|
|
|
},
|
|
|
tooltip: {
|
|
|
trigger: 'item',
|
|
|
- formatter: '{b}' + '：' + '{c}' + '<br/>' + '占比：' + '{d}%',
|
|
|
+ formatter: function (params) {
|
|
|
+ return params.name + '，' + (params.value[0] / count * 100).toFixed(2) + '%' + '</br >' + params.value[1] + '个' + '，' + params.value[0] + '亿'
|
|
|
+ }
|
|
|
// position: ['30%', '87%'],
|
|
|
},
|
|
|
color: ['#6682f5', '#8ba2ff', '#69c0ff', '#43ede3'],
|
|
|
legend: {
|
|
|
- show: true,
|
|
|
+ show: false,
|
|
|
icon: 'circle',
|
|
|
top: 'bottom',
|
|
|
orient: 'vertical',
|
|
|
@@ -1104,8 +1245,8 @@ let app = new Vue({
|
|
|
name: '',
|
|
|
type: 'pie',
|
|
|
// radius: ['0%', '70%'],
|
|
|
- radius: ['40%', '55%'],
|
|
|
- center: ['45%', '55%'],
|
|
|
+ radius: ['50%', '65%'],
|
|
|
+ center: ['50%', '55%'],
|
|
|
itemStyle: {
|
|
|
normal: {
|
|
|
borderColor: 'rgba(1,31,64,0.7)',
|
|
|
@@ -1118,12 +1259,7 @@ let app = new Vue({
|
|
|
labelLine: {
|
|
|
show: false,
|
|
|
},
|
|
|
- data: [
|
|
|
- { value: 1048, name: '煤炭' },
|
|
|
- { value: 735, name: '火电' },
|
|
|
- { value: 580, name: '焦化' },
|
|
|
- { value: 484, name: '风电' },
|
|
|
- ],
|
|
|
+ data,
|
|
|
},
|
|
|
],
|
|
|
}
|
|
|
@@ -1132,11 +1268,32 @@ let app = new Vue({
|
|
|
nterval: 2000,
|
|
|
loopSeries: true,
|
|
|
})
|
|
|
- }, initChartL7 () {
|
|
|
+ let that = this
|
|
|
+ myChart.on('click', function (param) {
|
|
|
+ console.log(param)
|
|
|
+ that.showTip3 = true
|
|
|
+ setTimeout(() => {
|
|
|
+ that.initChartT1(data, option)
|
|
|
+ })
|
|
|
+ })
|
|
|
+ },
|
|
|
+ initChartL7 () {
|
|
|
+ let data = [
|
|
|
+ { value: [155.82, 51], name: '交通运输业' },
|
|
|
+ { value: [0, 0], name: '市政设施' },
|
|
|
+ { value: [8.47, 19], name: '煤气层管网' },
|
|
|
+ { value: [10.64, 24], name: '物流贸易' },
|
|
|
+ { value: [41.05, 46], name: '水务' },
|
|
|
+ { value: [2.14, 7], name: '其他' },
|
|
|
+ ]
|
|
|
+ let count = 0
|
|
|
+ data.forEach(item => {
|
|
|
+ count += item.value[0]
|
|
|
+ })
|
|
|
let myChart = echarts.init(this.$refs['echartL7'])
|
|
|
let option = {
|
|
|
title: {
|
|
|
- text: '基础产业',
|
|
|
+ text: '公共基础等产业',
|
|
|
x: 'center',
|
|
|
y: '0%',
|
|
|
textStyle: {
|
|
|
@@ -1146,12 +1303,13 @@ let app = new Vue({
|
|
|
},
|
|
|
tooltip: {
|
|
|
trigger: 'item',
|
|
|
- formatter: '{b}' + '：' + '{c}' + '<br/>' + '占比：' + '{d}%',
|
|
|
- // position: ['30%', '87%'],
|
|
|
+ formatter: function (params) {
|
|
|
+ return params.name + '，' + (params.value[0] / count * 100).toFixed(2) + '%' + '</br >' + params.value[1] + '个' + '，' + params.value[0] + '亿'
|
|
|
+ }
|
|
|
},
|
|
|
color: ['#6682f5', '#8ba2ff', '#69c0ff', '#43ede3'],
|
|
|
legend: {
|
|
|
- show: true,
|
|
|
+ show: false,
|
|
|
icon: 'circle',
|
|
|
top: 'bottom',
|
|
|
orient: 'vertical',
|
|
|
@@ -1168,8 +1326,8 @@ let app = new Vue({
|
|
|
name: '',
|
|
|
type: 'pie',
|
|
|
// radius: ['0%', '70%'],
|
|
|
- radius: ['40%', '55%'],
|
|
|
- center: ['45%', '55%'],
|
|
|
+ radius: ['50%', '65%'],
|
|
|
+ center: ['50%', '55%'],
|
|
|
itemStyle: {
|
|
|
normal: {
|
|
|
borderColor: 'rgba(1,31,64,0.7)',
|
|
|
@@ -1182,12 +1340,7 @@ let app = new Vue({
|
|
|
labelLine: {
|
|
|
show: false,
|
|
|
},
|
|
|
- data: [
|
|
|
- { value: 1048, name: '煤炭' },
|
|
|
- { value: 735, name: '火电' },
|
|
|
- { value: 580, name: '焦化' },
|
|
|
- { value: 484, name: '风电' },
|
|
|
- ],
|
|
|
+ data
|
|
|
},
|
|
|
],
|
|
|
}
|
|
|
@@ -1196,6 +1349,14 @@ let app = new Vue({
|
|
|
nterval: 2000,
|
|
|
loopSeries: true,
|
|
|
})
|
|
|
+ let that = this
|
|
|
+ myChart.on('click', function (param) {
|
|
|
+ console.log(param)
|
|
|
+ that.showTip3 = true
|
|
|
+ setTimeout(() => {
|
|
|
+ that.initChartT1(data, option)
|
|
|
+ })
|
|
|
+ })
|
|
|
},
|
|
|
initChartR4 () {
|
|
|
let myChart = echarts.init(this.$refs['echartR4'])
|
|
|
@@ -1355,10 +1516,19 @@ let app = new Vue({
|
|
|
})
|
|
|
},
|
|
|
initChartR1 () {
|
|
|
+ let data = [
|
|
|
+ { value: [665.81, 549], name: '主业' },
|
|
|
+ { value: [65.17, 84], name: '辅业' },
|
|
|
+ { value: [423.36, 164], name: '技改' }
|
|
|
+ ]
|
|
|
+ let count = 0
|
|
|
+ data.forEach(item => {
|
|
|
+ count += item.value[0]
|
|
|
+ })
|
|
|
let myChart = echarts.init(this.$refs['echartR1'])
|
|
|
let option = {
|
|
|
title: {
|
|
|
- text: '产业类别分析',
|
|
|
+ text: '主辅业计划占比',
|
|
|
x: 'center',
|
|
|
y: '87%',
|
|
|
textStyle: {
|
|
|
@@ -1368,8 +1538,11 @@ let app = new Vue({
|
|
|
},
|
|
|
tooltip: {
|
|
|
trigger: 'item',
|
|
|
- formatter: '{b}' + '：' + '{c}' + '<br/>' + '占比：' + '{d}%',
|
|
|
+ // formatter: '{b}' + '：' + '{c}' + '<br/>' + '占比：' + '{d}%',
|
|
|
// position: ['-5%', '95%'],
|
|
|
+ formatter: function (params) {
|
|
|
+ return params.name + '，' + (params.value[0] / count * 100).toFixed(2) + '%' + '</br >' + params.value[1] + '个' + '，' + params.value[0] + '亿'
|
|
|
+ }
|
|
|
},
|
|
|
color: ['#6682f5', '#8ba2ff', '#69c0ff', '#43ede3'],
|
|
|
legend: {
|
|
|
@@ -1403,11 +1576,7 @@ let app = new Vue({
|
|
|
labelLine: {
|
|
|
show: false,
|
|
|
},
|
|
|
- data: [
|
|
|
- { value: 665.81, name: '主业' },
|
|
|
- { value: 735, name: '辅业' },
|
|
|
- { value: 735, name: '技改' }
|
|
|
- ],
|
|
|
+ data,
|
|
|
},
|
|
|
],
|
|
|
}
|
|
|
@@ -1418,10 +1587,18 @@ let app = new Vue({
|
|
|
})
|
|
|
},
|
|
|
initChartR2 () {
|
|
|
+ let data = [
|
|
|
+ { value: [340.77, 168], name: '特别监管类' },
|
|
|
+ { value: [390.22, 465], name: '备案类' }
|
|
|
+ ]
|
|
|
+ let count = 0
|
|
|
+ data.forEach(item => {
|
|
|
+ count += item.value[0]
|
|
|
+ })
|
|
|
let myChart = echarts.init(this.$refs['echartR2'])
|
|
|
let option = {
|
|
|
title: {
|
|
|
- text: '项目阶段分析',
|
|
|
+ text: '项目管理类型',
|
|
|
x: 'center',
|
|
|
y: '87%',
|
|
|
textStyle: {
|
|
|
@@ -1431,7 +1608,9 @@ let app = new Vue({
|
|
|
},
|
|
|
tooltip: {
|
|
|
trigger: 'item',
|
|
|
- formatter: '{b}' + '：' + '{c}' + '<br/>' + '占比：' + '{d}%',
|
|
|
+ formatter: function (params) {
|
|
|
+ return params.name + '，' + (params.value[0] / count * 100).toFixed(2) + '%' + '</br >' + params.value[1] + '个' + '，' + params.value[0] + '亿'
|
|
|
+ }
|
|
|
// position: ['-5%', '95%'],
|
|
|
},
|
|
|
color: ['#6682f5', '#8ba2ff', '#69c0ff', '#43ede3'],
|
|
|
@@ -1466,12 +1645,7 @@ let app = new Vue({
|
|
|
labelLine: {
|
|
|
show: false,
|
|
|
},
|
|
|
- data: [
|
|
|
- { value: 1048, name: '煤炭' },
|
|
|
- { value: 735, name: '火电' },
|
|
|
- { value: 580, name: '焦化' },
|
|
|
- { value: 484, name: '风电' },
|
|
|
- ],
|
|
|
+ data,
|
|
|
},
|
|
|
],
|
|
|
}
|
|
|
@@ -1499,8 +1673,8 @@ let app = new Vue({
|
|
|
},
|
|
|
tooltip: {
|
|
|
trigger: "axis",
|
|
|
- formatter: function(params) {
|
|
|
- var tip = params[0].axisValue + '<br/>' + params[0].marker + params[0].data[1]+ ':'+ params[0].data[2]+ '个,'+ params[0].data[3] + '亿元' + '<br/>'+ params[1].marker + params[1].data[1]+ ':'+ params[1].data[2]+ '个,'+ params[0].data[3] + '亿元';
|
|
|
+ formatter: function (params) {
|
|
|
+ var tip = params[0].axisValue + '<br/>' + params[0].marker + params[0].data[1] + ':' + params[0].data[2] + '个,' + params[0].data[3] + '亿元' + '<br/>' + params[1].marker + params[1].data[1] + ':' + params[1].data[2] + '个,' + params[0].data[3] + '亿元';
|
|
|
return tip
|
|
|
},
|
|
|
axisPointer: {
|
|
|
@@ -1515,7 +1689,7 @@ let app = new Vue({
|
|
|
grid: {
|
|
|
top: '22%',
|
|
|
right: '5%',
|
|
|
- left: '10%',
|
|
|
+ left: '15%',
|
|
|
bottom: '15%',
|
|
|
},
|
|
|
yAxis: {
|
|
|
@@ -1543,7 +1717,7 @@ let app = new Vue({
|
|
|
},
|
|
|
},
|
|
|
xAxis: {
|
|
|
- data: ['项目储备', '项目立项','可研论证', '投资决策'],
|
|
|
+ data: ['项目储备', '项目立项', '可研论证', '投资决策'],
|
|
|
axisLine: {
|
|
|
show: true, //隐藏X轴轴线
|
|
|
lineStyle: {
|
|
|
@@ -1645,8 +1819,8 @@ let app = new Vue({
|
|
|
},
|
|
|
tooltip: {
|
|
|
trigger: "axis",
|
|
|
- formatter: function(params) {
|
|
|
- var tip = params[0].axisValue + '<br/>' + params[0].marker + params[0].data[1]+ ':'+ params[0].data[2]+ '个,'+ params[0].data[3] + '亿元' + '<br/>'+ params[1].marker + params[1].data[1]+ ':'+ params[1].data[2]+ '个,'+ params[0].data[3] + '亿元';
|
|
|
+ formatter: function (params) {
|
|
|
+ var tip = params[0].axisValue + '<br/>' + params[0].marker + params[0].data[1] + ':' + params[0].data[2] + '个,' + params[0].data[3] + '亿元' + '<br/>' + params[1].marker + params[1].data[1] + ':' + params[1].data[2] + '个,' + params[0].data[3] + '亿元';
|
|
|
return tip
|
|
|
},
|
|
|
axisPointer: {
|
|
|
@@ -1772,6 +1946,44 @@ let app = new Vue({
|
|
|
nterval: 2000,
|
|
|
loopSeries: true,
|
|
|
})
|
|
|
+ },
|
|
|
+ initChartT1(list, info) {
|
|
|
+ let count = 0
|
|
|
+ console.log(list, info)
|
|
|
+ this.echartTitle = info.title.text
|
|
|
+ let data = list
|
|
|
+ data.forEach(item => {
|
|
|
+ count += item.value[0]
|
|
|
+ })
|
|
|
+ let option = JSON.parse(JSON.stringify(info))
|
|
|
+ option.series[0].center = ['50%', '50%']
|
|
|
+ option.series[0].radius = ['60%', '75%']
|
|
|
+ option.legend = {
|
|
|
+ show: true,
|
|
|
+ icon: 'circle',
|
|
|
+ top: 'bottom',
|
|
|
+ orient: 'vertical',
|
|
|
+ right: '3%',
|
|
|
+ textStyle: {
|
|
|
+ color: '#9DB9EB',
|
|
|
+ fontSize: 16
|
|
|
+ },
|
|
|
+ itemWidth: 10,
|
|
|
+ itemHeight: 10
|
|
|
+ },
|
|
|
+ option.title.text = ''
|
|
|
+ option.tooltip = {
|
|
|
+ trigger: 'item',
|
|
|
+ formatter: function (params) {
|
|
|
+ return params.name + '，' + (params.value[0] / count * 100).toFixed(2) + '%' + '</br >' + params.value[1] + '个' + '，' + params.value[0] + '亿'
|
|
|
+ }
|
|
|
+ }
|
|
|
+ let myChart = echarts.init(this.$refs['echartT1'])
|
|
|
+ myChart.setOption(option)
|
|
|
+ tools.loopShowTooltip(myChart, option, {
|
|
|
+ nterval: 2000,
|
|
|
+ loopSeries: true,
|
|
|
+ })
|
|
|
}
|
|
|
},
|
|
|
})
|
unknown