let app = new Vue({
el: '#app',
data () {
return {
boardUrl: '', // 跳转路径
boardTipShow: false, // 项目看板弹窗专用
lineCommonCompany: [], //双柱状图弹窗上面的折线图x轴
changeLine: true,
versions: true,
app_token: '',
centerShow: false, // 中间内容显示
echartR4Chart: '',// 倒数第二个专用
echartR5Chart: '', // 倒是第一个专用
myChartTip1: '', // 弹窗单个柱状图专用
myChartTip2: '', // 弹窗两个柱状图专用
myChartTip3: '', // 弹窗两个柱状图专用
echartEnterpriseShow: false, // 企业额度分析控制
mapChart: '',//地图专用echarts
chartCarousel: '',//做大屏轮播专用echarts
mapTipShow: false,
echartSingleTipShow: false,
echartDoubleTipShow: false,
projectListTipShow: false, //项目列表专属弹窗
titleUrl: '',
titleName: '',
yellowCount: 0, // 黄圈轮播参数
yellowPosition: 40,// 黄圈悬浮窗位置参数
yellowType: true, // 黄圈悬浮停止轮播
echartR1Fd: true,
echartR2Fd: true,
echartC2Fd: true,
echartR3Fd: true,
echarts1Time: 16000,
time: '',
timer: '',
timer2: '',
center1: center1,
showTip2: false,
showTip3: false,
list: [],
count: 0,
countType: 0,
geoCoordMap: {},
storageRecordConfig2: center9,
titleList: right1,
centerLeftList: right3,
storageRecordConfig: left11,
config5: {
rowNum: 9,
waitTime: 2000,
headerHeight: '40',
header: ["项目名称", "所属组织", '实施主体', '建设性质(新建/续建)', '产业类别', '建设地点', '2022年投资完成额(万元)'],
data: [
["青银二广高速公路太原联络线建设PPP项目", "交控集团", "山西路桥建设集团有限公司", "新建", "交通运输业", "山西省太原市、晋中市", "148,086.00"],
["国道241、省道岚马线汾河水库段改线工程", "交控集团", "太原国省道汾河水库段建设管理有限公司", "续建", "交通运输业", "山西省 太原市、吕梁市", "165,314.33"],
["路桥科技中心", "交控集团", "山西路桥集团多经营有限公司", "续建", "建筑房地产", "山西省太原市", "8,098.26"],
["路桥科研基地", "交控集团", "山西路桥集团多经有限公司", "续建", "建筑房地产", "山西省太原市", "6,596.56"],
["武宿高速充电站建设", "交控集团", "山西交通运输投融资集团有限责任公司", "新建", "新能源", "山西省太原市", "100.00"],
["山西交通研创商务基地项目", "交控集团", "山西交通物流集团有限公司", "续建", "建筑房地产", "山西省太原市", "4,097.00"],
["山西省交通科学研究院产业化基地", "交控集团", "山西省交通科技研发有限公司", "续建", "建筑房地产", "山西省太原市武洛街27号", "3,242.00"],
["太长高速公路太原南收费站(二期工程暨龙城服务区)项目", "交控集团", "山西省交通开发投资集团有限公司龙城服务区发展分公司", "续建", "建筑房地产", "山西省太原市", "3,580.00"],
["山西转型综改示范区中小企业产业园项目", "交控集团", "山西交投综改园区开发有限公司", "续建", "建筑房地产", "山西省太原市", "14,432.00"]
],
align: ["center", "center", "center", "center", "center", "center", "center"],
headerBGC: "#153A62",
oddRowBGC: "#061F42",
evenRowBGC: "#0C284A",
},
config6: {
rowNum: 15,
waitTime: 1000,
headerHeight: '100',
header: ["项目名称", "所属组织", '实施主体', '产业类别I级', '产业类别II级', '2022年投资完成额(万元)'],
data: [
["6万吨/年PBAT项目", "华阳新材", "华阳生物降解公司", "战略性新兴产业", "新材料", "20,340.00"],
["2万吨/年生物降解改性材料及塑料制品项目", "华阳新材", "华阳生物降解公司", "战略性新兴产业", "新材料", "5,270.00"],
["2万吨/年全系列生物降解新材料项目", "华阳新材", "华阳新材", "战略性新兴产业", "新材料", "5,560.00"],
["开元煤层气发电项目", "华阳新材", "阳煤扬德公司", "战略性新兴产业", "煤层气", "880.00"],
["平舒翟下庄煤层气发电项目", "华阳新材", "阳煤扬德公司", "战略性新兴产业", "煤层气", "570.00"],
["5GW高效光伏组件制造项目一期2GW", "华阳新材", "华储光电公司", "战略性新兴产业", "新能源", "10,000.00"],
["钠离子电池正极材料千吨级生产项目", "华阳新材", "华钠铜能公司", "战略性新兴产业", "新能源", "6,060.00"],
["钠离子电池负极材料千吨级生产项目", "华阳新材", "华钠碳能公司", "战略性新兴产业", "新能源", "4,080.00"],
["1GWh钠离子Pack电池生产线建设项目", "华阳新材", "华钠芯能公司", "战略性新兴产业", "新能源", "2790.00"],
["天成光储网充项目", "华阳新材", "新阳公司", "战略性新兴产业", "新能源", "1680.00"],
["宏厦三建绿色建材工业园区项目", "华阳新材", "宏厦三建", "战略性新兴产业", "新材料", "2,550.00"],
["亚美公司超低排放改造及节能技改项目", "华阳新材", "亚美公司", "战略性新兴产业", "其他", "20,101.00"],
["超净滤材项目", "华阳新材", "华阳科创城", "战略性新兴产业", "新材料", "5,510.00"],
["华阳集团网络安全工作顶层设计及整体整改项目", "华阳新材", "华阳集团", "战略性新兴产业", "新一代信息技术", "814.00"],
["山西科技创新城阳煤设计研发中心项目", "华阳新材", "碳基合成新材料公司", "战略性新兴产业", "其他", "12,930.00"],
["阳煤西110kv变电站及线路建设工程", "华阳新材", "华阳股份", "战略性新兴产业", "其他", "7,060.00"],
["郊区35kV输变电工程", "华阳新材", "华储光电公司", "战略性新兴产业", "其他", "1,250.00"],
["环境保护及治理", "华阳新材", "华阳股份", "战略性新兴产业", "节能环保", "5,890.00"],
["增资山西新阳清洁能源有限公司", "华阳新材", "华阳股份", "战略性新兴产业", "新能源产业", "101,700.00"],
["增资阳煤集团纳谷(山西)气凝胶科创城管理有限责任公司", "华阳新材", "华阳集团", "战略性新兴产业", "新材料产业", "34,582.00"],
["太化集团普田农业有限公司股权收购及增资", "华阳新材", "华阳新材", "战略性新兴产业", "新材料产业", "7,400.00"],
["山西阳煤道得新材股权投资合伙企业(有限合伙)", "华阳新材", "华阳资本", "战略性新兴产业", "新材料产业", "5,000.00"],
["阳泉市梧桐树嘉裕阳煤智能制造股权投资合伙企业(有限合伙)", "华阳新材", "华阳资本华阳股份", "战略性新兴产业", "新材料产业", "6,576.29"],
["阳煤纳谷(山西)气凝胶经销有限责任公司", "华阳新材", "气凝胶科创城", "战略性新兴产业", "新材料产业", "4,335.00"],
["阳煤纳谷(山西)节能服务有限责任公司", "华阳新材", "气凝胶科创城", "战略性新兴产业", "新材料产业", "3,674.00"],
["华阳诺爱特(山西)新材料科技有限公司", "华阳新材", "气凝胶科创城", "战略性新兴产业", "新材料产业", "500.00"],
["华阳纳谷(北京)新材料科技有限公司", "华阳新材", "气凝胶科创城", "战略性新兴产业", "新材料产业", "250.00"],
["山西华储光电有限责任公司", "华阳新材", "山西新阳清洁能源有限公司", "战略性新兴产业", "新材料产业", "45,000.00"],
["山西华钠铜能科技有限责任公司", "华阳新材", "山西新阳清洁能源有限公司", "战略性新兴产业", "新能源产业", "900.00"],
["山西华钠碳能科技有限责任公司", "华阳新材", "山西新阳清洁能源有限公司", "战略性新兴产业", "新能源产业", "450.00"]
],
align: ["center", "center", "center", "center", "center", "center", "center"],
headerBGC: "#153A62",
oddRowBGC: "#061F42",
evenRowBGC: "#0C284A",
},
}
},
created () {
this.time = formatDate()
this.timer = setInterval(() => {
this.time = formatDate()
}, 1000)
this.timer2 = setInterval(() => {
this.yellowType && this.changeYellow()
}, 2000)
},
beforeDestroy () {
if (this.timer) {
clearInterval(this.timer);
}
if (this.timer2) {
clearInterval(this.timer2);
}
},
mounted () {
if (this.versions) {
// 接口版
this.getAppToken()
setTimeout(() => {
this.changeTopColor()
// 大屏二
this.initChinaChart()
// 大屏三
this.initChartR5()
this.changeYellow()
})
} else {
// 假数据版
setTimeout(() => {
this.initChartL1()
this.initChartL2()
this.initChartL3()
this.initChartL4()
this.initChartL5()
this.initChartL6()
this.initChartL7()
this.initChartL8()
this.initChartL10()
this.initChartL11()
this.changeTopColor()
// 大屏二
this.initChinaChart()
// 大屏三
this.initChartR1()
this.initChartR2()
this.initChartR3()
this.changeYellow()
})
}
},
methods: {
// 获取token
getAppToken () {
let value = {
"appId": "xilan1014", //系统编码
"appSecret": "12345678910Aa@Bb@Cc", //AccessToken加密认证密钥
"tenantid": "", //租户id
"accountId": "", //数据中心id
"language": "zh_CN"
}
post('/ierp/api/getAppToken.do', value).then(res => {
this.app_token = res.data.app_token
this.getAccessToken()
})
},
// 获取AccessToken
getAccessToken () {
let value = {
"user": "15503076138", //登录用户手机号
"apptoken": this.app_token, //应用令牌
"tenantid": "", //租户id
"accountId": "", //数据中心id
"usertype": "Mobile"
}
post('/ierp/api/login.do', value).then(res => {
this.access_token = res.data.access_token
this.getOrg()
})
},
// 获取组织架构列表
getOrg () {
return new Promise((resolve, err) => {
let value = {
access_token: this.access_token,
}
get('/ierp/kapi/v2/mdnb/mdnb_xmkb/mdnb_manager_middle/getOrgName', value).then(res => {
commonCompany = res.data.map(item => item.simplename)
// 左边
this.getDate1()
this.getDate2()
this.getDate3()
this.getDate4()
this.getDate5()
this.getDate6()
// 右边
// this.getDate7()
// this.getDate8()
// this.getDate9()
// this.getDate10()
// // this.getDate11() // 右下A
// this.getDate12() // 右下B
// 中间
// this.getDate14()
resolve(1);
})
});
},
// 获取左边企业额度分析
getDate1 () {
return new Promise((resolve, err) => {
let value = {
access_token: this.access_token,
"data": {
"mdnb_combofield": "A",
"mdnb_datefield": "2023-01-01",
},
pageSize: 1000
}
post('/ierp/kapi/v2/mdnb/mdnb_xmkb/mdnb_manager_preinvest/tqqyedfx', value).then(res => {
let dataList = res.data.rows[0].entryentity
left3[0] = []
dataList.forEach(item => {
left3[0].push(item.mdnb_amountfield25)
})
this.initChartL4(dataList)
resolve(1);
})
});
},
// 获取左边投资计划分析
getDate2 () {
let that = this
return new Promise((resolve, err) => {
let value = {
access_token: this.access_token,
"data": {
"mdnb_combofield": "A",
"mdnb_datefield": "2023-01-01",
},
pageSize: 1000
}
post('/ierp/kapi/v2/mdnb/mdnb_xmkb/mdnb_manager_preinvest/tqtzjhfx', value).then(res => {
let dataList = res.data.rows[0]
left4 = []
left4[0] = dataList.mdnb_amountfield7
left4[1] = dataList.mdnb_amountfield13
left4[2] = dataList.mdnb_amountfield23
left4[3] = dataList.mdnb_amountfield43
left4[4] = dataList.mdnb_integerfield14
left5[0].y = dataList.mdnb_amountfield9
left5[0].num = dataList.mdnb_integerfield15
left5[1].y = dataList.mdnb_amountfield43
left5[1].num = dataList.mdnb_integerfield14
left6[0].y = dataList.mdnb_amountfield15
left6[0].num = dataList.mdnb_integerfield16
left6[1].y = dataList.mdnb_amountfield16
left6[1].num = dataList.mdnb_integerfield17
that.initChartL2()
that.initChartL3()
resolve(1);
})
});
},
// 获取左边产业布局分析
getDate3 () {
let that = this
return new Promise((resolve, err) => {
let value = {
access_token: this.access_token,
"data": {
"mdnb_combofield": "A",
"mdnb_datefield": "2023-01-01",
},
pageSize: 1000
}
post('/ierp/kapi/v2/mdnb/mdnb_xmkb/mdnb_manager_preinvest/tqcebjfx', value).then(res => {
let dataList = this.classify(res.data.rows[0].mdnb_entryentity, 'mdnb_textfield1')
// console.log('看看分组情况', dataList, res.data.rows[0].mdnb_entryentity)
// 传统产业分析
dataList[0].data.forEach((item, index) => {
left7[index].num = item.mdnb_integerfield13
left7[index].y = item.mdnb_amountfield8
})
this.initChartL5()
// 战略性新兴产业
dataList[1].data.forEach((item, index) => {
left8[index].num = item.mdnb_integerfield13
left8[index].y = item.mdnb_amountfield8
})
this.initChartL6()
// 特色优势产业
dataList[2].data.forEach((item, index) => {
left9[index].num = item.mdnb_integerfield13
left9[index].y = item.mdnb_amountfield8
})
this.initChartL7()
// 公共基础等产业
dataList[3].data.forEach((item, index) => {
left10[index].num = item.mdnb_integerfield13
left10[index].y = item.mdnb_amountfield8
})
this.initChartL8()
resolve(1);
})
});
},
// 获取左边项目阶段分析
getDate4 () {
let that = this
return new Promise((resolve, err) => {
let value = {
access_token: this.access_token,
"data": {
"mdnb_combofield": "A",
"mdnb_datefield": "2023-01-01",
},
pageSize: 1000
}
post('/ierp/kapi/v2/mdnb/mdnb_xmkb/mdnb_manager_preinvest/tqxmjdfx', value).then(res => {
let dataList = res.data.rows[0]
// 固定资产进度分布
// 特别监管
left13[0][0][2] = dataList.mdnb_integerfield1
left13[0][0][3] = dataList.mdnb_amountfield241
left13[0][1][2] = dataList.mdnb_integerfield3
left13[0][1][3] = dataList.mdnb_amountfield5
left13[0][2][2] = dataList.mdnb_integerfield5
left13[0][2][3] = dataList.mdnb_amountfield21
left13[0][3][2] = dataList.mdnb_integerfield7
left13[0][3][3] = dataList.mdnb_amountfield29
// 备案
left13[1][0][2] = dataList.mdnb_integerfield2
left13[1][0][3] = dataList.mdnb_amountfield341
left13[1][1][2] = dataList.mdnb_integerfield4
left13[1][1][3] = dataList.mdnb_amountfield11
left13[1][2][2] = dataList.mdnb_integerfield6
left13[1][2][3] = dataList.mdnb_amountfield28
left13[1][3][2] = dataList.mdnb_integerfield8
left13[1][3][3] = dataList.mdnb_amountfield30
// 股权类进度分布
// 特别监管
left14[0][0][2] = dataList.mdnb_integerfield11
left14[0][0][3] = dataList.mdnb_amountfield2411
left14[0][1][2] = dataList.mdnb_integerfield31
left14[0][1][3] = dataList.mdnb_amountfield51
left14[0][2][2] = dataList.mdnb_integerfield51
left14[0][2][3] = dataList.mdnb_amountfield211
left14[0][3][2] = dataList.mdnb_integerfield71
left14[0][3][3] = dataList.mdnb_amountfield291
// 备案
left14[1][0][2] = dataList.mdnb_integerfield21
left14[1][0][3] = dataList.mdnb_amountfield3411
left14[1][1][2] = dataList.mdnb_integerfield41
left14[1][1][3] = dataList.mdnb_amountfield111
left14[1][2][2] = dataList.mdnb_integerfield61
left14[1][2][3] = dataList.mdnb_amountfield281
left14[1][3][2] = dataList.mdnb_integerfield81
left14[1][3][3] = dataList.mdnb_amountfield301
this.initChartL10()
this.initChartL11()
resolve(1);
})
});
},
// 获取左边投资额度分析
getDate5 () {
let that = this
return new Promise((resolve, err) => {
let value = {
access_token: this.access_token,
"data": {
"mdnb_combofield": "A",
"mdnb_datefield": "2023-01-01",
},
pageSize: 1000
}
post('/ierp/kapi/v2/mdnb/mdnb_xmkb/mdnb_manager_preinvest/tqtzedfx', value).then(res => {
let dataList = res.data.rows[0]
left1[0] = dataList.mdnb_amountfield
left1[1] = dataList.mdnb_amountfield1
left1[2] = dataList.mdnb_amountfield2
left2[0] = dataList.mdnb_decimalfield
left2[1] = dataList.mdnb_amountfield3
this.initChartL1()
resolve(1);
})
});
},
// 获取左边重点项目两线指标
getDate6 () {
let that = this
return new Promise((resolve, err) => {
let value = {
access_token: this.access_token,
"data": {
"mdnb_combofield": "A",
"mdnb_datefield": "2023-01-01",
},
pageSize: 1000
}
post('/ierp/kapi/v2/mdnb/mdnb_xmkb/mdnb_manager_preinvest/tqzdlxzb', value).then(res => {
let dataList2 = this.classify(res.data.rows[0].mdnb_entryentity1, 'mdnb_textfield3')
left12 = []
dataList2.forEach((item, index) => {
left12[index] = [[], [], []]
for (let i = 0; i < 5; i++) {
left12[index][0] = item.data[i].mdnb_integerfield10
left12[index][1] = item.data[i].mdnb_integerfield12
left12[index][2] = item.data[i].mdnb_integerfield9
}
})
let dataList = []
dataList2.forEach((item, index) => {
dataList[index] = []
dataList[index][0] = item.data[0].mdnb_textfield18
dataList[index][1] = item.data[0].mdnb_textfield3
dataList[index][2] = item.data[0].mdnb_amountfield24
})
this.storageRecordConfig.data = dataList
this.storageRecordConfig = { ...this.storageRecordConfig }
resolve(1);
})
});
},
// 获取右边顶部条数据
getDate7 () {
return new Promise((resolve, err) => {
let value = {
access_token: this.access_token,
"request": {
isInsert: '0'
},
pageSize: 1000
}
post('/ierp/kapi/v2/mdnb/mdnb_xmkb/mdnb_manager_middle/getTabpageap', value).then(res => {
right1[0].number = res.data.mdnb_one_step
right1[2].number = res.data.mdnb_two_step
right1[4].number = res.data.mdnb_three_step
right1[6].number = res.data.mdnb_four_step
right1[8].number = res.data.mdnb_five_step
right1[10].number = res.data.mdnb_six_step
right1[12].number = res.data.mdnb_seven_step
right1[14].number = res.data.mdnb_eight_step
resolve(1);
})
});
},
// 获取右边中间左边的(正偏差/容差内/负偏差)
getDate8 () {
return new Promise((resolve, err) => {
let value = {
access_token: this.access_token,
"request": {
isInsert: '0'
},
pageSize: 1000
}
post('/ierp/kapi/v2/mdnb/mdnb_xmkb/mdnb_manager_middle/getInvestSunstraction', value).then(res => {
right3[0].value = res.data.mdnb_projectnum_z
right3[0].value2 = res.data.mdnb_amountall_z
right3[1].value = res.data.mdnb_projectnum_r
right3[1].value2 = res.data.mdnb_amountall_r
right3[2].value = res.data.mdnb_projectnum_f
right3[2].value2 = res.data.mdnb_amountall_f
resolve(1);
})
});
},
// 获取右边中间右边的(预算额/已签合同额。。。)
getDate9 () {
return new Promise((resolve, err) => {
let value = {
access_token: this.access_token,
"request": {
isInsert: '0'
},
pageSize: 1000
}
post('/ierp/kapi/v2/mdnb/mdnb_xmkb/mdnb_manager_middle/getUnitBudgetExecuteDate', value).then(res => {
res.data.forEach((item, index) => {
right4[index].value = item.mdnb_aheadmoney
right4[index].value2 = item.mdnb_edmoney
right4[index].value3 = item.mdnb_smoney
right4[index].value4 = item.mdnb_jmoney
right4[index].value5 = item.mdnb_fkmoney
})
this.initChartR1()
resolve(1);
})
});
},
// 进度成本偏差
getDate10 () {
return new Promise((resolve, err) => {
let value = {
access_token: this.access_token,
"request": {
isInsert: '0'
},
pageSize: 1000
}
post('/ierp/kapi/v2/mdnb/mdnb_xmkb/mdnb_manager_middle/getInvestSunstractionGas', value).then(res => {
res.data.forEach((item, index) => {
right5[0][index][1] = item.mdnb_amount_z
right5[1][index][1] = item.mdnb_amount_n
right5[2][index][1] = item.mdnb_amount_f
})
this.initChartR2()
resolve(1);
})
});
},
// 项目风险分析A
getDate11 () {
return new Promise((resolve, err) => {
let value = {
access_token: this.access_token,
"request": {
isInsert: '0'
},
pageSize: 1000
}
post('/ierp/kapi/v2/mdnb/mdnb_xmkb/mdnb_manager_middle/getUnitNoSolveDangerDate', value).then(res => {
res.data.forEach((item, index) => {
right6[index].value = item.mdnb_height
right6[index].value2 = item.mdnb_midle
right6[index].value3 = item.mdnb_bottom
})
this.initChartR3()
resolve(1);
})
});
},
// 项目风险分析B(雷达图)
getDate12 () {
return new Promise((resolve, err) => {
let value = {
access_token: this.access_token,
"request": {
isInsert: '0'
},
pageSize: 1000
}
post('/ierp/kapi/v2/mdnb/mdnb_xmkb/mdnb_manager_middle/getUnitDangerPoraitDate', value).then(res => {
res.data.forEach((item, index) => {
right7[index][0] = item.mdnb_anquan
right7[index][1] = item.mdnb_fukuan
right7[index][2] = item.mdnb_hetong
right7[index][3] = item.mdnb_jiesuan
right7[index][4] = item.mdnb_jindu
right7[index][5] = item.mdnb_securty
})
this.getDate11()
resolve(1);
})
});
},
// 中间大屏数据
getDate14 () {
return new Promise((resolve, err) => {
let value = {
access_token: this.access_token,
mock: false,
presetYear: 2023
}
get('/ierp/kapi/v2/mdnb/mdnb_pmba_ext/presetdata/getKeyData', value).then(res => {
// 头部指标
center4[0] = res.data.transformations.estateAmount
center4[1] = res.data.transformations.estateNum
center4[2] = res.data.transformations.figureAmount
center4[3] = res.data.transformations.figureNum
// 左投部指标
center1[0] = res.data.keyIndicators.totalSum
center1[1] = res.data.keyIndicators.total
center1[2] = res.data.keyIndicators.property
center1[3] = res.data.keyIndicators.invest
// 投资产业分布
res.data.distribution.forEach((item, index) => {
center2[index] = { name: item.type, y: item.amount, num: item.count }
})
// 投资执行情况
res.data.implementationStatus.forEach((item, index) => {
center3[index].value = item.plan
center3[index].value2 = item.reality
})
// 五个一体化
center6[0].value = res.data.five.amount1
center6[1].value = res.data.five.amount2
center6[2].value = res.data.five.amount3
center6[3].value = res.data.five.amount4
center6[4].value = res.data.five.amount5
// 投资阶段分析
center7[0].value = res.data.investmentStage.newnum
center7[0].value2 = res.data.investmentStage.newamount
center7[1].value = res.data.investmentStage.renewnum
center7[1].value2 = res.data.investmentStage.renewamount
// 重点项目监控
center8 = []
res.data.projectMonitoring.forEach((item, index) => {
center8.push({ value: item.amount, name: item.name, office: item.group })
})
// 山西地图
center5 = []
res.data.investmentMap.forEach((item, index) => {
center5.push({ name: item.address, value: item.amount, value2: item.value2 })
})
// 项目状态
proState.projectStatus1 = res.data.projectStatus.projectStatus1
proState.projectStatus2 = res.data.projectStatus.projectStatus2
proState.projectStatus3 = res.data.projectStatus.projectStatus3
resolve(1);
})
});
},
// 右边穿透一级
rightPenetrateOne () {
return new Promise((resolve, err) => {
let value = {
access_token: this.access_token,
"request": {
isInsert: '0'
},
pageSize: 1000
}
post('/ierp/kapi/v2/mdnb/mdnb_xmkb/mdnb_manager_middle/getOneLevelData', value).then(res => {
res.data.forEach((item, index) => {
common4[index] = item.mdnb_projects
common5[index] = item.mdnb_amount_sl
})
setTimeout(() => {
this.initChartLTip2()
this.initChartLTip3()
})
resolve(1);
})
});
},
// 右边穿透二级
rightPenetrateTwo (modelName, substraction, orgName,location) {
let that = this
if(location == 'right'){
return new Promise((resolve, err) => {
let value = {
access_token: this.access_token,
"request": {
isInsert: '0',
modelName,
substraction,
orgName
},
pageSize: 1000
}
post('/ierp/kapi/v2/mdnb/mdnb_xmkb/mdnb_manager_middle/getTwoLevelData', value).then(res => {
that.config6.data = []
res.data.forEach((item, index) => {
that.config6.data[index] = []
that.config6.data[index][0] = item.mdnb_project_name
that.config6.data[index][2] = item.mdnb_implement_org
that.config6.data[index][3] = item.mdnb_insdrutytype1
that.config6.data[index][4] = item.mdnb_insdrutytype2
})
that.config6 = { ...that.config6 }
that.projectListTipShow = true
resolve(1);
})
});
}
},
// 左边穿透一级
leftPenetrateOne (mdnb_textfield11, mdnb_textfield13, mdnb_textfield16, mdnb_textfield23,typeNum) {
return new Promise((resolve, err) => {
let value = {
access_token: this.access_token,
"data": {
mdnb_combofield: 'A',
mdnb_textfield11,
mdnb_textfield13,
mdnb_textfield16,
mdnb_textfield23,
mdnb_datefield: '2022-01-01'
},
pageSize: 1000
}
post('/ierp/kapi/v2/mdnb/mdnb_xmkb/mdnb_manager_preinvest/yjct', value).then(res => {
if(typeNum == 2){
common4 = []
common5 = []
res.data.rows[0].mdnb_entryentity12.forEach((item, index) => {
common4.push(item.mdnb_integerfield18)
common5.push(item.mdnb_amountfield12)
})
setTimeout(() => {
this.initChartLTip2()
this.initChartLTip3()
})
}else if(typeNum == 1){
}
resolve(1);
})
});
},
// 左边穿透二级
leftPenetrateTwo (mdnb_textfield12, mdnb_textfield19, mdnb_textfield15, mdnb_textfield17, mdnb_textfield20) {
let that = this
console.log(mdnb_textfield12, mdnb_textfield19, mdnb_textfield15, mdnb_textfield17, mdnb_textfield20)
return new Promise((resolve, err) => {
let value = {
access_token: this.access_token,
"data": {
mdnb_combofield: 'A',
mdnb_datefield: '2022-03-03',
mdnb_textfield12,
mdnb_textfield19,
mdnb_textfield15,
mdnb_textfield17,
mdnb_textfield20
},
pageSize: 1000
}
post('/ierp/kapi/v2/mdnb/mdnb_xmkb/mdnb_manager_preinvest/ejct', value).then(res => {
console.log(res, '看看啥情况')
// res.data.forEach((item, index) => {
// that.config6.data[index] = []
// that.config6.data[index][0] = item.mdnb_project_name
// that.config6.data[index][2] = item.mdnb_implement_org
// that.config6.data[index][3] = item.mdnb_insdrutytype1
// that.config6.data[index][4] = item.mdnb_insdrutytype2
// })
// that.config6 = { ...that.config6 }
that.projectListTipShow = true
resolve(1);
})
});
},
// 中间穿透一级 一个柱状图还是两个
centerPenetrateOne (type, param, typeNum) {
let that = this
return new Promise((resolve, err) => {
let value = {
access_token: this.access_token,
mock: false,
presetYear: 2023,
type,
param
}
get('/ierp/kapi/v2/mdnb/mdnb_pmba_ext/presetdata/getPenetrationLevel1', value).then(res => {
if (typeNum == 1) {
res.data.keyIndicators.forEach((item, index) => {
common3 = []
if (param == 'cyplanamount') {
common3.push(item.cyplanamount)
}
if (param == 'cyplancount') {
common3.push(item.cyplanamount)
}
if (param == 'szplanamount') {
common3.push(item.cyplanamount)
}
if (param == 'szplancount') {
common3.push(item.szplancount)
}
if (param == 'investamount') {
common3.push(item.investamount)
}
if (param == 'projectcount') {
common3.push(item.projectcount)
}
if (param == 'gdzcamount') {
common3.push(item.projectcount)
}
if (param == 'gqtzamount') {
common3.push(item.projectcount)
}
if (param == 'ceiamount') {
common3.push(item.ceiamount)
}
if (param == 'cpneiamount') {
common3.push(item.cpneiamount)
}
if (param == 'ccheiamount') {
common3.push(item.ccheiamount)
}
if (param == 'cdiamount') {
common3.push(item.cdiamount)
}
if (param == 'cciamount') {
common3.push(item.cciamount)
}
setTimeout(() => {
this.initChartLTip()
})
})
} else if (typeNum == 2) {
common4 = []
common5 = []
if (type == 'distribution') {
that.changeLine = false
that.lineCommonCompany = res.data.topData.map(item => item.type)
common4 = res.data.topData.map(item => item.amount)
common5 = res.data.bottomData.map(item => item.amount)
} else {
if (param == '新建') {
res.data.keyIndicators.forEach((item, index) => {
common4.push(item.newamount)
common5.push(item.newcount)
})
} else if (param == '续建') {
es.data.keyIndicators.forEach((item, index) => {
common4.push(item.renewamount)
common5.push(item.renewcount)
})
}
}
setTimeout(() => {
this.initChartLTip2()
this.initChartLTip3()
})
}
resolve(1);
})
});
},
yellowMouse (index) {
if (index % 2 == 0) {
this.yellowCount = index
this.yellowPosition = (index / 2 - 1) * 315 + 40
this.yellowType = false
this.changeYellow()
}
},
// 回到中国地图
backChina () {
this.centerShow = false
this.mapChart.dispose()
setTimeout(() => {
this.initChinaChart()
});
},
// 去项目看板
goLookBoard (e) {
console.log(e, '?????')
// window.location.href = `http://192.168.2.111:8080/ierp/accessTokenLogin.do?access_token=${this.access_token}&redirect=http://192.168.2.111:8080/ierp/index.html?formId=mdnb_threetoproject&prj=PL_ZZGY_0_2023_000036`
// window.open('http://192.168.2.111:8080/ierp/accessTokenLogin.do?access_token=${this.access_token}&redirect=http://192.168.2.111:8080/ierp/index.html?formId=mdnb_threetoproject&prj=PL_ZZGY_0_2023_000036')
this.boardUrl = `http://192.168.2.111:8080/ierp/accessTokenLogin.do?access_token=${this.access_token}&redirect=http://192.168.2.111:8080/ierp/index.html?formId=mdnb_threetoproject&prj=PL_ZZGY_0_2023_000036`
this.boardTipShow = true
console.log(this.boardUrl, '??????')
},
// 根据key分组
classify (arr, k) {
let map = {};
let myArr = [];
for (let i = 0; i < arr.length; i++) {
if (!map[arr[i][k]]) {
let a = {}
a[k] = arr[i][k]
a.data = [arr[i]]
myArr.push(a)
map[arr[i][k]] = arr[i]
} else {
for (let j = 0; j < myArr.length; j++) {
if (arr[i][k] === myArr[j][k]) {
myArr[j].data.push(arr[i]);
break
}
}
}
}
return myArr
},
// 两个柱状图的弹窗
showChartLTipDouble (e, location, mdnb_textfield11, mdnb_textfield13, mdnb_textfield16, mdnb_textfield23, type, param) {
this.titleName = e
this.closeTap()
this.echartDoubleTipShow = true
if (location == 'right') {
this.rightPenetrateOne()
}
if (location == 'left') {
this.leftPenetrateOne(mdnb_textfield11, mdnb_textfield13, mdnb_textfield16, mdnb_textfield23,2)
}
if (location == 'center') {
this.centerPenetrateOne(type, param, 2)
}
setTimeout(() => {
this.initChartLTip2()
this.initChartLTip3()
})
},
// 单个柱状图的弹窗
showChartLTipSingle (e, location, type, param,mdnb_textfield11, mdnb_textfield13, mdnb_textfield16, mdnb_textfield23) {
this.closeTap()
this.titleName = e
this.echartSingleTipShow = true
if (location == 'center') {
this.centerPenetrateOne(type, param, 1)
}
if (location == 'left') {
this.leftPenetrateOne(mdnb_textfield11, mdnb_textfield13, mdnb_textfield16, mdnb_textfield23,1)
}
setTimeout(() => {
this.initChartLTip()
})
},
initChartLTip () {
this.myChartTip1 = echarts.init(document.getElementById("echartSingleTip"));
let option = {
grid: {
top: 40,
right: 0,
left: 60,
bottom: 70,
},
tooltip: {
show: true,
trigger: "axis",
axisPointer: {
// 坐标轴指示器,坐标轴触发有效
type: "shadow", // 默认为直线,可选为:'line' | 'shadow'
},
textStyle: {
color: '#FFF', // 文字的颜色
fontSize: '20', // 文字字体大小
fontFamily: 'Microsoft YaHei'
},
},
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: '亿',
nameTextStyle: {//y轴上方单位的颜色
color: '#fff',
fontSize: '20',
fontFamily: 'Microsoft YaHei'
},
axisTick: {
lineStyle: {
color: "#18416F",
},
},
// y轴的字体颜色
axisLabel: {
textStyle: {
color: "white",
fontSize: '20'
},
},
splitLine: {
show: true,
lineStyle: {
color: '#68b4dd66',
type: 'dashed',
},
},
//y轴线的颜色以及宽度
axisLine: {
show: true,
lineStyle: {
color: "#1E5389",
width: 1,
type: "solid",
},
},
},
series: [
// {
// name: "2022年额度",
// type: "bar",
// data: [263.23, 402.18, 73.28, 144.80, 25.56, 8.23, 0, 12.97, 8.56, -1.72, 0, 0, 0, 76.90, 5.03, 9.14, 0, 0],
// showBackground: false,
// backgroundStyle: {
// color: "#18416F",
// },
// barWidth: "10%",
// itemStyle: {
// barBorderRadius: [10, 10, 0, 0],
// color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
// {
// offset: 0,
// color: '#082550',
// },
// {
// offset: 1,
// color: '#69c0ff',
// },
// ]),
// },
// },
{
name: "2023年额度",
type: "bar",
data: common3,
showBackground: false,
backgroundStyle: {
color: "#18416F",
},
barWidth: "30%",
itemStyle: {
// barBorderRadius: [10, 10, 0, 0],
color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
{
offset: 0,
color: '#082550',
},
{
offset: 1,
color: '#957DFF',
},
]),
},
},
],
legend: {
// data: ["2022年额度", "2023年额度"],
data: ["2023年额度"],
textStyle: {
// 图列内容样式
color: "#fff", // 字体颜色
fontSize: "20",
fontFamily: 'Microsoft YaHei'
},
right: 'center',
y: 5,
// 小图标的宽高
},
};
tools.loopShowTooltip(this.myChartTip1, option, {
nterval: 2000,
loopSeries: true,
})
let that = this
that.myChartTip1.on('click', function (param) {
that.projectListTipShow = true
})
that.myChartTip1.setOption(option);
},
initChartLTip2 () {
this.myChartTip2 = echarts.init(document.getElementById("echartSingleTip2"));
let option = {
grid: {
top: 40,
right: 0,
left: 60,
bottom: '15%',
},
tooltip: {
show: true,
trigger: "axis",
axisPointer: {
// 坐标轴指示器,坐标轴触发有效
type: "shadow", // 默认为直线,可选为:'line' | 'shadow'
},
textStyle: {
color: '#FFF', // 文字的颜色
fontSize: '20', // 文字字体大小
fontFamily: 'Microsoft YaHei'
},
},
xAxis: {
data: this.changeLine ? commonCompany : this.lineCommonCompany,
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: '个',
nameTextStyle: {//y轴上方单位的颜色
color: '#fff',
fontSize: '20',
fontFamily: 'Microsoft YaHei'
},
axisTick: {
lineStyle: {
color: "#18416F",
},
},
// y轴的字体颜色
axisLabel: {
textStyle: {
color: "#fff",
fontSize: '20',
fontFamily: 'Microsoft YaHei'
},
},
splitLine: {
show: true,
lineStyle: {
color: '#68b4dd66',
type: 'dashed',
},
},
//y轴线的颜色以及宽度
axisLine: {
show: true,
lineStyle: {
color: "#1E5389",
width: 1,
type: "solid",
},
},
},
series: [
{
name: "2023年额度",
type: this.changeLine ? "bar" : 'line',
data: common4,
showBackground: false,
backgroundStyle: {
color: "#18416F",
},
barWidth: "30%",
itemStyle: {
// barBorderRadius: [10, 10, 0, 0],
color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
{
offset: 0,
color: '#082550',
},
{
offset: 1,
color: '#957DFF',
},
]),
},
},
],
legend: {
// data: ["2022年额度", "2023年额度"],
data: ["2023年额度"],
textStyle: {
// 图列内容样式
color: "#fff", // 字体颜色
fontSize: "20",
fontFamily: 'Microsoft YaHei'
},
right: 'center',
y: 0,
// 小图标的宽高
},
};
tools.loopShowTooltip(this.myChartTip2, option, {
nterval: 2000,
loopSeries: true,
})
let that = this
that.myChartTip2.on('click', function (param) {
that.rightPenetrateTwo('', '', param.name,'right')
})
that.myChartTip2.setOption(option);
},
initChartLTip3 () {
this.myChartTip3 = echarts.init(document.getElementById("echartSingleTip3"));
let option = {
grid: {
top: 40,
right: 0,
left: 60,
bottom: '15%',
},
tooltip: {
show: true,
trigger: "axis",
axisPointer: {
// 坐标轴指示器,坐标轴触发有效
type: "shadow", // 默认为直线,可选为:'line' | 'shadow'
},
textStyle: {
color: '#FFF', // 文字的颜色
fontSize: '20', // 文字字体大小
fontFamily: 'Microsoft YaHei'
},
},
xAxis: {
data: commonCompany,
axisTick: {
show: false,
},
// x轴的字体颜色
axisLabel: {
rotate: 40,
textStyle: {
color: "#fff",
fontSize: '20',
fontFamily: 'Microsoft YaHei'
},
},
//y轴线的颜色以及宽度
axisLine: {
show: true,
lineStyle: {
color: "#1E5389",
width: 1,
type: "solid",
},
},
},
yAxis: {
name: '亿',
nameTextStyle: {//y轴上方单位的颜色
color: '#fff',
fontSize: '20',
fontFamily: 'Microsoft YaHei'
},
axisTick: {
lineStyle: {
color: "#18416F",
},
},
// y轴的字体颜色
axisLabel: {
textStyle: {
color: "#fff",
fontSize: '20',
fontFamily: 'Microsoft YaHei'
},
},
splitLine: {
show: true,
lineStyle: {
color: '#68b4dd66',
type: 'dashed',
},
},
//y轴线的颜色以及宽度
axisLine: {
show: true,
lineStyle: {
color: "#1E5389",
width: 1,
type: "solid",
},
},
},
series: [
// {
// name: "2022年额度",
// type: "bar",
// data: [263.23, 402.18, 73.28, 144.80, 25.56, 8.23, 0, 12.97, 8.56, -1.72, 0, 0, 0, 76.90, 5.03, 9.14, 0, 0],
// showBackground: false,
// backgroundStyle: {
// color: "#18416F",
// },
// barWidth: "10%",
// itemStyle: {
// barBorderRadius: [10, 10, 0, 0],
// color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
// {
// offset: 0,
// color: '#082550',
// },
// {
// offset: 1,
// color: '#69c0ff',
// },
// ]),
// },
// },
{
name: "2023年额度",
type: "bar",
data: common5,
showBackground: false,
backgroundStyle: {
color: "#18416F",
},
barWidth: "30%",
itemStyle: {
// barBorderRadius: [10, 10, 0, 0],
color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
{
offset: 0,
color: '#082550',
},
{
offset: 1,
color: '#69c0ff',
},
]),
},
},
],
legend: {
// data: ["2022年额度", "2023年额度"],
data: ["2023年额度"],
textStyle: {
// 图列内容样式
color: "#fff", // 字体颜色
fontSize: "20",
fontFamily: 'Microsoft YaHei'
},
right: 'center',
y: 5,
},
};
tools.loopShowTooltip(this.myChartTip3, option, {
nterval: 2000,
loopSeries: true,
})
let that = this
that.myChartTip3.on('click', function (param) {
that.rightPenetrateTwo('', '', param.name,'right')
})
that.myChartTip3.setOption(option);
},
closeTap () {
this.changeLine = true
this.echartEnterpriseShow = false
this.mapTipShow = false
this.echartSingleTipShow = false
this.echartDoubleTipShow = false
this.projectListTipShow = false
this.myChartTip1 ? this.myChartTip1.dispose() : ''
this.myChartTip2 ? this.myChartTip2.dispose() : ''
this.myChartTip3 ? this.myChartTip3.dispose() : ''
},
//点击弹窗左半部分
popLeftClick () {
if (this.titleUrl == '2.png') {
this.titleUrl = '3.png'
} else if (this.titleUrl == '7.png') {
this.titleUrl = '8.png'
} else if (this.titleUrl == '3.png') {
this.titleUrl = '2.png'
} else if (this.titleUrl == '8.png') {
this.titleUrl = '7.png'
} else if (this.titleUrl == '5.png') {
this.titleUrl = '2.png'
} else if (this.titleUrl == '10.png') {
this.titleUrl = '7.png'
}
},
//点击弹窗右半部分
poprightClick () {
if (this.titleUrl == '2.png') {
this.titleUrl = '5.png'
} else if (this.titleUrl == '7.png') {
this.titleUrl = '10.png'
} else if (this.titleUrl == '5.png') {
this.titleUrl = '2.png'
} else if (this.titleUrl == '10.png') {
this.titleUrl = '7.png'
} else if (this.titleUrl == '3.png') {
this.titleUrl = '2.png'
} else if (this.titleUrl == '8.png') {
this.titleUrl = '7.png'
}
},
// 标题弹窗
showTitlePop (e, name) {
this.closeTap()
this.titleUrl = e
this.titleName = name
this.$nextTick(() => {
this.mapTipShow = true
})
},
changeYellow () {
this.titleList.forEach((item, index) => {
this.$set(this.titleList[index], 'type', 1)
})
this.$set(this.titleList[this.yellowCount], 'type', 2)
if (this.yellowCount == 14) {
this.yellowCount = 0
this.yellowPosition += 315
} else {
if (this.yellowCount != 0) {
this.yellowPosition += 315
} else {
this.yellowPosition = 40
}
this.yellowCount += 2
}
},
numFormat (value) {
if (!value) return '0'
// var intPart = Number(value).toFixed(0) // 获取整数部分
var intPart = parseInt(value)// 获取整数部分
var intPartFormat = intPart.toString().replace(/(\d)(?=(?:\d{3})+$)/g, '$1,') // 将整数部分逢三一断
var floatPart = '.00' // 预定义小数部分
var value2Array = value.toString().split('.')
// =2表示数据有小数位
if (value2Array.length === 2) {
floatPart = value2Array[1].toString() // 拿到小数部分
if (floatPart.length === 1) {
// 补0
return intPartFormat + '.' + floatPart + '0'
} else {
return intPartFormat + '.' + floatPart
}
} else {
return intPartFormat
}
},
changeTopColor () {
this.list = document.getElementsByClassName('row-item')
for (var i = 0; i < this.list.length; i++) {
if (i == 1) {
this.list[i].classList.add('light')
} else {
this.list[i].classList.remove('light')
}
}
this.initChartL9()
},
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.chartCarousel.dispose()
this.initChartL9()
},
initChartBall () {
let myChart = echarts.init(this.$refs['echartBall'])
option = {
series: [
{
type: "liquidFill",
radius: "80%",
data: [left2[0], left2[0] + 0.02, left2[0] - 0.02],
amplitude: '4%',
waveLength: '20%', //波浪长度
// data: [
// {}
// ],
backgroundStyle: {
color: {
type: "radial",
x: 0.5,
y: 0.5,
r: 0.5,
// 水球体颜色
colorStops: [
{
offset: 0,
color: "#010a11",
},
{
offset: 0.9,
color: "#1a2f45",
},
{
offset: 1,
color: "#2b405a",
},
],
globalCoord: false,
},
},
outline: {
borderDistance: 0,
itemStyle: {
borderWidth: 0,
borderColor: {
type: "linear",
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
],
globalCoord: false,
},
},
},
color: [
{
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [{
offset: 0,
color: '#237386',
},
{
offset: 1,
color: '#0078C8',
},],
},
{
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [{
offset: 0,
color: '#2F97A9',
},
{
offset: 1,
color: '#0078C8',
},],
},
{
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [{
offset: 0,
color: '#48E0ED',
},
{
offset: 1,
color: '#0078C8',
},],
}
],
label: {
normal: {
textStyle: {
color: "#fff", // x轴文字颜色
fontSize: '70'
},
},
},
},
],
};
myChart.setOption(option)
},
initChartL1 () {
let myChart = echarts.init(this.$refs['echartL1'])
option = {
series: [
{
type: "liquidFill",
radius: "80%",
data: [left2[0], left2[0] + 0.02, left2[0] - 0.02],
amplitude: '4%',
// period:'1500',
waveLength: '20%', //波浪长度
// data: [
// {}
// ],
backgroundStyle: {
color: {
type: "radial",
x: 0.5,
y: 0.5,
r: 0.5,
// 水球体颜色
colorStops: [
{
offset: 0,
color: "#010a11",
},
{
offset: 0.9,
// color: "#203852",
color: "#1a2f45",
},
{
offset: 1,
// color: "#354e6d",
color: "#2b405a",
// color: "#314967",
},
],
globalCoord: false,
},
},
outline: {
borderDistance: 0,
itemStyle: {
borderWidth: 0,
borderColor: {
type: "linear",
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
],
globalCoord: false,
},
},
},
color: [
{
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [{
offset: 0,
color: '#237386',
},
{
offset: 1,
color: '#0078C8',
},],
},
{
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [{
offset: 0,
color: '#2F97A9',
},
{
offset: 1,
color: '#0078C8',
},],
},
{
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [{
offset: 0,
color: '#48E0ED',
},
{
offset: 1,
color: '#0078C8',
},],
}
],
label: {
normal: {
textStyle: {
color: "#fff", // x轴文字颜色
},
},
},
},
],
};
myChart.setOption(option)
},
initChartL2 () {
var chartData = left5
var timer = null;
var i = 0;
let that = this
var option = {
colors: ['#a79c57', '#cc8c29', '#034a39', '#383062', '#91a65f', '#e1d7da', '#b48494', '#85868b'],
chart: {
type: 'pie',
backgroundColor: 'rgba(0,0,0,0)',
options3d: {
enabled: true,
alpha: 45,
//beta: 0
},
events: {
// load,图表加载完成时触发
load: function () {
var chart = this;
var points = chart.series[0].points;
var len = points.length;
timer && clearInterval(timer);
timer = setInterval(function () {
autoTooltip(points[i]);
chartData.forEach((item, index) => {
item.sliced = false
item.selected = false
if (index == i) {
// item.sliced = true
// item.selected = true
}
})
chart.update({
series: [{
type: 'pie',
name: '占比',
point: {
events: {
click: function (e) {
that.showChartLTipDouble(e.point.name, 'left', '投资计划分析', e.point.name, '', '')
}
}
},
data: chartData
}]
})
i++;
if (i === len) {
i = 0;
chartData.forEach((item, index) => {
// item.sliced = false
// item.selected = false
})
chart.update({
series: [{
type: 'pie',
name: '占比',
point: {
events: {
click: function (e) {
that.showChartLTipDouble(e.point.name, 'left', '投资计划分析', e.point.name, '', '')
}
}
},
data: chartData
}]
})
}
}, 2000);
},
legendItemClick: function (event) {
console.log(event);
return true;
}
}
},
credits: {
enabled: false //去掉hightchats水印
},
legend: {
// labelFormatter: function() {
// return 123;
// },
align: 'right',//横向位置
verticalAlign: 'middle', // 纵向位置
layout: "vertical",//横排还是竖排
x: -110,
y: 90,
symbolWidth: 50,
itemStyle: {
fontSize: '20px',
color: '#fff',
x: 20,
fontWeight: 0,
fontFamily: 'Microsoft YaHei'
},
},
title: {
text: '主辅业计划占比',
style: {
color: '#fff',
fontSize: 24,
fontFamily: 'Microsoft YaHei',
},
align: 'center',
verticalAlign: "bottom",
x: -120
},
tooltip: {
crosshairs: false,
backgroundColor: 'rgba(0,0,0,0.5)',
// positioner: function(e){
// console.log(e, this)
// },
// useHTML: false, //开启html模式
style: {
color: '#fff',
fontSize: '20',
fontWeight: 0,
fontFamily: 'Microsoft YaHei'
},
formatter: function (e) {
let num = chartData[this.colorIndex].num
this.percentage = this.percentage.toFixed(2) //Math.round(this.percentage)
return `${this.key}:${this.percentage}%
${this.y}亿,${num}个`
},
//pointFormat:
},
plotOptions: {
pie: {
allowPointSelect: true,
showInLegend: true, // 图例
cursor: 'pointer',
size: 220,
innerSize: 150, //环形图中间空白,0为饼图
depth: 25, //立体高度
slicedOffset: 21, //动画距离
dataLabels: {
enabled: false, // 是否展示指示线
format: '{point.name}: {point.percentage}'
}
},
},
series: [{
type: 'pie',
name: '占比',
center: ['50%', '50%'],
point: {
events: {
click: function (e) { //点击事件
that.showChartLTipDouble(e.point.name, 'left', '投资计划分析', e.point.name, '', '')
},
mouseOver: function (e) { //鼠标移入停止轮播并且找到移入的当前数据设为选中
//console.log(e)
chartData.forEach((item, index) => {
// item.sliced = false
// item.selected = false
})
// chartData[e.target.index].sliced = true
// chartData[e.target.index].selected = true
chart.update({
series: [{
type: 'pie',
name: '占比',
point: {
events: {
click: function (e) {
that.showChartLTipDouble(e.point.name, 'left', '投资计划分析', e.point.name, '', '')
}
}
},
data: chartData
}]
})
timer && clearInterval(timer);
},
mouseOut: function () { // 鼠标移出后需要继续执行轮播
var points = chart.series[0].points;
var len = points.length;
timer && clearInterval(timer);
timer = setInterval(function () {
autoTooltip(points[i]);
chartData.forEach((item, index) => {
// item.sliced = false
// item.selected = false
if (index == i) {
// item.sliced = true
// item.selected = true
}
})
chart.update({
series: [{
type: 'pie',
name: '占比',
point: {
events: {
click: function (e) {
that.showChartLTipDouble(e.point.name, 'left', '投资计划分析', e.point.name, '', '')
}
}
},
data: chartData
}]
})
i++;
if (i === len) {
i = 0;
chartData.forEach((item, index) => {
item.sliced = false
item.selected = false
})
chart.update({
series: [{
type: 'pie',
name: '占比',
point: {
events: {
click: function (e) {
that.showChartLTipDouble(e.point.name, 'left', '投资计划分析', e.point.name, '', '')
}
}
},
data: chartData
}]
})
}
}, 2000);
}
}
},
data: chartData
}]
}
var chart = Highcharts.chart('echartL2', option);
function autoTooltip (point) {
chart.tooltip.refresh(point);
}
},
initChartL3 () {
var chartData = left6
var timer = null;
var i = 0;
let that = this
var chart = Highcharts.chart('echartL3', {
colors: ['#a79c57', '#cc8c29', '#034a39', '#383062', '#91a65f', '#e1d7da', '#b48494', '#85868b'],
chart: {
type: 'pie',
backgroundColor: 'rgba(0,0,0,0)',
options3d: {
enabled: true,
alpha: 45,
//beta: 0
},
events: {
// load,图表加载完成时触发
load: function () {
var chart = this;
var points = chart.series[0].points;
var len = points.length;
timer && clearInterval(timer);
timer = setInterval(function () {
autoTooltip(points[i]);
chartData.forEach((item, index) => {
item.sliced = false
item.selected = false
if (index == i) {
// item.sliced = true
// item.selected = true
}
})
chart.update({
series: [{
type: 'pie',
name: '占比',
point: {
events: {
click: function (e) {
that.showChartLTipDouble(e.point.name, 'left', '投资计划分析', e.point.name, '', '')
}
}
},
data: chartData
}]
})
i++;
if (i === len) {
i = 0;
chartData.forEach((item, index) => {
// item.sliced = false
// item.selected = false
})
chart.update({
series: [{
type: 'pie',
name: '占比',
point: {
events: {
click: function (e) {
that.showChartLTipDouble(e.point.name, 'left', '投资计划分析', e.point.name, '', '')
}
}
},
data: chartData
}]
})
}
}, 2000);
},
legendItemClick: function (event) {
that.showChartLTipDouble(e.point.name, 'left', '投资计划分析', e.point.name, '', '')
return true;
}
}
},
credits: {
enabled: false //去掉hightchats水印
},
legend: {
// labelFormatter: function() {
// return 123;
// },
align: 'right',//横向位置
verticalAlign: 'middle', // 纵向位置
layout: "vertical",//横排还是竖排
x: -70,
y: 90,
symbolWidth: 50,
itemStyle: {
fontSize: '20px',
color: '#fff',
x: 20,
fontWeight: 0,
fontFamily: 'Microsoft YaHei'
},
},
title: {
text: '项目管理类型',
style: {
color: '#fff',
fontSize: 24,
fontFamily: 'Microsoft YaHei'
},
align: 'center',
verticalAlign: "bottom",
x: -120
},
tooltip: {
crosshairs: true,
backgroundColor: 'rgba(0,0,0,0.5)',
// positioner: function(e){
// console.log(e, this)
// },
useHTML: false, //开启html模式
style: {
color: '#fff',
fontSize: '20',
fontFamily: 'Microsoft YaHei'
},
formatter: function (e) {
//console.log(this)
let num = chartData[this.colorIndex].num
this.percentage = this.percentage.toFixed(2) //Math.round(this.percentage)
return `${this.key}:${this.percentage}%
${this.y}亿,${num}个`
},
//pointFormat:
},
plotOptions: {
pie: {
allowPointSelect: true,
showInLegend: true, // 图例
cursor: 'pointer',
size: 220,
innerSize: 150, //环形图中间空白,0为饼图
depth: 25, //立体高度
slicedOffset: 21, //动画距离
dataLabels: {
enabled: false, // 是否展示指示线
format: '{point.name}: {point.percentage}'
}
},
},
series: [{
type: 'pie',
name: '占比',
// center: ['70%', '50%'],
point: {
events: {
click: function (e) { //点击事件
that.showChartLTipDouble(e.point.name, 'left', '投资计划分析', e.point.name, '', '')
},
mouseOver: function (e) { //鼠标移入停止轮播并且找到移入的当前数据设为选中
//console.log(e)
chartData.forEach((item, index) => {
item.sliced = false
item.selected = false
})
// chartData[e.target.index].sliced = true
// chartData[e.target.index].selected = true
chart.update({
series: [{
type: 'pie',
name: '占比',
point: {
events: {
click: function (e) {
that.showChartLTipDouble(e.point.name, 'left', '投资计划分析', e.point.name, '', '')
}
}
},
data: chartData
}]
})
timer && clearInterval(timer);
},
mouseOut: function () { // 鼠标移出后需要继续执行轮播
var points = chart.series[0].points;
var len = points.length;
timer && clearInterval(timer);
timer = setInterval(function () {
autoTooltip(points[i]);
chartData.forEach((item, index) => {
item.sliced = false
item.selected = false
if (index == i) {
// item.sliced = true
// item.selected = true
}
})
chart.update({
series: [{
type: 'pie',
name: '占比',
point: {
events: {
click: function (e) {
that.showChartLTipDouble(e.point.name, 'left', '投资计划分析', e.point.name, '', '')
}
}
},
data: chartData
}]
})
i++;
if (i === len) {
i = 0;
chartData.forEach((item, index) => {
item.sliced = false
item.selected = false
})
chart.update({
series: [{
type: 'pie',
name: '占比',
point: {
events: {
click: function (e) {
console.log(e)
}
}
},
data: chartData
}]
})
}
}, 2000);
}
}
},
data: chartData
}]
});
function autoTooltip (point) {
chart.tooltip.refresh(point);
}
},
initChartL4 (dataList) {
let myChart = echarts.init(document.getElementById("echartL4"));
let option = {
grid: {
top: 45,
right: 0,
left: 60,
bottom: 80,
},
tooltip: {
show: true,
trigger: "axis",
formatter: data => {
return `${data[0].name}
${data[0].seriesName}:${data[0].value}亿
${data[1].seriesName}:${data[1].value}亿`
},
axisPointer: {
// 坐标轴指示器,坐标轴触发有效
type: "shadow", // 默认为直线,可选为:'line' | 'shadow'
},
textStyle: {
color: '#FFF', // 文字的颜色
fontSize: '20', // 文字字体大小
fontFamily: 'Microsoft YaHei'
},
},
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: "2023年额度",
type: "bar",
data: left3[0],
stack: 'Ad',
showBackground: false,
backgroundStyle: {
color: "#18416F",
},
barWidth: "20",
itemStyle: {
// barBorderRadius: [10, 10, 0, 0],
color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
{
offset: 0,
color: '#082550',
},
{
offset: 1,
color: '#957DFF',
},
]),
},
},
{
name: "总额度",
type: "bar",
data: left3[0],
stack: 'Ad',
showBackground: false,
backgroundStyle: {
color: "#18416F",
},
barWidth: "20",
itemStyle: {
// barBorderRadius: [10, 10, 0, 0],
color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
{
offset: 0,
color: '#b9b7c060',
},
{
offset: 1,
color: '#b9b7c060',
},
]),
},
},
],
legend: {
// data: ["2022年额度", "2023年额度"],
data: ["2023年额度"],
textStyle: {
// 图列内容样式
color: "#fff", // 字体颜色
fontSize: "20",
fontFamily: 'Microsoft YaHei'
},
right: 'center',
y: 5,
// icon: "roundRect",
// 小图标的宽高
},
};
tools.loopShowTooltip(myChart, option, {
nterval: 2000,
loopSeries: true,
})
let that = this
myChart.on('click', function (param) {
that.titleName = param.name
that.echartEnterpriseShow = true
// 如果是接口版数据版
if (that.versions) {
let findData = dataList.find(item => {
return item.mdnb_textfield == param.name
})
common1[0] = findData.mdnb_amountfield18
common1[1] = findData.mdnb_amountfield20
common1[2] = findData.mdnb_amountfield19
common1[3] = findData.mdnb_amountfield26
common1[4] = findData.mdnb_amountfield27
common1[5] = findData.mdnb_amountfield25
common2[0] = findData.mdnb_decimalfield6
}
setTimeout(() => {
that.initChartBall()
});
})
myChart.setOption(option);
},
initChartL5 () {
var chartData = left7
var timer = null;
var i = 0;
let that = this
var option = {
colors: ['#a79c57', '#cc8c29', '#034a39', '#383062', '#91a65f', '#e1d7da', '#b48494', '#85868b'],
chart: {
type: 'pie',
backgroundColor: 'rgba(0,0,0,0)',
options3d: {
enabled: true,
alpha: 45,
//beta: 0
},
events: {
// load,图表加载完成时触发
load: function () {
var chart = this;
var points = chart.series[0].points;
var len = points.length;
timer && clearInterval(timer);
timer = setInterval(function () {
autoTooltip(points[i]);
chartData.forEach((item, index) => {
item.sliced = false
item.selected = false
if (index == i) {
item.sliced = true
item.selected = true
}
})
chart.update({
series: [{
type: 'pie',
name: '占比',
point: {
events: {
click: function (e) {
that.showChartLTipDouble(e.point.name, 'left', '产业布局分析', '传统产业分析', e.point.name, '')
}
}
},
data: chartData
}]
})
i++;
if (i === len) {
i = 0;
}
}, 2000);
},
legendItemClick: function (event) {
console.log(event);
return true;
}
}
},
credits: {
enabled: false //去掉hightchats水印
},
legend: {
// labelFormatter: function() {
// return 123;
// },
align: 'right',//横向位置
verticalAlign: 'middle', // 纵向位置
layout: "vertical",//横排还是竖排
x: -110,
y: 50,
symbolWidth: 50,
itemDistance: 50,
itemStyle: {
fontSize: '20px',
color: '#fff',
x: 20,
fontWeight: 0,
fontFamily: 'Microsoft YaHei'
},
},
title: {
text: '传统产业分析',
style: {
color: '#fff',
fontSize: 24,
fontFamily: 'Microsoft YaHei'
},
align: 'center',
verticalAlign: "bottom",
x: -120
},
tooltip: {
crosshairs: true,
backgroundColor: 'rgba(0,0,0,0.5)',
// positioner: function(e){
// console.log(e, this)
// },
useHTML: false, //开启html模式
style: {
color: '#fff',
fontSize: '20',
fontFamily: 'Microsoft YaHei'
},
formatter: function (e) {
//console.log(this)
let num = chartData[this.colorIndex].num
this.percentage = this.percentage.toFixed(2) //Math.round(this.percentage)
return `${this.key}:${this.percentage}%
${this.y}亿,${num}个`
},
//pointFormat:
},
plotOptions: {
pie: {
allowPointSelect: true,
showInLegend: true, // 图例
cursor: 'pointer',
size: 220,
innerSize: 150, //环形图中间空白,0为饼图
depth: 25, //立体高度
slicedOffset: 21, //动画距离
dataLabels: {
enabled: false, // 是否展示指示线
format: '{point.name}: {point.percentage}'
}
},
},
series: [{
type: 'pie',
name: '占比',
//center: ['35%','50%'],
point: {
events: {
click: function (e) { //点击事件
that.showChartLTipDouble(e.point.name, 'left', '产业布局分析', '传统产业分析', e.point.name, '')
},
mouseOver: function (e) { //鼠标移入停止轮播并且找到移入的当前数据设为选中
//console.log(e)
chartData.forEach((item, index) => {
item.sliced = false
item.selected = false
})
chartData[e.target.index].sliced = true
chartData[e.target.index].selected = true
chart.update({
series: [{
type: 'pie',
name: '占比',
point: {
events: {
click: function (e) {
that.showChartLTipDouble(e.point.name, 'left', '产业布局分析', '传统产业分析', e.point.name, '')
}
}
},
data: chartData
}]
})
timer && clearInterval(timer);
},
mouseOut: function () { // 鼠标移出后需要继续执行轮播
var points = chart.series[0].points;
var len = points.length;
timer && clearInterval(timer);
timer = setInterval(function () {
autoTooltip(points[i]);
chartData.forEach((item, index) => {
item.sliced = false
item.selected = false
if (index == i) {
item.sliced = true
item.selected = true
}
})
chart.update({
series: [{
type: 'pie',
name: '占比',
point: {
events: {
click: function (e) {
that.showChartLTipDouble(e.point.name, 'left', '产业布局分析', '传统产业分析', e.point.name, '')
}
}
},
data: chartData
}]
})
i++;
if (i === len) {
i = 0;
}
}, 2000);
}
}
},
data: chartData
}]
}
var chart = Highcharts.chart('echartL5', option);
function autoTooltip (point) {
chart.tooltip.refresh(point);
}
},
initChartL6 () {
var chartData = left8
var timer = null;
var i = 0;
let that = this
var option = {
colors: ['#a79c57', '#cc8c29', '#034a39', '#383062', '#91a65f', '#e1d7da', '#b48494', '#85868b'],
chart: {
type: 'pie',
backgroundColor: 'rgba(0,0,0,0)',
options3d: {
enabled: true,
alpha: 45,
//beta: 0
},
events: {
// load,图表加载完成时触发
load: function () {
var chart = this;
var points = chart.series[0].points;
var len = points.length;
timer && clearInterval(timer);
timer = setInterval(function () {
autoTooltip(points[i]);
chartData.forEach((item, index) => {
item.sliced = false
item.selected = false
if (index == i) {
item.sliced = true
item.selected = true
}
})
chart.update({
series: [{
type: 'pie',
name: '占比',
point: {
events: {
click: function (e) {
that.showChartLTipDouble(e.point.name, 'left', '产业布局分析', '战略性新兴产业', e.point.name, '')
}
}
},
data: chartData
}]
})
i++;
if (i === len) {
i = 0;
}
}, 2000);
},
legendItemClick: function (event) {
console.log(event);
return true;
}
}
},
credits: {
enabled: false //去掉hightchats水印
},
legend: {
// labelFormatter: function() {
// return 123;
// },
align: 'right',//横向位置
verticalAlign: 'middle', // 纵向位置
layout: "vertical",//横排还是竖排
x: -30,
y: 30,
symbolWidth: 50,
itemDistance: 50,
itemStyle: {
fontSize: '20px',
color: '#fff',
x: 20,
fontWeight: 0,
fontFamily: 'Microsoft YaHei'
},
},
title: {
text: '战略性新兴产业',
style: {
color: '#fff',
fontSize: 24,
fontFamily: 'Microsoft YaHei'
},
align: 'center',
verticalAlign: "bottom",
x: -120
},
tooltip: {
crosshairs: true,
backgroundColor: 'rgba(0,0,0,0.5)',
// positioner: function(e){
// console.log(e, this)
// },
useHTML: false, //开启html模式
style: {
color: '#fff',
fontSize: '20',
fontFamily: 'Microsoft YaHei'
},
formatter: function (e) {
//console.log(this)
let num = chartData[this.colorIndex].num
this.percentage = this.percentage.toFixed(2) //Math.round(this.percentage)
return `${this.key}:${this.percentage}%
${this.y}亿,${num}个`
},
//pointFormat:
},
plotOptions: {
pie: {
allowPointSelect: true,
showInLegend: true, // 图例
cursor: 'pointer',
size: 220,
innerSize: 150, //环形图中间空白,0为饼图
depth: 25, //立体高度
slicedOffset: 21, //动画距离
dataLabels: {
enabled: false, // 是否展示指示线
format: '{point.name}: {point.percentage}'
}
},
},
series: [{
type: 'pie',
name: '占比',
//center: ['35%','50%'],
point: {
events: {
click: function (e) { //点击事件
that.showChartLTipDouble(e.point.name, 'left', '产业布局分析', '战略性新兴产业', e.point.name, '')
},
mouseOver: function (e) { //鼠标移入停止轮播并且找到移入的当前数据设为选中
//console.log(e)
chartData.forEach((item, index) => {
item.sliced = false
item.selected = false
})
chartData[e.target.index].sliced = true
chartData[e.target.index].selected = true
chart.update({
series: [{
type: 'pie',
name: '占比',
point: {
events: {
click: function (e) {
that.showChartLTipDouble(e.point.name, 'left', '产业布局分析', '战略性新兴产业', e.point.name, '')
}
}
},
data: chartData
}]
})
timer && clearInterval(timer);
},
mouseOut: function () { // 鼠标移出后需要继续执行轮播
var points = chart.series[0].points;
var len = points.length;
timer && clearInterval(timer);
timer = setInterval(function () {
autoTooltip(points[i]);
chartData.forEach((item, index) => {
item.sliced = false
item.selected = false
if (index == i) {
item.sliced = true
item.selected = true
}
})
chart.update({
series: [{
type: 'pie',
name: '占比',
point: {
events: {
click: function (e) {
that.showChartLTipDouble(e.point.name, 'left', '产业布局分析', '战略性新兴产业', e.point.name, '')
}
}
},
data: chartData
}]
})
i++;
if (i === len) {
i = 0;
}
}, 2000);
}
}
},
data: chartData
}]
}
var chart = Highcharts.chart('echartL6', option);
function autoTooltip (point) {
chart.tooltip.refresh(point);
}
},
initChartL7 () {
var chartData = left9
var timer = null;
var i = 0;
let that = this
var option = {
colors: ['#a79c57', '#cc8c29', '#034a39', '#383062', '#91a65f', '#e1d7da', '#b48494', '#85868b'],
chart: {
type: 'pie',
backgroundColor: 'rgba(0,0,0,0)',
options3d: {
enabled: true,
alpha: 45,
//beta: 0
},
events: {
// load,图表加载完成时触发
load: function () {
var chart = this;
var points = chart.series[0].points;
var len = points.length;
timer && clearInterval(timer);
timer = setInterval(function () {
autoTooltip(points[i]);
chartData.forEach((item, index) => {
item.sliced = false
item.selected = false
if (index == i) {
item.sliced = true
item.selected = true
}
})
chart.update({
series: [{
type: 'pie',
name: '占比',
point: {
events: {
click: function (e) {
that.showChartLTipDouble(e.point.name, 'left', '产业布局分析', '特色优势产业', e.point.name, '')
}
}
},
data: chartData
}]
})
i++;
if (i === len) {
i = 0;
}
}, 2000);
},
legendItemClick: function (event) {
console.log(event);
return true;
}
}
},
credits: {
enabled: false //去掉hightchats水印
},
title: {
text: '特色优势产业',
style: {
color: '#fff',
fontSize: 24,
fontFamily: 'Microsoft YaHei'
},
align: 'center',
verticalAlign: "bottom",
x: -120
},
legend: {
// labelFormatter: function() {
// return 123;
// },
align: 'right',//横向位置
verticalAlign: 'middle', // 纵向位置
layout: "vertical",//横排还是竖排
x: -50,
y: 30,
symbolWidth: 50,
itemDistance: 50,
itemStyle: {
fontSize: '20px',
color: '#fff',
x: 20,
fontWeight: 0,
fontFamily: 'Microsoft YaHei'
},
},
tooltip: {
crosshairs: true,
backgroundColor: 'rgba(0,0,0,0.5)',
// positioner: function(e){
// console.log(e, this)
// },
useHTML: false, //开启html模式
style: {
color: '#fff',
fontSize: '20',
fontFamily: 'Microsoft YaHei'
},
formatter: function (e) {
//console.log(this)
let num = chartData[this.colorIndex].num
this.percentage = this.percentage.toFixed(2) //Math.round(this.percentage)
return `${this.key}:${this.percentage}%
${this.y}亿,${num}个`
},
//pointFormat:
},
plotOptions: {
pie: {
allowPointSelect: true,
showInLegend: true, // 图例
cursor: 'pointer',
size: 220,
innerSize: 150, //环形图中间空白,0为饼图
depth: 25, //立体高度
slicedOffset: 21, //动画距离
dataLabels: {
enabled: false, // 是否展示指示线
format: '{point.name}: {point.percentage}'
}
},
},
series: [{
type: 'pie',
name: '占比',
//center: ['35%','50%'],
point: {
events: {
click: function (e) { //点击事件
that.showChartLTipDouble(e.point.name, 'left', '产业布局分析', '特色优势产业', e.point.name, '')
},
mouseOver: function (e) { //鼠标移入停止轮播并且找到移入的当前数据设为选中
//console.log(e)
chartData.forEach((item, index) => {
item.sliced = false
item.selected = false
})
chartData[e.target.index].sliced = true
chartData[e.target.index].selected = true
chart.update({
series: [{
type: 'pie',
name: '占比',
point: {
events: {
click: function (e) {
that.showChartLTipDouble(e.point.name, 'left', '产业布局分析', '特色优势产业', e.point.name, '')
}
}
},
data: chartData
}]
})
timer && clearInterval(timer);
},
mouseOut: function () { // 鼠标移出后需要继续执行轮播
var points = chart.series[0].points;
var len = points.length;
timer && clearInterval(timer);
timer = setInterval(function () {
autoTooltip(points[i]);
chartData.forEach((item, index) => {
item.sliced = false
item.selected = false
if (index == i) {
item.sliced = true
item.selected = true
}
})
chart.update({
series: [{
type: 'pie',
name: '占比',
point: {
events: {
click: function (e) {
that.showChartLTipDouble(e.point.name, 'left', '产业布局分析', '特色优势产业', e.point.name, '')
}
}
},
data: chartData
}]
})
i++;
if (i === len) {
i = 0;
}
}, 2000);
}
}
},
data: chartData
}]
}
var chart = Highcharts.chart('echartL7', option);
function autoTooltip (point) {
chart.tooltip.refresh(point);
}
},
initChartL8 () {
var chartData = left10
var timer = null;
var i = 0;
let that = this
var option = {
colors: ['#a79c57', '#cc8c29', '#034a39', '#383062', '#91a65f', '#e1d7da', '#b48494', '#85868b'],
chart: {
type: 'pie',
backgroundColor: 'rgba(0,0,0,0)',
options3d: {
enabled: true,
alpha: 45,
//beta: 0
},
events: {
// load,图表加载完成时触发
load: function () {
var chart = this;
var points = chart.series[0].points;
var len = points.length;
timer && clearInterval(timer);
timer = setInterval(function () {
autoTooltip(points[i]);
chartData.forEach((item, index) => {
item.sliced = false
item.selected = false
if (index == i) {
item.sliced = true
item.selected = true
}
})
chart.update({
series: [{
type: 'pie',
name: '占比',
point: {
events: {
click: function (e) {
that.showChartLTipDouble(e.point.name, 'left', '产业布局分析', '公共基础等产业', e.point.name, '')
}
}
},
data: chartData
}]
})
i++;
if (i === len) {
i = 0;
}
}, 2000);
},
legendItemClick: function (event) {
console.log(event);
return true;
}
}
},
credits: {
enabled: false //去掉hightchats水印
},
title: {
text: '公共基础等产业',
style: {
color: '#fff',
fontSize: 24,
fontFamily: 'Microsoft YaHei'
},
align: 'center',
verticalAlign: "bottom",
x: -120
},
legend: {
// labelFormatter: function() {
// return 123;
// },
align: 'right',//横向位置
verticalAlign: 'middle', // 纵向位置
layout: "vertical",//横排还是竖排
x: -70,
y: 50,
symbolWidth: 50,
itemDistance: 50,
itemStyle: {
fontSize: '20px',
color: '#fff',
x: 20,
fontWeight: 0,
fontFamily: 'Microsoft YaHei'
},
},
tooltip: {
crosshairs: true,
backgroundColor: 'rgba(0,0,0,0.5)',
// positioner: function(e){
// console.log(e, this)
// },
useHTML: false, //开启html模式
style: {
color: '#fff',
fontSize: '20',
fontFamily: 'Microsoft YaHei'
},
formatter: function (e) {
//console.log(this)
let num = chartData[this.colorIndex].num
this.percentage = this.percentage.toFixed(2) //Math.round(this.percentage)
return `${this.key}:${this.percentage}%
${this.y}亿,${num}个`
},
//pointFormat:
},
plotOptions: {
pie: {
allowPointSelect: true,
showInLegend: true, // 图例
cursor: 'pointer',
size: 220,
innerSize: 150, //环形图中间空白,0为饼图
depth: 25, //立体高度
slicedOffset: 21, //动画距离
dataLabels: {
enabled: false, // 是否展示指示线
format: '{point.name}: {point.percentage}'
}
},
},
series: [{
type: 'pie',
name: '占比',
//center: ['35%','50%'],
point: {
events: {
click: function (e) { //点击事件
that.showChartLTipDouble(e.point.name, 'left', '产业布局分析', '公共基础等产业', e.point.name, '')
},
mouseOver: function (e) { //鼠标移入停止轮播并且找到移入的当前数据设为选中
//console.log(e)
chartData.forEach((item, index) => {
item.sliced = false
item.selected = false
})
chartData[e.target.index].sliced = true
chartData[e.target.index].selected = true
chart.update({
series: [{
type: 'pie',
name: '占比',
point: {
events: {
click: function (e) {
that.showChartLTipDouble(e.point.name, 'left', '产业布局分析', '公共基础等产业', e.point.name, '')
}
}
},
data: chartData
}]
})
timer && clearInterval(timer);
},
mouseOut: function () { // 鼠标移出后需要继续执行轮播
var points = chart.series[0].points;
var len = points.length;
timer && clearInterval(timer);
timer = setInterval(function () {
autoTooltip(points[i]);
chartData.forEach((item, index) => {
item.sliced = false
item.selected = false
if (index == i) {
item.sliced = true
item.selected = true
}
})
chart.update({
series: [{
type: 'pie',
name: '占比',
point: {
events: {
click: function (e) {
that.showChartLTipDouble(e.point.name, 'left', '产业布局分析', '公共基础等产业', e.point.name, '')
}
}
},
data: chartData
}]
})
i++;
if (i === len) {
i = 0;
}
}, 2000);
}
}
},
data: chartData
}]
}
var chart = Highcharts.chart('echartL8', option);
function autoTooltip (point) {
chart.tooltip.refresh(point);
}
},
initChartL9 () {
this.chartCarousel = echarts.init(document.getElementById("echartL9"));
option = {
tooltip: {
trigger: 'axis',
formatter: '指标:' + '{c0}' + '
' + '发展线:' + '{c1}' + '
' + '生存线:' + '{c2}', //+ '
'+ '{a1}:{c1}' + '%',
axisPointer: {
type: 'shadow',
},
},
grid: {
top: '10%',
right: '5%',
left: '12%',
bottom: '15%',
},
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: 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: 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: left12[this.count + 1][0]
},
],
}
let that = this
// this.chartCarousel.on('click', function (param) {
// that.titleName = param.name
// that.echartSingleTipShow = true
// setTimeout(() => {
// that.initChartLTip()
// });
// })
this.chartCarousel.on('mouseover', (params) => {
that.$refs.indicator.handleHover(true, 1, 2, 3, 4)
})
this.chartCarousel.on('mouseout', (params) => {
that.$refs.indicator.handleHover(false, 1, 2, 3, 4)
})
this.chartCarousel.setOption(option)
// tools.loopShowTooltip(myChart, option, {
// nterval: 2000,
// loopSeries: true,
// })
},
initChartL10 () {
let myChart = echarts.init(document.getElementById("echartL10"));
let option = {
title: {
text: '固定资产进度分布',
textStyle: {
color: '#69C0FF',
fontSize: 30,
fontWeight: 500,
fontFamily: 'Microsoft YaHei'
},
top: '20',
left: '20'
},
textStyle: {
color: '#fff',
},
tooltip: {
trigger: "axis",
formatter: function (params) {
var tip = params[0].axisValue + '
' + params[0].marker + params[0].data[1] + ':' + params[0].data[2] + '个,' + params[0].data[3] + '亿' + '
' + params[1].marker + params[1].data[1] + ':' + params[1].data[2] + '个,' + params[1].data[3] + '亿';
return tip
},
textStyle: {
color: '#ffffff', // 文字的颜色
fontSize: '20', // 文字字体大小
fontFamily: 'Microsoft YaHei'
},
axisPointer: {
// lineStyle: {
// type: 'dashed',
// width: 2,
// color: 'rgba(255,255,255,0.6)'
// },
animation: false
}
},
grid: {
top: '0%',
right: '5%',
left: '15%',
bottom: '-10%',
},
yAxis: {
data: ['备案', '特别监管'],
splitLine: {
show: false,
lineStyle: {
color: '#68b4dd66',
type: 'dashed',
},
},
axisLine: {
show: false
},
axisLabel: {
show: true,
formatter: '{value}',
textStyle: {
color: '#fff',
fontSize: 20,
padding: [0, -10, 0, 0],
fontFamily: 'Microsoft YaHei',
},
},
nameTextStyle: {
color: '#ebf8ac',
fontSize: 16,
fontFamily: 'Microsoft YaHei'
},
},
xAxis: {
data: ['项目储备', '项目立项', '可研论证', '投资决策'],
axisLine: {
show: true, //隐藏X轴轴线
lineStyle: {
color: '#005094',
width: 1,
},
},
axisTick: {
show: false, //隐藏X轴刻度
},
axisLabel: {
show: true,
textStyle: {
color: '#fff', //X轴文字颜色
fontSize: 20,
padding: [-320, 0, 0, 0],
fontFamily: 'Microsoft YaHei'
},
}
},
series: [
{
name: '特别监管',
type: 'scatter',
symbol: 'circle',//'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow'
symbolSize: function (data) {
return Math.sqrt(data[2]) * 5;
},
// label: {
// emphasis: {
// show: true,
// formatter: function (param) {
// return param.data[2];
// },
// position: 'top'
// }
// },
itemStyle: {
normal: {
color: '#69c0ff'
}
},
data: left13[0]
},
{
name: '备案',
type: 'scatter',
symbol: 'circle',//'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow'
symbolSize: function (data) {
return Math.sqrt(data[2]) * 5;
},
// label: {
// emphasis: {
// show: true,
// formatter: function (param) {
// return param.data[2];
// },
// position: 'top'
// }
// },
itemStyle: {
normal: {
color: '#957DFF'
}
},
data: left13[1]
},
]
}
let that = this
myChart.on('click', function (param) {
that.showChartLTipDouble(param.name, 'left', '项目阶段分析', '固定资产进度分布', param.name,param.seriesName )
})
myChart.setOption(option)
tools.loopShowTooltip(myChart, option, {
nterval: 2000,
loopSeries: true,
})
},
initChartL11 () {
let myChart = echarts.init(document.getElementById("echartL11"));
let option = {
title: {
text: '股权类进度分布',
textStyle: {
color: '#69C0FF',
fontSize: 30,
fontWeight: 500,
fontFamily: 'Microsoft YaHei'
},
top: '20',
left: '20'
},
textStyle: {
color: '#fff',
},
tooltip: {
trigger: "axis",
formatter: function (params) {
var tip = params[0].axisValue + '
' + params[0].marker + params[0].data[1] + ':' + params[0].data[2] + '个,' + params[0].data[3] + '亿' + '
' + params[1].marker + params[1].data[1] + ':' + params[1].data[2] + '个,' + params[1].data[3] + '亿';
return tip
},
textStyle: {
color: '#FFF', // 文字的颜色
fontSize: '20', // 文字字体大小
fontFamily: 'Microsoft YaHei'
},
axisPointer: {
// lineStyle: {
// type: 'dashed',
// width: 2,
// color: 'rgba(255,255,255,0.6)'
// },
animation: true
}
},
grid: {
top: '0%',
right: '5%',
left: '15%',
bottom: '-10%',
},
yAxis: {
data: ['备案', '特别监管'],
splitLine: {
show: false,
lineStyle: {
color: '#68b4dd66',
type: 'dashed',
},
},
axisLine: {
show: false
},
axisLabel: {
show: true,
formatter: '{value}',
textStyle: {
fontSize: 20,
padding: [0, -10, 0, 0],
fontFamily: 'Microsoft YaHei'
},
},
nameTextStyle: {
color: '#ebf8ac',
fontSize: 16,
fontFamily: 'Microsoft YaHei'
},
},
xAxis: {
data: ['项目储备', '项目立项', '可研论证', '投资决策'],
axisLine: {
show: true, //隐藏X轴轴线
lineStyle: {
color: '#005094',
width: 1,
},
},
axisTick: {
show: true, //隐藏X轴刻度
},
axisLabel: {
show: true,
textStyle: {
color: '#fff', //X轴文字颜色
fontSize: 20,
padding: [-320, 0, 0, 0],
fontFamily: 'Microsoft YaHei'
},
},
},
series: [
{
name: '',
type: 'scatter',
symbol: 'circle',
symbolSize: function (data) {
return Math.sqrt(data[2]) * 5;
},
// label: {
// emphasis: {
// show: true,
// formatter: function (param) {
// return param.data[2];
// },
// position: 'top'
// }
// },
itemStyle: {
normal: {
color: '#40A9FF'
}
},
data: left14[0]
},
{
name: '',
type: 'scatter',
symbol: 'circle',
symbolSize: function (data) {
return Math.sqrt(data[2]) * 5;
},
// label: {
// emphasis: {
// show: true,
// formatter: function (param) {
// return param.data[2];
// },
// position: 'top'
// }
// },
itemStyle: {
normal: {
color: '#957DFF'
}
},
data: left14[1]
},
]
}
let that = this
myChart.on('click', function (param) {
that.showChartLTipDouble(param.name, 'left', '项目阶段分析', '股权类进度分布', param.name,param.seriesName )
})
myChart.setOption(option)
tools.loopShowTooltip(myChart, option, {
nterval: 2000,
loopSeries: true,
})
},
// 大屏二
initChartC1 () {
var chartData = center2
var timer = null;
var i = 0;
let that = this
var option = {
colors: ['#a79c57', '#cc8c29', '#034a39', '#383062', '#91a65f', '#e1d7da', '#b48494', '#85868b'],
chart: {
type: 'pie',
backgroundColor: 'rgba(0,0,0,0)',
options3d: {
enabled: true,
alpha: 60,
//beta: 0
},
events: {
// load,图表加载完成时触发
load: function () {
var chart = this;
var points = chart.series[0].points;
var len = points.length;
timer && clearInterval(timer);
timer = setInterval(function () {
autoTooltip(points[i]);
chartData.forEach((item, index) => {
item.sliced = false
item.selected = false
if (index == i) {
item.sliced = true
item.selected = true
}
})
chart.update({
series: [{
type: 'pie',
name: '占比',
point: {
events: {
click: function (e) {
that.showChartLTipDouble(e.point.name, 'center', '', '', '', '', 'distribution', e.point.name)
}
}
},
data: chartData
}]
})
i++;
if (i === len) {
i = 0;
}
}, 2000);
},
legendItemClick: function (event) {
console.log(event);
return true;
}
}
},
credits: {
enabled: false //去掉hightchats水印
},
legend: {
layout: 'vertical',
align: 'right',
y: -10,
verticalAlign: 'bottom',
itemStyle: {
fontSize: '20px',
color: '#fff',
fontWeight: 0,
fontFamily: 'Microsoft YaHei'
}
},
tooltip: {
crosshairs: true,
backgroundColor: 'rgba(0,0,0,0.5)',
useHTML: false, //开启html模式
style: {
color: '#fff',
fontSize: '20',
fontFamily: 'Microsoft YaHei'
},
formatter: function (e) {
let num = chartData[this.colorIndex].num
this.percentage = this.percentage.toFixed(2) //Math.round(this.percentage)
return `${this.key}:${this.percentage}%
投资完成额:${this.y}亿
投资数量:${num}个`
},
//pointFormat:
},
plotOptions: {
pie: {
allowPointSelect: true,
showInLegend: true, // 图例
cursor: 'pointer',
size: 500,
// innerSize: 330, //环形图中间空白,0为饼图
innerSize: 0, //环形图中间空白,0为饼图
depth: 75, //立体高度
slicedOffset: 40, //动画距离
dataLabels: {
enabled: false, // 是否展示指示线
format: '{point.name}: {point.percentage}'
}
},
},
title: {
text: '',
style: {
color: '#fff',
fontSize: 24,
fontFamily: 'Microsoft YaHei'
},
align: 'center',
verticalAlign: "bottom",
x: -120
},
series: [{
type: 'pie',
name: '占比',
center: ['74%', '50%'],
point: {
events: {
click: function (e) { //点击事件
that.showChartLTipDouble(e.point.name, 'center', '', '', '', '', 'distribution', e.point.name)
},
mouseOver: function (e) { //鼠标移入停止轮播并且找到移入的当前数据设为选中
//console.log(e)
chartData.forEach((item, index) => {
item.sliced = false
item.selected = false
})
chartData[e.target.index].sliced = true
chartData[e.target.index].selected = true
chart.update({
series: [{
type: 'pie',
name: '占比',
point: {
events: {
click: function (e) {
that.showChartLTipDouble(e.point.name, 'center', '', '', '', '', 'distribution', e.point.name)
}
}
},
data: chartData
}]
})
timer && clearInterval(timer);
},
mouseOut: function () { // 鼠标移出后需要继续执行轮播
var points = chart.series[0].points;
var len = points.length;
timer && clearInterval(timer);
timer = setInterval(function () {
autoTooltip(points[i]);
chartData.forEach((item, index) => {
item.sliced = false
item.selected = false
if (index == i) {
item.sliced = true
item.selected = true
}
})
chart.update({
series: [{
type: 'pie',
name: '占比',
point: {
events: {
click: function (e) {
that.showChartLTipDouble(e.point.name, 'center', '', '', '', '', 'distribution', e.point.name)
}
}
},
data: chartData
}]
})
i++;
if (i === len) {
i = 0;
}
}, 2000);
}
}
},
data: chartData
}]
}
var chart = Highcharts.chart('echartC1', option);
function autoTooltip (point) {
chart.tooltip.refresh(point);
}
},
initChartC2 () {
let that = this
let myChart = echarts.init(this.$refs['echartC2'])
myChart.on('showTip', (params) => {
// 如果是7或者15并且满足防抖则切换
if ((params.dataIndex == 5 || params.dataIndex == 11) && that.echartC2Fd) {
that.echartC2Fd = false
setTimeout(() => {
option.dataZoom[0].endValue = option.dataZoom[0].endValue + 6
option.dataZoom[0].startValue = option.dataZoom[0].startValue + 6
myChart.setOption(option);
// 防止勿刷新做的防抖
setTimeout(() => {
that.echartC2Fd = true
}, 2000)
}, 1900);
// 如果是17表示到了最后一个,那么重新来一遍
} else if (params.dataIndex == 17 && that.echartC2Fd) {
that.echartC2Fd = false
setTimeout(() => {
option.dataZoom[0].endValue = 0
option.dataZoom[0].startValue = 5
myChart.setOption(option);
// 防止勿刷新做的防抖
setTimeout(() => {
that.echartC2Fd = true
}, 2000)
}, 1900)
}
})
let option = {
tooltip: {
formatter: data => {
return `${data[0].name}
${data[0].seriesName}:${data[0].value}亿
${data[1].seriesName}:${data[1].value}亿`
},
trigger: 'axis',
axisPointer: {
// type: 'cross',',
},
textStyle: {
color: '#FFF', // 文字的颜色
fontSize: '20', // 文字字体大小
fontFamily: 'Microsoft YaHei'
},
},
dataZoom: [
{
// start: 9,//默认为@
// end: 100,//黑认认为1@0
type: "slider",
show: false,
// xAxisIndex: [0]
handlesize: 0,//滑动条的 左右2个滑动条的大小
startValue: 5,// 初始显示值
endValue: 0,// 结束显示值
height: 10,//组件高度
left: "5%",
right: "4%",//右边的距离
bottom: "25%",//底边的距离
borderColor: "#939",
fillerColor: "#269cdb",
borderRadius: 5,
backgroundColor: "#33384b",//两边未选中的滑动条区域的额色
showDataShadow: false,//是否显示数据阴影
showDetail: false,//即拖拽时候是否显示详细数值信息
truerealtime: true,//是否实时更新
filterMode: "filter"
}, {
type: 'inside',
show: true,
start: 1,
end: 100,
zoomOnMouseWheel: false, //滚轮是否触发缩放
moveOnMouseMove: false, //鼠标滚轮触发滚动
}
],
grid: {
top: '10%',
right: '3%',
left: '7%',
bottom: '15%',
},
legend: {
top: '1',
right: 'center',
textStyle: {
color: '#fff',
fontSize: '20',
fontFamily: 'Microsoft YaHei'
},
},
xAxis: {
data: center3.map(item => item.name),
axisLine: {
show: true, //隐藏X轴轴线
lineStyle: {
color: '#005094',
width: 1,
},
},
axisTick: {
show: false, //隐藏X轴刻度
},
axisLabel: {
show: true,
rotate: 40,
textStyle: {
color: '#fff',//'rgba(255,255,255,0.6)', //X轴文字颜色
fontSize: '20',
fontFamily: 'Microsoft YaHei'
},
},
},
yAxis: [
{
type: 'value',
name: '亿',
splitLine: {
show: true,
lineStyle: {
color: '#68b4dd66',
type: 'dashed',
},
},
axisLine: {
show: true,
lineStyle: {
color: '#3D7495',
},
},
axisLabel: {
show: true,
textStyle: {
color: '#fff',
fontSize: '20',
fontFamily: 'Microsoft YaHei'
},
},
nameTextStyle: {
color: '#fff',
fontSize: 20,
fontFamily: 'Microsoft YaHei'
},
},
],
series: [
{
name: '计划投资',
type: 'bar',
barWidth: 10,
itemStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: '#69c0ff',
},
{
offset: 1,
color: '#082550',
},
]),
},
},
data: center3.map(item => item.value),
},
{
name: '实际投资',
type: 'bar',
barWidth: 10,
itemStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: '#957DFF',
},
{
offset: 1,
color: '#082550',
},
]),
},
},
data: center3.map(item => item.value2),
},
],
}
myChart.on('click', function (param) {
that.projectListTipShow = true
})
myChart.setOption(option)
tools.loopShowTooltip(myChart, option, {
nterval: 2000,
loopSeries: true,
})
// let arr = center3.map(item => item.value2)
// this.timeOut = setInterval(function () {
// let startValue = myChart.getModel().option.dataZoom[0].startValue;
// let endValue = myChart.getModel().option.dataZoom[0].endValue;
// let start = myChart.getModel().option.xAxis[0].data[startValue];//起始X轴
// let end = myChart.getModel().option.xAxis[0].data[endValue];//结束X轴
// // 每次向后滚动一个,最后一个从头开始。
// // console.log(option.dataZoom[0].endValue);
// if (option.dataZoom[0].endValue >= 12) {
// option.dataZoom[0].endValue = 5
// option.dataZoom[0].startValue = 0
// } else {
// option.dataZoom[0].endValue = option.dataZoom[0].endValue + 6
// option.dataZoom[0].startValue = option.dataZoom[0].startValue + 6
// }
// // myChart.dispatchAction({
// // type: 'showTip',
// // seriesIndex: 0,
// // dataIndex: startValue +1,
// // });
// myChart.setOption(option);
// }, 12000);
},
convertData (data) {
var res = []
for (var i = 0; i < data.length; i++) {
var geoCoord = this.geoCoordMap[data[i].name]
if (geoCoord) {
res.push({
name: data[i].name,
value: geoCoord.concat(data[i].value),
})
}
}
return res
},
initProvinceChart () {
var data = center5
this.geoCoordMap = []
/*获取地图数据*/
this.mapChart = echarts.init(this.$refs['echarts-map'])
echarts.registerMap('shanxi', shanxi)
var mapFeatures = echarts.getMap('shanxi').geoJson.features
mapFeatures.forEach(v => {
// 地区名称
var name = v.properties.name
// 地区经纬度
this.geoCoordMap[name] = v.properties.centroid
// 按照地图乱序
// data.push({ name: v.properties.name, value: v.properties.centroid[0], value2: v.properties.centroid[1] })
})
let option = {
tooltip: {
padding: 15,
enterable: true,
transitionDuration: 1,
formatter: (params, ticket, callback) => {
// 清空所有轮播
for (var k in this.geoCoordMap) {
this.mapChart.dispatchAction({
// type: 'geoUnSelect',
type: 'downplay',
name: k,
})
}
// 如果鼠标滑动到线线上面,则返回空
this.mapChart.dispatchAction({
// type: 'geoSelect',
type: 'highlight',
name: params.name,
})
if (params.componentSubType == 'lines') {
return
}
if (params.componentSubType == 'scatter') {
let tipHtml = `
项目数量:${data[params.dataIndex].value2}个
总投资额:${params.data.value[2]}亿
项目数量:${data[params.dataIndex].value2}个
总投资额:${params.data.value}亿
项目数量:${data[params.dataIndex].value2}个
总投资额:${params.data.value[2]}亿
项目数量:${data[params.dataIndex].value2}个
总投资额:${params.data.value}亿