|
|
@@ -3,6 +3,8 @@ let app = new Vue({
|
|
|
data() {
|
|
|
return {
|
|
|
year: '2022',
|
|
|
+ time: '',
|
|
|
+ timer: '',
|
|
|
mapName: 'shanxi',
|
|
|
geoCoordMap: {},
|
|
|
config1: {
|
|
|
@@ -10,24 +12,7 @@ let app = new Vue({
|
|
|
content: '{nt}个',
|
|
|
},
|
|
|
storageRecordConfig: {
|
|
|
- header: ['项目名称', '投资金额', '所属产业', '项目进度', '完成比例'],
|
|
|
- headerBGC: '#05507b33',
|
|
|
- oddRowBGC: '#69c0ff0f',
|
|
|
- evenRowBGC: '',
|
|
|
- headerHeight: '40',
|
|
|
- rowNum: 4,
|
|
|
- align: ['center'],
|
|
|
- data: [
|
|
|
- ['工程建设项目', '21.2亿', '煤炭', '终止', '2.3%'],
|
|
|
- ['工程建设项目', '21.2亿', '煤炭', '退出', '2.3%'],
|
|
|
- ['工程建设项目', '21.2亿', '煤炭', '进行中', '2.3%'],
|
|
|
- ['工程建设项目', '21.2亿', '煤炭', '进行中', '2.3%'],
|
|
|
- ['工程建设项目', '21.2亿', '煤炭', '进行中', '2.3%'],
|
|
|
- ['工程建设项目', '21.2亿', '煤炭', '进行中', '2.3%'],
|
|
|
- ],
|
|
|
- },
|
|
|
- storageRecordConfig2: {
|
|
|
- header: ['项目名称', '投资金额', '所属产业', '项目进度', '完成比例'],
|
|
|
+ header: ['项目名称', '投资金额', '项目进度'],
|
|
|
headerBGC: '#05507b33',
|
|
|
oddRowBGC: '#05507b33',
|
|
|
evenRowBGC: '',
|
|
|
@@ -35,12 +20,11 @@ let app = new Vue({
|
|
|
rowNum: 4,
|
|
|
align: ['center'],
|
|
|
data: [
|
|
|
- ['工程建设项目', '21.2亿', '煤炭', '终止', '2.3%'],
|
|
|
- ['工程建设项目', '21.2亿', '煤炭', '退出', '2.3%'],
|
|
|
- ['工程建设项目', '21.2亿', '煤炭', '进行中', '2.3%'],
|
|
|
- ['工程建设项目', '21.2亿', '煤炭', '进行中', '2.3%'],
|
|
|
- ['工程建设项目', '21.2亿', '煤炭', '进行中', '2.3%'],
|
|
|
- ['工程建设项目', '21.2亿', '煤炭', '进行中', '2.3%'],
|
|
|
+ ['工程建设项目', '21.2亿', '施工图设计'],
|
|
|
+ ['工程建设项目', '21.2亿', '施工图设计'],
|
|
|
+ ['工程建设项目', '21.2亿', '施工图设计'],
|
|
|
+ ['工程建设项目', '21.2亿', '施工图设计'],
|
|
|
+ ['工程建设项目', '21.2亿', '施工图设计'],
|
|
|
],
|
|
|
},
|
|
|
companyList: [
|
|
|
@@ -65,6 +49,17 @@ let app = new Vue({
|
|
|
],
|
|
|
}
|
|
|
},
|
|
|
+ created() {
|
|
|
+ this.time = formatDate()
|
|
|
+ this.timer = setInterval(()=> {
|
|
|
+ this.time = formatDate()
|
|
|
+ },1000)
|
|
|
+ },
|
|
|
+ beforeDestroy() {
|
|
|
+ if (this.timer) {
|
|
|
+ clearInterval(this.timer);
|
|
|
+ }
|
|
|
+ },
|
|
|
mounted() {
|
|
|
// 左侧图表
|
|
|
this.initChartL1()
|
|
|
@@ -342,13 +337,28 @@ let app = new Vue({
|
|
|
let tipHtml = `
|
|
|
<div class="tooltip-cont">
|
|
|
<p>新开工：<span>工程建设项目</span></p>
|
|
|
- <p>总投资额：<span>21.455亿</span></p>
|
|
|
+ <p>总投资额：<span>${params.data.value}亿</span></p>
|
|
|
<p>当前阶段：<span>可论证阶段</span></p>
|
|
|
<p>时间节点：<span>2021.10-2022.10</span></p>
|
|
|
</div>`
|
|
|
return tipHtml
|
|
|
},
|
|
|
},
|
|
|
+ visualMap: {
|
|
|
+ min: 0,
|
|
|
+ max: 300,
|
|
|
+ right: 0,
|
|
|
+ bottom: 0,
|
|
|
+ text: ['高', '低'],
|
|
|
+ textStyle: {
|
|
|
+ color: '#f1f1f1'
|
|
|
+ },
|
|
|
+ realtime: false,
|
|
|
+ calculable: true,
|
|
|
+ inRange: {
|
|
|
+ color: ['lightskyblue', '#2754b7']
|
|
|
+ }
|
|
|
+ },
|
|
|
geo: {
|
|
|
show: true,
|
|
|
map: 'shanxi',
|
|
|
@@ -368,13 +378,13 @@ let app = new Vue({
|
|
|
areaColor: '#1946a8',
|
|
|
shadowColor: '#1946a8',
|
|
|
borderWidth: 1, //设置外层边框
|
|
|
- borderColor: '#54c5e0',
|
|
|
+ borderColor: '#1946a8',
|
|
|
shadowOffsetX: 10,
|
|
|
shadowOffsetY: 5,
|
|
|
- shadowBlur: 3,
|
|
|
+ shadowBlur: 2,
|
|
|
},
|
|
|
emphasis: {
|
|
|
- areaColor: '#0b0098',
|
|
|
+ areaColor: '#1946a8',
|
|
|
borderColor: '#d4bc1d',
|
|
|
borderWidth: 2, //设置外层边框
|
|
|
},
|
|
|
@@ -416,7 +426,7 @@ let app = new Vue({
|
|
|
map: this.mapName,
|
|
|
geoIndex: 0,
|
|
|
aspectScale: 0.75, //长宽比
|
|
|
- showLegendSymbol: false, // 存在legend时显示
|
|
|
+ showLegendSymbol: true, // 存在legend时显示
|
|
|
label: {
|
|
|
normal: {
|
|
|
show: true,
|
|
|
@@ -480,7 +490,7 @@ let app = new Vue({
|
|
|
shadowColor: 'yellow',
|
|
|
},
|
|
|
},
|
|
|
- zlevel: 1,
|
|
|
+ zlevel: 1000,
|
|
|
},
|
|
|
{
|
|
|
name: '线路',
|
|
|
@@ -510,24 +520,69 @@ let app = new Vue({
|
|
|
initChartL1() {
|
|
|
let myChart = echarts.init(this.$refs['echartL1'])
|
|
|
let option = {
|
|
|
- grid: {
|
|
|
- left: '10%',
|
|
|
- top: '18%',
|
|
|
- bottom: '12%',
|
|
|
- right: '8%',
|
|
|
+ tooltip: {
|
|
|
+ trigger: 'item',
|
|
|
},
|
|
|
+ color: ['#6682f5','#8ba2ff','#69c0ff','#43ede3'],
|
|
|
+ legend: {
|
|
|
+ top: 'center',
|
|
|
+ orient: 'vertical',
|
|
|
+ right: '2%',
|
|
|
+ textStyle: {
|
|
|
+ color: '#9DB9EB',
|
|
|
+ },
|
|
|
+ },
|
|
|
+ series: [
|
|
|
+ {
|
|
|
+ name: '',
|
|
|
+ type: 'pie',
|
|
|
+ radius: ['55%', '80%'],
|
|
|
+ labelLine: {
|
|
|
+ normal: {
|
|
|
+ lineStyle: {
|
|
|
+ width: 1,
|
|
|
+ },
|
|
|
+ },
|
|
|
+ },
|
|
|
+ data: [
|
|
|
+ { value: 1048, name: '煤炭' },
|
|
|
+ { value: 735, name: '火电' },
|
|
|
+ { value: 580, name: '焦化' },
|
|
|
+ { value: 484, name: '风电' },
|
|
|
+ ],
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ }
|
|
|
+ myChart.setOption(option)
|
|
|
+ },
|
|
|
+ initChartL2() {
|
|
|
+ let myChart = echarts.init(this.$refs['echartL2'])
|
|
|
+ let option = {
|
|
|
tooltip: {
|
|
|
trigger: 'axis',
|
|
|
axisPointer: {
|
|
|
type: 'shadow',
|
|
|
},
|
|
|
},
|
|
|
+ grid: {
|
|
|
+ top: '16%',
|
|
|
+ right: '3%',
|
|
|
+ left: '10%',
|
|
|
+ bottom: '10%',
|
|
|
+ },
|
|
|
+ legend: {
|
|
|
+ top: '1',
|
|
|
+ right: '10',
|
|
|
+ textStyle: {
|
|
|
+ color: 'rgba(250,250,250,0.6)',
|
|
|
+ },
|
|
|
+ },
|
|
|
xAxis: {
|
|
|
- data: ['2018年', '2019年', '2020年', '2021年', '2022年', '2023年'],
|
|
|
+ data: ['山西焦煤', '山西文旅', '潞安化工', '晋能控股', '山西建投'],
|
|
|
axisLine: {
|
|
|
show: true, //隐藏X轴轴线
|
|
|
lineStyle: {
|
|
|
- color: '#3D7495',
|
|
|
+ color: '#005094',
|
|
|
width: 1,
|
|
|
},
|
|
|
},
|
|
|
@@ -544,9 +599,8 @@ let app = new Vue({
|
|
|
yAxis: [
|
|
|
{
|
|
|
type: 'value',
|
|
|
- name: '亿元',
|
|
|
nameTextStyle: {
|
|
|
- color: '#FFF',
|
|
|
+ color: '#ebf8ac',
|
|
|
},
|
|
|
splitLine: {
|
|
|
show: true,
|
|
|
@@ -571,50 +625,51 @@ let app = new Vue({
|
|
|
],
|
|
|
series: [
|
|
|
{
|
|
|
- type: 'pictorialBar',
|
|
|
- barCategoryGap: '0%',
|
|
|
- symbol: 'path://M0,10 L10,10 C5.5,10 5.5,5 5,0 C4.5,5 4.5,10 0,10 z',
|
|
|
- label: {
|
|
|
- show: true,
|
|
|
- position: 'top',
|
|
|
- distance: 5,
|
|
|
- color: '#08DFFE',
|
|
|
- fontSize: 12,
|
|
|
- },
|
|
|
+ name: '计划投资',
|
|
|
+ type: 'bar',
|
|
|
+ barWidth: 15,
|
|
|
itemStyle: {
|
|
|
normal: {
|
|
|
- color: {
|
|
|
- type: 'linear',
|
|
|
- x: 0,
|
|
|
- y: 0,
|
|
|
- x2: 0,
|
|
|
- y2: 1,
|
|
|
- colorStops: [
|
|
|
- {
|
|
|
- offset: 0,
|
|
|
- color: '#9A11FF',
|
|
|
- },
|
|
|
- {
|
|
|
- offset: 1,
|
|
|
- color: '#08DFFE',
|
|
|
- },
|
|
|
- ],
|
|
|
- global: false, // 缺省为 false
|
|
|
- },
|
|
|
+ color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
|
|
+ {
|
|
|
+ offset: 0,
|
|
|
+ color: '#69c0ff',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ offset: 1,
|
|
|
+ color: '#082550',
|
|
|
+ },
|
|
|
+ ]),
|
|
|
},
|
|
|
- emphasis: {
|
|
|
- opacity: 1,
|
|
|
+ },
|
|
|
+ data: [900, 600, 500, 450, 500],
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '实际投资',
|
|
|
+ type: 'bar',
|
|
|
+ barWidth: 15,
|
|
|
+ itemStyle: {
|
|
|
+ normal: {
|
|
|
+ color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
|
|
+ {
|
|
|
+ offset: 0,
|
|
|
+ color: '#957DFF',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ offset: 1,
|
|
|
+ color: '#082550',
|
|
|
+ },
|
|
|
+ ]),
|
|
|
},
|
|
|
},
|
|
|
- data: [123, 60, 25, 18, 12, 9],
|
|
|
+ data: [500, 900, 600, 800, 450],
|
|
|
},
|
|
|
],
|
|
|
}
|
|
|
-
|
|
|
myChart.setOption(option)
|
|
|
},
|
|
|
- initChartL2() {
|
|
|
- let myChart = echarts.init(this.$refs['echartL2'])
|
|
|
+ initChartR1() {
|
|
|
+ let myChart = echarts.init(this.$refs['echartR1'])
|
|
|
let option = {
|
|
|
tooltip: {
|
|
|
trigger: 'axis',
|
|
|
@@ -624,19 +679,18 @@ let app = new Vue({
|
|
|
},
|
|
|
grid: {
|
|
|
top: '16%',
|
|
|
- right: '3%',
|
|
|
+ right: '10%',
|
|
|
left: '10%',
|
|
|
bottom: '10%',
|
|
|
},
|
|
|
legend: {
|
|
|
top: '1',
|
|
|
- right: '10',
|
|
|
textStyle: {
|
|
|
color: 'rgba(250,250,250,0.6)',
|
|
|
},
|
|
|
},
|
|
|
xAxis: {
|
|
|
- data: ['山西焦煤', '山西文旅', '潞安化工', '晋能控股', '山西建投'],
|
|
|
+ data: ['煤炭', '火电', '焦化', '物流贸易', '文旅康养','水务','生物','冶金','建材'],
|
|
|
axisLine: {
|
|
|
show: true, //隐藏X轴轴线
|
|
|
lineStyle: {
|
|
|
@@ -657,8 +711,9 @@ let app = new Vue({
|
|
|
yAxis: [
|
|
|
{
|
|
|
type: 'value',
|
|
|
+ name: '亿元',
|
|
|
nameTextStyle: {
|
|
|
- color: '#ebf8ac',
|
|
|
+ color: 'rgba(255,255,255,0.6)',
|
|
|
},
|
|
|
splitLine: {
|
|
|
show: true,
|
|
|
@@ -680,11 +735,30 @@ let app = new Vue({
|
|
|
},
|
|
|
},
|
|
|
},
|
|
|
+ {
|
|
|
+ type: 'value',
|
|
|
+ name: '%',
|
|
|
+ nameTextStyle: {
|
|
|
+ color: 'rgba(255,255,255,0.6)',
|
|
|
+ },
|
|
|
+ axisLine: {
|
|
|
+ show: true,
|
|
|
+ lineStyle: {
|
|
|
+ color: '#3D7495',
|
|
|
+ },
|
|
|
+ },
|
|
|
+ axisLabel: {
|
|
|
+ show: true,
|
|
|
+ textStyle: {
|
|
|
+ color: 'rgba(250,250,250,0.6)',
|
|
|
+ },
|
|
|
+ },
|
|
|
+ },
|
|
|
],
|
|
|
series: [
|
|
|
{
|
|
|
- name: '计划投资',
|
|
|
type: 'bar',
|
|
|
+ name: '柱形数据',
|
|
|
barWidth: 15,
|
|
|
itemStyle: {
|
|
|
normal: {
|
|
|
@@ -700,64 +774,19 @@ let app = new Vue({
|
|
|
]),
|
|
|
},
|
|
|
},
|
|
|
- data: [900, 600, 500, 450, 500],
|
|
|
+ data: [900, 600, 500, 450, 500,900, 600, 500, 450],
|
|
|
},
|
|
|
{
|
|
|
- name: '实际投资',
|
|
|
- type: 'bar',
|
|
|
+ type: 'line',
|
|
|
+ name: '折线数据',
|
|
|
barWidth: 15,
|
|
|
+ yAxisIndex: 1,
|
|
|
itemStyle: {
|
|
|
normal: {
|
|
|
- color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
|
|
- {
|
|
|
- offset: 0,
|
|
|
- color: '#957DFF',
|
|
|
- },
|
|
|
- {
|
|
|
- offset: 1,
|
|
|
- color: '#082550',
|
|
|
- },
|
|
|
- ]),
|
|
|
- },
|
|
|
- },
|
|
|
- data: [500, 900, 600, 800, 450],
|
|
|
- },
|
|
|
- ],
|
|
|
- }
|
|
|
- myChart.setOption(option)
|
|
|
- },
|
|
|
- initChartR1() {
|
|
|
- let myChart = echarts.init(this.$refs['echartR1'])
|
|
|
- let option = {
|
|
|
- tooltip: {
|
|
|
- trigger: 'item',
|
|
|
- },
|
|
|
- legend: {
|
|
|
- top: 'center',
|
|
|
- orient: 'vertical',
|
|
|
- right: '2%',
|
|
|
- textStyle: {
|
|
|
- color: '#9DB9EB',
|
|
|
- },
|
|
|
- },
|
|
|
- series: [
|
|
|
- {
|
|
|
- name: '',
|
|
|
- type: 'pie',
|
|
|
- radius: ['55%', '80%'],
|
|
|
- labelLine: {
|
|
|
- normal: {
|
|
|
- lineStyle: {
|
|
|
- width: 1,
|
|
|
- },
|
|
|
+ color: '#FBE139',
|
|
|
},
|
|
|
},
|
|
|
- data: [
|
|
|
- { value: 1048, name: '煤炭' },
|
|
|
- { value: 735, name: '火电' },
|
|
|
- { value: 580, name: '焦化' },
|
|
|
- { value: 484, name: '风电' },
|
|
|
- ],
|
|
|
+ data: [60, 50, 45, 50,100,45,60,45,20],
|
|
|
},
|
|
|
],
|
|
|
}
|
