|
@@ -1,6 +1,6 @@
|
|
let app = new Vue({
|
|
let app = new Vue({
|
|
el: '#app',
|
|
el: '#app',
|
|
- data() {
|
|
|
|
|
|
+ data () {
|
|
return {
|
|
return {
|
|
year: '2022',
|
|
year: '2022',
|
|
time: '',
|
|
time: '',
|
|
@@ -12,19 +12,21 @@ let app = new Vue({
|
|
content: '{nt}个',
|
|
content: '{nt}个',
|
|
},
|
|
},
|
|
storageRecordConfig: {
|
|
storageRecordConfig: {
|
|
- header: ['项目名称', '投资金额', '项目进度'],
|
|
|
|
|
|
+ header: ['项目名称', '投资金额', '项目进度'],
|
|
headerBGC: '#05507b33',
|
|
headerBGC: '#05507b33',
|
|
oddRowBGC: '#05507b33',
|
|
oddRowBGC: '#05507b33',
|
|
evenRowBGC: '',
|
|
evenRowBGC: '',
|
|
headerHeight: '40',
|
|
headerHeight: '40',
|
|
rowNum: 4,
|
|
rowNum: 4,
|
|
- align: ['center'],
|
|
|
|
|
|
+ align: ['center', 'center', 'center'],
|
|
data: [
|
|
data: [
|
|
- ['工程建设项目', '21.2亿', '施工图设计'],
|
|
|
|
- ['工程建设项目', '21.2亿', '施工图设计'],
|
|
|
|
- ['工程建设项目', '21.2亿', '施工图设计'],
|
|
|
|
- ['工程建设项目', '21.2亿', '施工图设计'],
|
|
|
|
- ['工程建设项目', '21.2亿', '施工图设计'],
|
|
|
|
|
|
+ ['山煤河曲2×350MW低热值煤发电项目', '35.00亿', '决策审批中'],
|
|
|
|
+ ['泊里煤矿项目', '50.09亿', '决策完成'],
|
|
|
|
+ ['七元煤矿项目', '50.77亿', '决策完成'],
|
|
|
|
+ ['新源智慧建设运行总部', '9.83亿', '决策完成'],
|
|
|
|
+ ['潇河国际会展中心', '43.59亿', '决策完成'],
|
|
|
|
+ ['山西·潇河新城酒店', '40.30亿', '决策完成'],
|
|
|
|
+ ['平舒铁路专用线项目', '18.62亿', '决策完成'],
|
|
],
|
|
],
|
|
},
|
|
},
|
|
companyList: [
|
|
companyList: [
|
|
@@ -49,18 +51,18 @@ let app = new Vue({
|
|
],
|
|
],
|
|
}
|
|
}
|
|
},
|
|
},
|
|
- created() {
|
|
|
|
|
|
+ created () {
|
|
this.time = formatDate()
|
|
this.time = formatDate()
|
|
- this.timer = setInterval(()=> {
|
|
|
|
|
|
+ this.timer = setInterval(() => {
|
|
this.time = formatDate()
|
|
this.time = formatDate()
|
|
- },1000)
|
|
|
|
|
|
+ }, 1000)
|
|
},
|
|
},
|
|
- beforeDestroy() {
|
|
|
|
|
|
+ beforeDestroy () {
|
|
if (this.timer) {
|
|
if (this.timer) {
|
|
clearInterval(this.timer);
|
|
clearInterval(this.timer);
|
|
}
|
|
}
|
|
},
|
|
},
|
|
- mounted() {
|
|
|
|
|
|
+ mounted () {
|
|
// 左侧图表
|
|
// 左侧图表
|
|
this.initChartL1()
|
|
this.initChartL1()
|
|
this.initChartL2()
|
|
this.initChartL2()
|
|
@@ -68,7 +70,7 @@ let app = new Vue({
|
|
this.initChinaChart()
|
|
this.initChinaChart()
|
|
},
|
|
},
|
|
methods: {
|
|
methods: {
|
|
- convertData(data) {
|
|
|
|
|
|
+ convertData (data) {
|
|
var res = []
|
|
var res = []
|
|
for (var i = 0; i < data.length; i++) {
|
|
for (var i = 0; i < data.length; i++) {
|
|
var geoCoord = this.geoCoordMap[data[i].name]
|
|
var geoCoord = this.geoCoordMap[data[i].name]
|
|
@@ -81,7 +83,7 @@ let app = new Vue({
|
|
}
|
|
}
|
|
return res
|
|
return res
|
|
},
|
|
},
|
|
- initChinaChart() {
|
|
|
|
|
|
+ initChinaChart () {
|
|
var data = [
|
|
var data = [
|
|
{ name: '吕梁市', value: 150 },
|
|
{ name: '吕梁市', value: 150 },
|
|
{ name: '大同市', value: 190 },
|
|
{ name: '大同市', value: 190 },
|
|
@@ -327,6 +329,8 @@ let app = new Vue({
|
|
// 地区经纬度
|
|
// 地区经纬度
|
|
this.geoCoordMap[name] = v.properties.cp
|
|
this.geoCoordMap[name] = v.properties.cp
|
|
})
|
|
})
|
|
|
|
+ // <p>当前阶段:<span>可论证阶段</span></p>
|
|
|
|
+ // <p>时间节点:<span>2021.10-2022.10</span></p>
|
|
|
|
|
|
myChart.setOption({
|
|
myChart.setOption({
|
|
tooltip: {
|
|
tooltip: {
|
|
@@ -338,13 +342,13 @@ let app = new Vue({
|
|
<div class="tooltip-cont">
|
|
<div class="tooltip-cont">
|
|
<p>新开工:<span>工程建设项目</span></p>
|
|
<p>新开工:<span>工程建设项目</span></p>
|
|
<p>总投资额:<span>${params.data.value}亿</span></p>
|
|
<p>总投资额:<span>${params.data.value}亿</span></p>
|
|
- <p>当前阶段:<span>可论证阶段</span></p>
|
|
|
|
- <p>时间节点:<span>2021.10-2022.10</span></p>
|
|
|
|
</div>`
|
|
</div>`
|
|
|
|
+ callback(ticket, tipHtml)
|
|
return tipHtml
|
|
return tipHtml
|
|
},
|
|
},
|
|
},
|
|
},
|
|
visualMap: {
|
|
visualMap: {
|
|
|
|
+ show: false,
|
|
min: 0,
|
|
min: 0,
|
|
max: 300,
|
|
max: 300,
|
|
right: 0,
|
|
right: 0,
|
|
@@ -354,7 +358,7 @@ let app = new Vue({
|
|
color: '#f1f1f1'
|
|
color: '#f1f1f1'
|
|
},
|
|
},
|
|
realtime: false,
|
|
realtime: false,
|
|
- calculable: true,
|
|
|
|
|
|
+ calculable: false,
|
|
inRange: {
|
|
inRange: {
|
|
color: ['lightskyblue', '#2754b7']
|
|
color: ['lightskyblue', '#2754b7']
|
|
}
|
|
}
|
|
@@ -517,13 +521,13 @@ let app = new Vue({
|
|
],
|
|
],
|
|
})
|
|
})
|
|
},
|
|
},
|
|
- initChartL1() {
|
|
|
|
|
|
+ initChartL1 () {
|
|
let myChart = echarts.init(this.$refs['echartL1'])
|
|
let myChart = echarts.init(this.$refs['echartL1'])
|
|
let option = {
|
|
let option = {
|
|
tooltip: {
|
|
tooltip: {
|
|
trigger: 'item',
|
|
trigger: 'item',
|
|
},
|
|
},
|
|
- color: ['#6682f5','#8ba2ff','#69c0ff','#43ede3'],
|
|
|
|
|
|
+ color: ['#6682f5', '#8ba2ff', '#69c0ff', '#43ede3'],
|
|
legend: {
|
|
legend: {
|
|
top: 'center',
|
|
top: 'center',
|
|
orient: 'vertical',
|
|
orient: 'vertical',
|
|
@@ -555,20 +559,20 @@ let app = new Vue({
|
|
}
|
|
}
|
|
myChart.setOption(option)
|
|
myChart.setOption(option)
|
|
},
|
|
},
|
|
- initChartL2() {
|
|
|
|
|
|
+ initChartL2 () {
|
|
let myChart = echarts.init(this.$refs['echartL2'])
|
|
let myChart = echarts.init(this.$refs['echartL2'])
|
|
let option = {
|
|
let option = {
|
|
tooltip: {
|
|
tooltip: {
|
|
trigger: 'axis',
|
|
trigger: 'axis',
|
|
axisPointer: {
|
|
axisPointer: {
|
|
- type: 'shadow',
|
|
|
|
|
|
+ type: 'cross',
|
|
},
|
|
},
|
|
},
|
|
},
|
|
grid: {
|
|
grid: {
|
|
top: '16%',
|
|
top: '16%',
|
|
right: '3%',
|
|
right: '3%',
|
|
left: '10%',
|
|
left: '10%',
|
|
- bottom: '10%',
|
|
|
|
|
|
+ bottom: '22%',
|
|
},
|
|
},
|
|
legend: {
|
|
legend: {
|
|
top: '1',
|
|
top: '1',
|
|
@@ -578,7 +582,27 @@ let app = new Vue({
|
|
},
|
|
},
|
|
},
|
|
},
|
|
xAxis: {
|
|
xAxis: {
|
|
- data: ['山西焦煤', '山西文旅', '潞安化工', '晋能控股', '山西建投'],
|
|
|
|
|
|
+ data: [
|
|
|
|
+ '家寨水控',
|
|
|
|
+ '山西建设',
|
|
|
|
+ '华新燃气',
|
|
|
|
+ '国际能源',
|
|
|
|
+ '汾酒集团',
|
|
|
|
+ '大地控股',
|
|
|
|
+ '晋能控股',
|
|
|
|
+ '华远陆港',
|
|
|
|
+ '山西焦煤',
|
|
|
|
+ '潞安化工',
|
|
|
|
+ '华阳新材',
|
|
|
|
+ '太重集团',
|
|
|
|
+ '文旅集团',
|
|
|
|
+ '航产集团',
|
|
|
|
+ '华舰体育',
|
|
|
|
+ '神农科技',
|
|
|
|
+ '云时代',
|
|
|
|
+ '山西交控'
|
|
|
|
+
|
|
|
|
+ ],
|
|
axisLine: {
|
|
axisLine: {
|
|
show: true, //隐藏X轴轴线
|
|
show: true, //隐藏X轴轴线
|
|
lineStyle: {
|
|
lineStyle: {
|
|
@@ -591,6 +615,7 @@ let app = new Vue({
|
|
},
|
|
},
|
|
axisLabel: {
|
|
axisLabel: {
|
|
show: true,
|
|
show: true,
|
|
|
|
+ rotate: 50,
|
|
textStyle: {
|
|
textStyle: {
|
|
color: 'rgba(255,255,255,0.6)', //X轴文字颜色
|
|
color: 'rgba(255,255,255,0.6)', //X轴文字颜色
|
|
},
|
|
},
|
|
@@ -627,7 +652,7 @@ let app = new Vue({
|
|
{
|
|
{
|
|
name: '计划投资',
|
|
name: '计划投资',
|
|
type: 'bar',
|
|
type: 'bar',
|
|
- barWidth: 15,
|
|
|
|
|
|
+ barWidth: 10,
|
|
itemStyle: {
|
|
itemStyle: {
|
|
normal: {
|
|
normal: {
|
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
|
@@ -642,12 +667,31 @@ let app = new Vue({
|
|
]),
|
|
]),
|
|
},
|
|
},
|
|
},
|
|
},
|
|
- data: [900, 600, 500, 450, 500],
|
|
|
|
|
|
+ data: [
|
|
|
|
+ 46.99,
|
|
|
|
+ 218.3,
|
|
|
|
+ 31.83,
|
|
|
|
+ 64.20,
|
|
|
|
+ 14.03,
|
|
|
|
+ 47.05,
|
|
|
|
+ 385.2,
|
|
|
|
+ 97.57,
|
|
|
|
+ 189.0,
|
|
|
|
+ 106.8,
|
|
|
|
+ 82.95,
|
|
|
|
+ 80.01,
|
|
|
|
+ 26.79,
|
|
|
|
+ 41.09,
|
|
|
|
+ 5.33,
|
|
|
|
+ 14.76,
|
|
|
|
+ 63.45,
|
|
|
|
+ 346.36
|
|
|
|
+ ],
|
|
},
|
|
},
|
|
{
|
|
{
|
|
name: '实际投资',
|
|
name: '实际投资',
|
|
type: 'bar',
|
|
type: 'bar',
|
|
- barWidth: 15,
|
|
|
|
|
|
+ barWidth: 10,
|
|
itemStyle: {
|
|
itemStyle: {
|
|
normal: {
|
|
normal: {
|
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
|
@@ -662,26 +706,46 @@ let app = new Vue({
|
|
]),
|
|
]),
|
|
},
|
|
},
|
|
},
|
|
},
|
|
- data: [500, 900, 600, 800, 450],
|
|
|
|
|
|
+ data: [
|
|
|
|
+ 50.89,
|
|
|
|
+ 143.84,
|
|
|
|
+ 25.20,
|
|
|
|
+ 12.19,
|
|
|
|
+ 7.69,
|
|
|
|
+ 23.93,
|
|
|
|
+ 224.89,
|
|
|
|
+ 112.67,
|
|
|
|
+ 121.59,
|
|
|
|
+ 59.93,
|
|
|
|
+ 71.34,
|
|
|
|
+ 42.46,
|
|
|
|
+ 9.64,
|
|
|
|
+ 42.67,
|
|
|
|
+ 0.80,
|
|
|
|
+ 5.84,
|
|
|
|
+ 32.60,
|
|
|
|
+ 335.91
|
|
|
|
+ ],
|
|
},
|
|
},
|
|
],
|
|
],
|
|
}
|
|
}
|
|
myChart.setOption(option)
|
|
myChart.setOption(option)
|
|
},
|
|
},
|
|
- initChartR1() {
|
|
|
|
|
|
+ initChartR1 () {
|
|
let myChart = echarts.init(this.$refs['echartR1'])
|
|
let myChart = echarts.init(this.$refs['echartR1'])
|
|
let option = {
|
|
let option = {
|
|
tooltip: {
|
|
tooltip: {
|
|
trigger: 'axis',
|
|
trigger: 'axis',
|
|
|
|
+ formatter: '{a0}:{c0}' + '<br/>' + '{a1}:{c1}' + '%',
|
|
axisPointer: {
|
|
axisPointer: {
|
|
- type: 'shadow',
|
|
|
|
|
|
+ type: 'cross',
|
|
},
|
|
},
|
|
},
|
|
},
|
|
grid: {
|
|
grid: {
|
|
top: '16%',
|
|
top: '16%',
|
|
right: '10%',
|
|
right: '10%',
|
|
left: '10%',
|
|
left: '10%',
|
|
- bottom: '10%',
|
|
|
|
|
|
+ bottom: '15%',
|
|
},
|
|
},
|
|
legend: {
|
|
legend: {
|
|
top: '1',
|
|
top: '1',
|
|
@@ -690,7 +754,7 @@ let app = new Vue({
|
|
},
|
|
},
|
|
},
|
|
},
|
|
xAxis: {
|
|
xAxis: {
|
|
- data: ['煤炭', '火电', '焦化', '物流贸易', '文旅康养','水务','生物','冶金','建材'],
|
|
|
|
|
|
+ data: ['煤炭', '火电', '焦化', '物流贸易', '文旅康养', '水务', '生物', '冶金', '建材'],
|
|
axisLine: {
|
|
axisLine: {
|
|
show: true, //隐藏X轴轴线
|
|
show: true, //隐藏X轴轴线
|
|
lineStyle: {
|
|
lineStyle: {
|
|
@@ -703,6 +767,7 @@ let app = new Vue({
|
|
},
|
|
},
|
|
axisLabel: {
|
|
axisLabel: {
|
|
show: true,
|
|
show: true,
|
|
|
|
+ rotate: 20,
|
|
textStyle: {
|
|
textStyle: {
|
|
color: 'rgba(255,255,255,0.6)', //X轴文字颜色
|
|
color: 'rgba(255,255,255,0.6)', //X轴文字颜色
|
|
},
|
|
},
|
|
@@ -737,18 +802,19 @@ let app = new Vue({
|
|
},
|
|
},
|
|
{
|
|
{
|
|
type: 'value',
|
|
type: 'value',
|
|
- name: '%',
|
|
|
|
|
|
+ name: '',
|
|
nameTextStyle: {
|
|
nameTextStyle: {
|
|
color: 'rgba(255,255,255,0.6)',
|
|
color: 'rgba(255,255,255,0.6)',
|
|
},
|
|
},
|
|
axisLine: {
|
|
axisLine: {
|
|
- show: true,
|
|
|
|
|
|
+ show: false,
|
|
lineStyle: {
|
|
lineStyle: {
|
|
color: '#3D7495',
|
|
color: '#3D7495',
|
|
},
|
|
},
|
|
},
|
|
},
|
|
axisLabel: {
|
|
axisLabel: {
|
|
show: true,
|
|
show: true,
|
|
|
|
+ formatter: '{value} %',
|
|
textStyle: {
|
|
textStyle: {
|
|
color: 'rgba(250,250,250,0.6)',
|
|
color: 'rgba(250,250,250,0.6)',
|
|
},
|
|
},
|
|
@@ -774,7 +840,7 @@ let app = new Vue({
|
|
]),
|
|
]),
|
|
},
|
|
},
|
|
},
|
|
},
|
|
- data: [900, 600, 500, 450, 500,900, 600, 500, 450],
|
|
|
|
|
|
+ data: [900, 600, 500, 450, 500, 900, 600, 500, 450],
|
|
},
|
|
},
|
|
{
|
|
{
|
|
type: 'line',
|
|
type: 'line',
|
|
@@ -786,7 +852,7 @@ let app = new Vue({
|
|
color: '#FBE139',
|
|
color: '#FBE139',
|
|
},
|
|
},
|
|
},
|
|
},
|
|
- data: [60, 50, 45, 50,100,45,60,45,20],
|
|
|
|
|
|
+ data: [60, 50, 45, 50, 100, 45, 60, 45, 20],
|
|
},
|
|
},
|
|
],
|
|
],
|
|
}
|
|
}
|