|
|
@@ -2,6 +2,9 @@ let app = new Vue({
|
|
|
el: "#app",
|
|
|
data () {
|
|
|
return {
|
|
|
+ count: 0, //重点项目两线指标轮到哪个
|
|
|
+ list: [], //重点项目两线指标数组
|
|
|
+ countType: 0,//重点项目两线指标数组
|
|
|
leftEcharts1: "",
|
|
|
leftEcharts2: "",
|
|
|
leftEcharts3: "",
|
|
|
@@ -11,11 +14,47 @@ let app = new Vue({
|
|
|
leftEcharts7: "",
|
|
|
leftEcharts8: "",
|
|
|
leftEcharts9: '',
|
|
|
+ leftEcharts10: '',
|
|
|
+ leftEcharts11: '',
|
|
|
shanxiMap: "", // 山西地图
|
|
|
industryProportion: 1, // 主辅业占比轮播
|
|
|
industryLayout: 0, //产业布局分析
|
|
|
time1: "", // 4秒定时器
|
|
|
time2: "", // 针对投前产业布局分析的定时器
|
|
|
+ storageRecordConfig: {
|
|
|
+ waitTime: '2000',
|
|
|
+ hoverPause: true,
|
|
|
+ header: ['企业集团', '项目名 ', '投资总额'],
|
|
|
+ headerHeight: 80,
|
|
|
+ headerBGC: '#092853',
|
|
|
+ oddRowBGC: '#001c42',
|
|
|
+ evenRowBGC: '#001c42',
|
|
|
+ // oddRowBGC: '#05507b33',
|
|
|
+ rowNum: 6,
|
|
|
+ columnWidth: [150, 450, 150],
|
|
|
+ align: ['center', 'center', 'center'],
|
|
|
+ data: [
|
|
|
+ ['国际能源', '娄烦县120MW智慧光伏发电项目+10%储能', "6.78亿元"],
|
|
|
+ ['国际能源', '平朔矿区150MW农光储氢一体化项目', "7.84亿元"],
|
|
|
+ ['汾酒集团', '汾酒2030技改原酒产储能扩建项目（一期）', "91.02亿元"],
|
|
|
+ ['大地控股', '山西大地控股忻州新店矿业有限公司投资建设年产800万吨精品砂石骨料项目', "8.67亿元"],
|
|
|
+ ['潞安化工', '分布式光伏发电项目', "2.01亿元"],
|
|
|
+ ['太重集团', '设立太重（大同）新能源产业投资公司', "0.30亿元"],
|
|
|
+ ['大地控股', '山西大地宏翔环保科技有限公司电厂固废资源化综合利用建设项目', "3.60亿元"],
|
|
|
+ ['大地控股', '山西大地海科环保科技有限公司电厂固废资源化综合利用建设项目', "3.11亿元"],
|
|
|
+ ['汾酒集团', '保健酒园区新增原酒产能项目', "4.98亿元"],
|
|
|
+ ['汾酒集团', '白玉酒厂改扩建项目', "4.96亿元"],
|
|
|
+ ['华阳新材', '5GW高效光伏组件制造项目', "4.82亿元"],
|
|
|
+ ['华新燃气', '吉县—延长输气管道项目（一期工程）', "3.54亿元"],
|
|
|
+ ['太重集团', '建设液压挖掘机配套油缸项目', "2.60亿元"],
|
|
|
+ ['华远陆港', '物产集团参股设立项目公司投资建设山西物产万科（太原）综合物流产业园项目', "6.60亿元"],
|
|
|
+ ['太重集团', '设立昔阳县晶能新能源有限公司', "0.50亿元"],
|
|
|
+ ['山西建投', '设立山西低碳环保产业集团有限公司', "30.00亿元"],
|
|
|
+ ['山西建投', '设立山西省太忻经济一体化发展投资集团有限公司', "30.00亿元"],
|
|
|
+ ['华新燃气', '设立山西华新液化天然气集团有限公司', "3.00亿元"],
|
|
|
+ ['交控集团', '设立山西交控新能源发展有限公司', "3.00亿元"]
|
|
|
+ ],
|
|
|
+ },
|
|
|
meansList: [
|
|
|
{
|
|
|
label: "初步设计",
|
|
|
@@ -235,6 +274,8 @@ let app = new Vue({
|
|
|
created () { },
|
|
|
beforeDestroy () {
|
|
|
clearInterval(this.timer);
|
|
|
+ clearInterval(this.time1);
|
|
|
+ clearInterval(this.time2);
|
|
|
},
|
|
|
mounted () {
|
|
|
this.time4s();
|
|
|
@@ -251,6 +292,8 @@ let app = new Vue({
|
|
|
this.leftEcharts7Fun();
|
|
|
this.leftEcharts8Fun();
|
|
|
this.leftEcharts9Fun();
|
|
|
+ this.leftEcharts10Fun();
|
|
|
+ this.leftEcharts11Fun();
|
|
|
this.chinaEchartsFun();
|
|
|
this.initChartR1();
|
|
|
this.initChartR2();
|
|
|
@@ -992,7 +1035,6 @@ let app = new Vue({
|
|
|
that.right4Chart.setOption(option);
|
|
|
},
|
|
|
clickItem (index) {
|
|
|
- console.log(index);
|
|
|
const angle = 360 / this.investData.investList.length;
|
|
|
this.witchs = index;
|
|
|
this.inner = index;
|
|
|
@@ -2524,7 +2566,7 @@ let app = new Vue({
|
|
|
if (geoCoord) {
|
|
|
res.push({
|
|
|
name: data[i].name,
|
|
|
- value: geoCoord.concat(data[i].value,data[i].value2),
|
|
|
+ value: geoCoord.concat(data[i].value, data[i].value2),
|
|
|
});
|
|
|
}
|
|
|
}
|
|
|
@@ -2604,7 +2646,6 @@ let app = new Vue({
|
|
|
confine: true, // 不超出当前表
|
|
|
|
|
|
formatter: (params, ticket, callback) => {
|
|
|
- console.log(params,'?????????')
|
|
|
// 清空所有轮播
|
|
|
for (var k in geoCoordMap) {
|
|
|
that.shanxiMap.dispatchAction({
|
|
|
@@ -2756,7 +2797,7 @@ let app = new Vue({
|
|
|
showEffectOn: "emphasis",
|
|
|
rippleEffect: {
|
|
|
brushType: "stroke",
|
|
|
- color:'#58F7DF'
|
|
|
+ color: '#58F7DF'
|
|
|
},
|
|
|
hoverAnimation: true,
|
|
|
label: {
|
|
|
@@ -2802,7 +2843,7 @@ let app = new Vue({
|
|
|
showEffectOn: "emphasis",
|
|
|
rippleEffect: {
|
|
|
brushType: "stroke",
|
|
|
- color:'#DF62F2'
|
|
|
+ color: '#DF62F2'
|
|
|
},
|
|
|
hoverAnimation: true,
|
|
|
label: {
|
|
|
@@ -2860,7 +2901,7 @@ let app = new Vue({
|
|
|
let option = {
|
|
|
backgroundColor: '#00000000',
|
|
|
globe: {
|
|
|
- globeRadius:65,
|
|
|
+ globeRadius: 55,
|
|
|
baseTexture: './img/3D/world1.jpg',
|
|
|
heightTexture: './img/3D/world1.jpg',
|
|
|
displacementScale: 0.04,
|
|
|
@@ -2874,13 +2915,319 @@ let app = new Vue({
|
|
|
},
|
|
|
light: {
|
|
|
main: {
|
|
|
- intensity: 0,
|
|
|
+ intensity: 3,
|
|
|
shadow: true
|
|
|
},
|
|
|
}
|
|
|
}
|
|
|
};
|
|
|
that.leftEcharts9.setOption(option);
|
|
|
- }
|
|
|
+ },
|
|
|
+ leftEcharts10Fun () {
|
|
|
+ let that = this;
|
|
|
+ this.leftEcharts10 = echarts.init(this.$refs["leftEcharts10"]);
|
|
|
+ option = {
|
|
|
+ grid: {
|
|
|
+ top: 45,
|
|
|
+ right: 0,
|
|
|
+ left: 80,
|
|
|
+ bottom: 80,
|
|
|
+ },
|
|
|
+ tooltip: {
|
|
|
+ show: true,
|
|
|
+ trigger: "axis",
|
|
|
+ formatter: data => {
|
|
|
+ return `${data[0].name}<br /><span style="display:inline-block;border-radius:50%; width:20px;height:20px;background-color:${data[0].color}"></span> ${data[0].seriesName}：${that.numFormat(data[0].value)}亿<br/><span style="display:inline-block;border-radius:50%; width:20px;height:20px;background-color:${data[1].color.colorStops[0].color}"></span> ${data[1].seriesName}：${that.numFormat(data[1].value)}亿`
|
|
|
+ },
|
|
|
+ axisPointer: {
|
|
|
+ // 坐标轴指示器，坐标轴触发有效
|
|
|
+ type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
|
|
|
+ },
|
|
|
+ backgroundColor: "rgba(50,50,50,0.7)", // 提示框浮层的背景颜色
|
|
|
+ borderColor: "rgba(50,50,50,0.7)",
|
|
|
+ textStyle: {
|
|
|
+ color: "#fff",
|
|
|
+ fontStyle: "normal", // 文字字体的风格（'normal'，无样式；'italic'，斜体；'oblique'，倾斜字体）
|
|
|
+ fontWeight: "normal", // 文字字体的粗细（'normal'，无样式；'bold'，加粗；'bolder'，加粗的基础上再加粗；'lighter'，变细；数字定义粗细也可以，取值范围100至700）
|
|
|
+ fontSize: "28", // 文字字体大小
|
|
|
+ },
|
|
|
+
|
|
|
+ },
|
|
|
+ xAxis: {
|
|
|
+ data: commonCompany,
|
|
|
+ axisTick: {
|
|
|
+ show: false,
|
|
|
+ },
|
|
|
+ // x轴的字体颜色
|
|
|
+ axisLabel: {
|
|
|
+ rotate: 40,
|
|
|
+ textStyle: {
|
|
|
+ color: "white",
|
|
|
+ fontSize: '20',
|
|
|
+ fontFamily: 'Microsoft YaHei'
|
|
|
+ },
|
|
|
+ },
|
|
|
+ //y轴线的颜色以及宽度
|
|
|
+ axisLine: {
|
|
|
+ show: true,
|
|
|
+ lineStyle: {
|
|
|
+ color: "#1E5389",
|
|
|
+ width: 1,
|
|
|
+ type: "solid",
|
|
|
+ },
|
|
|
+ },
|
|
|
+ },
|
|
|
+ yAxis: {
|
|
|
+ name: '亿',
|
|
|
+ axisTick: {
|
|
|
+ lineStyle: {
|
|
|
+ color: "#18416F",
|
|
|
+ },
|
|
|
+ },
|
|
|
+ // y轴的字体颜色
|
|
|
+ axisLabel: {
|
|
|
+ textStyle: {
|
|
|
+ color: "white",
|
|
|
+ fontSize: '20',
|
|
|
+ fontFamily: 'Microsoft YaHei'
|
|
|
+ },
|
|
|
+ },
|
|
|
+ splitLine: {
|
|
|
+ show: true,
|
|
|
+ lineStyle: {
|
|
|
+ color: "#68b4dd66",
|
|
|
+ width: 1,
|
|
|
+ type: "dashed",
|
|
|
+ },
|
|
|
+ },
|
|
|
+ //y轴线的颜色以及宽度
|
|
|
+ axisLine: {
|
|
|
+ show: true,
|
|
|
+ lineStyle: {
|
|
|
+ color: "#1E5389",
|
|
|
+ width: 1,
|
|
|
+ type: "solid",
|
|
|
+ },
|
|
|
+ },
|
|
|
+ nameTextStyle: {
|
|
|
+ color: '#fff',
|
|
|
+ fontSize: 20,
|
|
|
+ fontFamily: 'Microsoft YaHei'
|
|
|
+ },
|
|
|
+ },
|
|
|
+ series: [
|
|
|
+ {
|
|
|
+ name: "已用额度",
|
|
|
+ type: "pictorialBar",
|
|
|
+ symbol: 'fixed',
|
|
|
+ symbolSize: [20, 5],
|
|
|
+ symbolMargin: 2,
|
|
|
+ symbolRepeat: 'repeat',
|
|
|
+ data: [26, 36, 16, 46, 26, 36, 16, 46, 26, 36, 16, 46, 26, 36, 16, 46, 26, 36],
|
|
|
+ showBackground: false,
|
|
|
+ barWidth: "15",
|
|
|
+ itemStyle: {
|
|
|
+ color: '#40A9FF'
|
|
|
+ },
|
|
|
+ zlevel: 1
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: "总额度",
|
|
|
+ type: "pictorialBar",
|
|
|
+ symbol: 'fixed',
|
|
|
+ symbolSize: [30, 5],
|
|
|
+ symbolMargin: 2,
|
|
|
+ symbolRepeat: 'repeat',
|
|
|
+ data: [390, 390, 390, 200, 390, 390, 390, 200, 390, 390, 390, 200, 390, 390, 390, 200, 390, 200],
|
|
|
+ barGap: '-130%',
|
|
|
+ barWidth: "25",
|
|
|
+ itemStyle: {
|
|
|
+ color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
|
|
|
+ {
|
|
|
+ offset: 0,
|
|
|
+ color: '#b9b7c060',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ offset: 1,
|
|
|
+ color: '#b9b7c060',
|
|
|
+ },
|
|
|
+ ]),
|
|
|
+ },
|
|
|
+ },
|
|
|
+ ]
|
|
|
+ };
|
|
|
+ //轮播
|
|
|
+ tools.loopShowTooltip(that.leftEcharts10, option, {
|
|
|
+ interval: 2000,
|
|
|
+ loopSeries: true,
|
|
|
+ });
|
|
|
+ //注册
|
|
|
+ that.leftEcharts10.setOption(option);
|
|
|
+ },
|
|
|
+ // 重点项目两线指标轮播方法
|
|
|
+ scrollChange (index) {
|
|
|
+ if (index == 18) {
|
|
|
+ this.count = -1
|
|
|
+ } else {
|
|
|
+ this.count = index
|
|
|
+ }
|
|
|
+ if (this.count > 12 && this.count != 18) {
|
|
|
+ this.countType = 1
|
|
|
+ } else {
|
|
|
+ this.countType = 0
|
|
|
+ }
|
|
|
+ for (var i = 0; i < this.list.length; i++) {
|
|
|
+ if (i == 2) {
|
|
|
+ this.list[i].classList.add('light')
|
|
|
+ } else {
|
|
|
+ this.list[i].classList.remove('light')
|
|
|
+ }
|
|
|
+ }
|
|
|
+ this.leftEcharts11 ? this.leftEcharts11.dispose() : ''
|
|
|
+ this.leftEcharts11Fun()
|
|
|
+ },
|
|
|
+ leftEcharts11Fun () {
|
|
|
+ let that = this;
|
|
|
+ this.leftEcharts11 = echarts.init(this.$refs["leftEcharts11"]);
|
|
|
+ option = {
|
|
|
+ tooltip: {
|
|
|
+ trigger: 'axis',
|
|
|
+ formatter: '指标：' + '{c0}' + '<br/>' + '发展线：' + '{c1}' + '<br/>' + '生存线：' + '{c2}', //+ '<br/>'+ '{a1}：{c1}' + '%',
|
|
|
+ axisPointer: {
|
|
|
+ type: 'shadow',
|
|
|
+ },
|
|
|
+ },
|
|
|
+ grid: {
|
|
|
+ top: '10%',
|
|
|
+ right: '5%',
|
|
|
+ left: '15%',
|
|
|
+ bottom: '20%',
|
|
|
+ },
|
|
|
+ xAxis: {
|
|
|
+ data: ['总投资收益率', '销售利润率', '成本费用利润率', '总资产周转率', '财务内部收益率'],
|
|
|
+ // data: left15[this.countType],
|
|
|
+ axisLine: {
|
|
|
+ show: true, //隐藏X轴轴线
|
|
|
+ lineStyle: {
|
|
|
+ color: '#005094',
|
|
|
+ width: 1,
|
|
|
+ },
|
|
|
+ },
|
|
|
+ axisTick: {
|
|
|
+ show: true, //隐藏X轴刻度
|
|
|
+ },
|
|
|
+ axisLabel: {
|
|
|
+ show: true,
|
|
|
+ rotate: 30,
|
|
|
+ textStyle: {
|
|
|
+ color: '#fff', //X轴文字颜色
|
|
|
+ fontSize: 20,
|
|
|
+ fontFamily: 'Microsoft YaHei'
|
|
|
+ },
|
|
|
+ },
|
|
|
+ },
|
|
|
+ yAxis: [
|
|
|
+ {
|
|
|
+ type: 'value',
|
|
|
+ splitLine: {
|
|
|
+ show: true,
|
|
|
+ lineStyle: {
|
|
|
+ color: '#68b4dd66',
|
|
|
+ type: 'dashed',
|
|
|
+ },
|
|
|
+ },
|
|
|
+ axisLine: {
|
|
|
+ show: false
|
|
|
+ },
|
|
|
+ axisLabel: {
|
|
|
+ show: true,
|
|
|
+ formatter: '{value}%',
|
|
|
+ textStyle: {
|
|
|
+ color: '#fff',
|
|
|
+ fontSize: 20,
|
|
|
+ fontFamily: 'Microsoft YaHei'
|
|
|
+ },
|
|
|
+ },
|
|
|
+ nameTextStyle: {
|
|
|
+ color: '#ebf8ac',
|
|
|
+ fontSize: 16,
|
|
|
+ fontFamily: 'Microsoft YaHei'
|
|
|
+ },
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ series: [
|
|
|
+ {
|
|
|
+ name: '实际值',
|
|
|
+ type: 'bar',
|
|
|
+ barWidth: 20,
|
|
|
+ itemStyle: {
|
|
|
+ normal: {
|
|
|
+ color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
|
|
+ {
|
|
|
+ offset: 0,
|
|
|
+ color: '#69c0ff',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ offset: 1,
|
|
|
+ color: '#082550',
|
|
|
+ },
|
|
|
+ ]),
|
|
|
+ },
|
|
|
+ },
|
|
|
+ data: [70, 52, 33, 41, 52],
|
|
|
+ // data: this.storageRecordConfig.data.length == 0 ? [] : this.storageRecordConfig.data.length == 1 ? left12[this.count][2] : left12[this.count + 1][2]
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '',
|
|
|
+ type: 'line',
|
|
|
+ barWidth: 15,
|
|
|
+ itemStyle: {
|
|
|
+ normal: {
|
|
|
+ color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
|
|
+ {
|
|
|
+ offset: 0,
|
|
|
+ color: '#69c0ff',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ offset: 1,
|
|
|
+ color: 'green',
|
|
|
+ },
|
|
|
+ ]),
|
|
|
+ },
|
|
|
+ },
|
|
|
+ data: [20, 30, 15, 28, 36],
|
|
|
+ // data: this.storageRecordConfig.data.length == 0 ? [] : this.storageRecordConfig.data.length == 1 ? left12[this.count][1] : left12[this.count + 1][1]
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '',
|
|
|
+ type: 'line',
|
|
|
+ barWidth: 15,
|
|
|
+ itemStyle: {
|
|
|
+ normal: {
|
|
|
+ color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
|
|
+ {
|
|
|
+ offset: 0,
|
|
|
+ color: '#69c0ff',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ offset: 1,
|
|
|
+ color: 'yellow',
|
|
|
+ },
|
|
|
+ ]),
|
|
|
+ },
|
|
|
+ },
|
|
|
+ data: [15, 22, 17, 33, 14],
|
|
|
+ // data: this.storageRecordConfig.data.length == 0 ? [] : this.storageRecordConfig.data.length == 1 ? left12[this.count][0] : left12[this.count + 1][0]
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ }
|
|
|
+ //轮播
|
|
|
+ tools.loopShowTooltip(that.leftEcharts11, option, {
|
|
|
+ interval: 2000,
|
|
|
+ loopSeries: true,
|
|
|
+ });
|
|
|
+ //注册
|
|
|
+ that.leftEcharts11.setOption(option);
|
|
|
+ },
|
|
|
},
|
|
|
});
|
zhbyyy
