let app = new Vue({ el: '#app', data () { return { rightAdd: {},// 左边新增筛选参数 projectNum: '', // 项目列表弹窗顶部类目筛选条件 centerType: false, // 中间3D饼图 boardType: '', // 哪边的项目看板 pullShow: false, // 选择年份弹窗 pollList: [], mockData: false,// 是否使用修改的数据 year: '', // 选择的年份 boardUrl: '', // 跳转路径 boardTipShow: false, // 项目看板弹窗专用 lineCommonCompany: [], //双柱状图弹窗上面的折线图x轴 commonCompanyAll: [], // 公司包括编码 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", }, originalConfig6: [], config6: listPop } }, 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 () { this.getUrlParams() this.countYear() this.comeIn() }, methods: { // 获取地址栏参数 getUrlParams (id) { let url = window.location.href // 通过 ? 分割获取后面的参数字符串 let urlStr = url.split('?')[1] if (!urlStr) { return } // 创建空对象存储参数 let obj = {}; // 再通过 & 将每一个参数单独分割出来 let paramsArr = urlStr.split('&') for (let i = 0, len = paramsArr.length; i < len; i++) { // 再通过 = 将每一个参数分割为 key:value 的形式 let arr = paramsArr[i].split('=') obj[arr[0]] = arr[1]; } if (obj.model) { obj.model == 'A' || obj.model == 'a' ? this.mockData = false : this.mockData = true } }, // 计算展示的年份 countYear () { this.year = 2024 // this.year = new Date().getFullYear() // for (i = 2022; true; i++) { // if (i == this.year) { // this.pollList.push(i) // return // } else { // this.pollList.push(i) // } // } }, comeIn () { if (this.versions) { // 接口版 this.getAppToken() setTimeout(() => { this.changeTopColor() // 大屏三 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() }) } }, chooseTime (value) { let that = this this.year = value that.destroyCharts() this.pullShow = false setTimeout(item => { that.comeIn() }) }, destroyCharts () { this.left10Chart ? this.left10Chart.dispose() : '' this.left1Chart ? this.left1Chart.destroy() : '' this.left2Chart ? this.left2Chart.destroy() : '' this.left3Chart ? this.left3Chart.destroy() : '' this.left4Chart ? this.left4Chart.destroy() : '' this.left5Chart ? this.left5Chart.destroy() : '' this.left6Chart ? this.left6Chart.destroy() : '' this.left7Chart ? this.left7Chart.dispose() : '' this.left8Chart ? this.left8Chart.dispose() : '' this.left9Chart ? this.left9Chart.dispose() : '' this.chartCarousel ? this.chartCarousel.dispose() : '' this.myChartTip1 ? this.myChartTip1.dispose() : '' this.myChartTip2 ? this.myChartTip2.dispose() : '' this.myChartTip3 ? this.myChartTip3.dispose() : '' this.left11Chart ? this.left11Chart.dispose() : '' this.right1Chart ? this.right1Chart.dispose() : '' this.right2Chart ? this.right2Chart.dispose() : '' this.right3Chart ? this.right3Chart.dispose() : '' this.echartR4Chart ? this.echartR4Chart.dispose() : '' this.echartR5Chart ? this.echartR5Chart.dispose() : '' this.center1Chart ? this.center1Chart.destroy() : '' this.center2Chart ? this.center2Chart.dispose() : '' this.center3Chart ? this.center3Chart.dispose() : '' this.center4Chart ? this.center4Chart.destroy() : '' this.mapChart ? this.mapChart.dispose() : '' }, // 获取token getAppToken () { // dev环境 // let value = { // "appId": "xilan1014", //系统编码 // "appSecret": "12345678910Aa@Bb@Cc", //AccessToken加密认证密钥 // "tenantid": "", //租户id // "accountId": "", //数据中心id // "language": "zh_CN" // } // SIT环境 let value = { "appId": "68dp", "appSecret": "9ErhY^O{n?@Pc#eb7HYX", "tenantid": "", "accountId": "1635498801198269440", "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": "19900000001", //登录用户手机号 "apptoken": this.app_token, //应用令牌 "tenantid": "", //租户id "accountId": "1635498801198269440",//数据中心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 => { this.commonCompanyAll = res.data 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 () { let that = this return new Promise((resolve, err) => { let value = { access_token: this.access_token, "data": { "mdnb_combofield": this.mockData ? 'B' : 'A', "mdnb_datefield": this.year - 1 + '-01-01', }, pageSize: 1000 } post('/ierp/kapi/v2/mdnb/mdnb_xmkb/mdnb_manager_preinvest/tqqyedfx', value).then(res => { if (res.data.rows.length > 0) { let dataList = res.data.rows[0].entryentity left3 = [[], [], []] dataList.forEach(item => { // 已用额度 left3[0].push(that.yuanChange(item.mdnb_amountfield26)) // 剩余额度 left3[1].push(that.yuanChange(item.mdnb_amountfield27)) // 总额度 left3[2].push(that.yuanChange(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": this.mockData ? 'B' : 'A', "mdnb_datefield": this.year - 1 + '-01-01', }, pageSize: 1000 } post('/ierp/kapi/v2/mdnb/mdnb_xmkb/mdnb_manager_preinvest/tqtzjhfx', value).then(res => { if (res.data.rows.length > 0) { 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 = that.yuanChange(dataList.mdnb_amountfield9) left5[0].num = dataList.mdnb_integerfield15 left5[1].y = that.yuanChange(dataList.mdnb_amountfield43) left5[1].num = dataList.mdnb_integerfield14 left6[0].y = that.yuanChange(dataList.mdnb_amountfield15) left6[0].num = dataList.mdnb_integerfield16 left6[1].y = that.yuanChange(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": this.mockData ? 'B' : 'A', "mdnb_datefield": this.year - 1 + '-01-01', }, pageSize: 1000 } post('/ierp/kapi/v2/mdnb/mdnb_xmkb/mdnb_manager_preinvest/tqcebjfx', value).then(res => { if (res.data.rows.length > 0) { let dataList = this.classify(res.data.rows[0].mdnb_entryentity, 'mdnb_textfield1') // 传统产业分析 if (dataList[0].data.length > left7.length || dataList[0].length == left7.length) { for (let i = 0; i < left7.length; i++) { left7[i].num = dataList[0].data[i].mdnb_integerfield13 left7[i].y = dataList[0].data[i].mdnb_amountfield8 } this.initChartL5() } // 战略性新兴产业 if (dataList[1].data.length > left8.length || dataList[1].length == left8.length) { for (let i = 0; i < left8.length; i++) { left8[i].num = dataList[1].data[i].mdnb_integerfield13 left8[i].y = dataList[1].data[i].mdnb_amountfield8 } this.initChartL6() } // 特色优势产业 if (dataList[2].data.length > left9.length || dataList[2].length == left9.length) { for (let i = 0; i < left9.length; i++) { left9[i].num = dataList[2].data[i].mdnb_integerfield13 left9[i].y = dataList[2].data[i].mdnb_amountfield8 } this.initChartL7() } // 公共基础等产业 if (dataList[3].data.length > left10.length || dataList[3].length == left10.length) { for (let i = 0; i < left10.length; i++) { left10[i].num = dataList[3].data[i].mdnb_integerfield13 left10[i].y = dataList[3].data[i].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": this.mockData ? 'B' : 'A', "mdnb_datefield": this.year - 1 + '-01-01', }, pageSize: 1000 } post('/ierp/kapi/v2/mdnb/mdnb_xmkb/mdnb_manager_preinvest/tqxmjdfx', value).then(res => { if (res.data.rows.length > 0) { let dataList = res.data.rows[0] // 固定资产进度分布 // 特别监管 left13[0][0][2] = dataList.mdnb_integerfield1 left13[0][0][3] = this.yuanChange(dataList.mdnb_amountfield241) left13[0][1][2] = dataList.mdnb_integerfield3 left13[0][1][3] = this.yuanChange(dataList.mdnb_amountfield5) left13[0][2][2] = dataList.mdnb_integerfield5 left13[0][2][3] = this.yuanChange(dataList.mdnb_amountfield21) left13[0][3][2] = dataList.mdnb_integerfield7 left13[0][3][3] = this.yuanChange(dataList.mdnb_amountfield29) // 备案 left13[1][0][2] = dataList.mdnb_integerfield2 left13[1][0][3] = this.yuanChange(dataList.mdnb_amountfield341) left13[1][1][2] = dataList.mdnb_integerfield4 left13[1][1][3] = this.yuanChange(dataList.mdnb_amountfield11) left13[1][2][2] = dataList.mdnb_integerfield6 left13[1][2][3] = this.yuanChange(dataList.mdnb_amountfield28) left13[1][3][2] = dataList.mdnb_integerfield8 left13[1][3][3] = this.yuanChange(dataList.mdnb_amountfield30) // 股权类进度分布 // 特别监管 left14[0][0][2] = dataList.mdnb_integerfield11 left14[0][0][3] = this.yuanChange(dataList.mdnb_amountfield2411) left14[0][1][2] = dataList.mdnb_integerfield31 left14[0][1][3] = this.yuanChange(dataList.mdnb_amountfield51) left14[0][2][2] = dataList.mdnb_integerfield51 left14[0][2][3] = this.yuanChange(dataList.mdnb_amountfield211) left14[0][3][2] = dataList.mdnb_integerfield71 left14[0][3][3] = this.yuanChange(dataList.mdnb_amountfield291) // 备案 left14[1][0][2] = dataList.mdnb_integerfield21 left14[1][0][3] = this.yuanChange(dataList.mdnb_amountfield3411) left14[1][1][2] = dataList.mdnb_integerfield41 left14[1][1][3] = this.yuanChange(dataList.mdnb_amountfield111) left14[1][2][2] = dataList.mdnb_integerfield61 left14[1][2][3] = this.yuanChange(dataList.mdnb_amountfield281) left14[1][3][2] = dataList.mdnb_integerfield81 left14[1][3][3] = this.yuanChange(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": this.mockData ? 'B' : 'A', "mdnb_datefield": this.year - 1 + '-01-01', }, pageSize: 1000 } post('/ierp/kapi/v2/mdnb/mdnb_xmkb/mdnb_manager_preinvest/tqtzedfx', value).then(res => { if (res.data.rows.length > 0) { 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": this.mockData ? 'B' : 'A', "mdnb_datefield": this.year - 1 + '-01-01', }, pageSize: 1000 } post('/ierp/kapi/v2/mdnb/mdnb_xmkb/mdnb_manager_preinvest/tqzdlxzb', value).then(res => { if (res.data.rows.length > 0) { 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].push(item.data[i].mdnb_integerfield10) left12[index][1].push(item.data[i].mdnb_integerfield12) left12[index][2].push(item.data[i].mdnb_integerfield9) } }) that.initChartL9() // 左边的轮播 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] = that.yuanChange(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: this.mockData ? '1' : '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: this.mockData ? '1' : '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: this.mockData ? '1' : '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 = this.yuanChange(item.mdnb_aheadmoney) right4[index].value2 = this.yuanChange(item.mdnb_edmoney) right4[index].value3 = this.yuanChange(item.mdnb_smoney) right4[index].value4 = this.yuanChange(item.mdnb_jmoney) right4[index].value5 = this.yuanChange(item.mdnb_fkmoney) }) this.initChartR1() resolve(1); }) }); }, // 进度成本偏差 getDate10 () { let that = this return new Promise((resolve, err) => { let value = { access_token: this.access_token, "request": { isInsert: this.mockData ? '1' : '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_zb right5[0][index][2] = that.yuanChange(item.mdnb_amount_z) right5[1][index][1] = item.mdnb_amount_nb right5[1][index][2] = that.yuanChange(item.mdnb_amount_n) right5[2][index][1] = item.mdnb_amount_fb right5[2][index][2] = that.yuanChange(item.mdnb_amount_f) }) this.initChartR2() resolve(1); }) }); }, // 项目风险分析A getDate11 () { return new Promise((resolve, err) => { let value = { access_token: this.access_token, "request": { isInsert: this.mockData ? '1' : '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: this.mockData ? '1' : '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 () { let that = this return new Promise((resolve, err) => { let value = { access_token: this.access_token, mock: this.mockData, presetYear: this.year } get('/ierp/kapi/v2/mdnb/mdnb_xmkb/presetdata/getKeyData', value).then(res => { // 头部指标 if (!res.data) { return } 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 // 投资产业分布 for (let i = 0; i < center2.length; i++) { center2[i].y = that.yuanChange(res.data.distribution[i].amount) center2[i].value = that.yuanChange(res.data.distribution[i].amount) center2[i].num = res.data.distribution[i].count center2[i].typeno = res.data.distribution[i].typeno } // 投资执行情况 res.data.implementationStatus.forEach((item, index) => { center3[index].value = that.yuanChange(item.plan) center3[index].value2 = that.yuanChange(item.reality) }) // 五个一体化 res.data.five.forEach((item, index) => { center6[index] = { name: item.type, value: that.yuanChange(item.amount), typeno: item.typeno } }) // 投资阶段分析 res.data.investmentStage.forEach((item, index) => { center7[index] = { name: item.type, value: Number(item.num), value2: that.yuanChange(item.amount), typeno: item.typeno, sliced: false, selected: false } }) // 重点项目监控 center8 = [] this.originalConfig6 = res.data.projectMonitoring res.data.projectMonitoring.forEach((item, index) => { center8.push({ value: item.amount, name: item.name, office: item.group }) }) // 中国地图 centerChina = [] res.data.investmentMap.forEach((item, index) => { centerChina.push({ name: item.address, value: that.yuanChange(item.amount), value2: item.value2 }) }) // 项目状态 proState.projectStatus1 = res.data.projectStatus.projectStatus1 proState.projectStatus2 = res.data.projectStatus.projectStatus2 proState.projectStatus3 = res.data.projectStatus.projectStatus3 setTimeout(() => { that.initChinaChart() }) resolve(1); }) }); }, // 右边穿透一级 rightPenetrateOne () { this.boardType = 'right' return new Promise((resolve, err) => { let value = { access_token: this.access_token, "request": { isInsert: this.mockData ? '1' : '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('right') this.initChartLTip3('right') }) resolve(1); }) }); }, // 右边穿透二级 rightPenetrateTwo (modelName, substraction, orgName) { this.boardType = 'right' let that = this return new Promise((resolve, err) => { let value = { access_token: this.access_token, "request": { isInsert: this.mockData ? '1' : '0', modelName: this.rightAdd.modelName, projectStepCode: this.rightAdd.projectStepCode, substraction, orgName }, pageSize: 1000 } post('/ierp/kapi/v2/mdnb/mdnb_xmkb/mdnb_manager_middle/getTwoLevelData', value).then(res => { that.originalConfig6 = res.data that.config6.data = [] if (this.projectNum == 311) { that.config6.header = ["所属集团", "项目名称", '实施主体', '投中项目阶段', '投资总额(万元)'] res.data.forEach((item, index) => { that.config6.data[index] = [] that.config6.data[index][0] = item.mdnb_unitcompany that.config6.data[index][1] = item.mdnb_project_name that.config6.data[index][2] = item.mdnb_implement_org that.config6.data[index][3] = item.mdnb_projectstep_mid that.config6.data[index][4] = item.mdnb_investment_money / 10000 }) } else if (this.projectNum == 312 || this.projectNum == 313) { that.config6.header = ["所属集团", "项目名称", '实施主体', '容差百分比', '投资总额(万元)'] res.data.forEach((item, index) => { that.config6.data[index] = [] that.config6.data[index][0] = item.mdnb_unitcompany that.config6.data[index][1] = item.mdnb_project_name that.config6.data[index][2] = item.mdnb_implement_org that.config6.data[index][3] = item.mdnb_percentagetolerance that.config6.data[index][4] = item.mdnb_investment_money / 10000 }) } else if (this.projectNum == 314) { that.config6.header = ["所属集团", "项目名称", '实施主体', '预算额(万元)', '已签订合同额(万元)', '产值认定额(万元)', '结算额(万元)', '付款申请额(万元)', '实际付款额(万元)'] res.data.forEach((item, index) => { that.config6.data[index] = [] that.config6.data[index][0] = item.mdnb_unitcompany that.config6.data[index][1] = item.mdnb_project_name that.config6.data[index][2] = item.mdnb_implement_org that.config6.data[index][3] = item.mdnb_budgetamount / 10000 that.config6.data[index][4] = item.mdnb_contractamount / 10000 that.config6.data[index][5] = item.mdnb_outputamount / 10000 that.config6.data[index][6] = item.mdnb_settlementamount / 10000 that.config6.data[index][6] = item.mdnb_paymentamount / 10000 that.config6.data[index][6] = item.mdnb_actualpayamount / 10000 }) } else if (this.projectNum == 315) { that.config6.header = ["所属集团", "项目名称", '实施主体', '高风险项', '中风险项', '低风险项', '投资总额(万元)'] res.data.forEach((item, index) => { that.config6.data[index] = [] that.config6.data[index][0] = item.mdnb_unitcompany that.config6.data[index][1] = item.mdnb_project_name that.config6.data[index][2] = item.mdnb_implement_org that.config6.data[index][3] = item.mdnb_heigtdanger that.config6.data[index][4] = item.mdnb_middledanger that.config6.data[index][5] = item.mdnb_lowdanger that.config6.data[index][6] = item.mdnb_investment_money / 10000 }) } that.config6 = { ...that.config6 } that.projectListTipShow = true resolve(1); }) }); }, // 左边穿透一级 leftPenetrateOne (mdnb_textfield11, mdnb_textfield13, mdnb_textfield16, mdnb_textfield23, typeNum, type, param, typeCTwo, paramCTwo) { this.boardType = 'left' return new Promise((resolve, err) => { let value = { access_token: this.access_token, "data": { mdnb_combofield: this.mockData ? 'B' : 'A', mdnb_textfield11, mdnb_textfield13, mdnb_textfield16, mdnb_textfield23, mdnb_datefield: this.year - 1 + '-01-01' }, pageSize: 1000 } post('/ierp/kapi/v2/mdnb/mdnb_xmkb/mdnb_manager_preinvest/yjct', value).then(res => { if (res.data.rows.length > 0) { 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('left', mdnb_textfield11, mdnb_textfield13, mdnb_textfield16, mdnb_textfield23, type, param, typeCTwo, paramCTwo) this.initChartLTip3('left', mdnb_textfield11, mdnb_textfield13, mdnb_textfield16, mdnb_textfield23, type, param, typeCTwo, paramCTwo) }) } else if (typeNum == 1) { this.initChartLTip('left', mdnb_textfield11, mdnb_textfield13, mdnb_textfield16, mdnb_textfield23, type, param, typeCTwo, paramCTwo) } } resolve(1); }) }); }, // 左边穿透二级 leftPenetrateTwo (mdnb_textfield12, mdnb_textfield19, mdnb_textfield15, mdnb_textfield17, mdnb_textfield20, num) { num && (this.projectNum = num) this.boardType = 'left' let that = this if (that.versions) { return new Promise((resolve, err) => { let value = { access_token: this.access_token, "data": { mdnb_combofield: this.mockData ? 'B' : 'A', mdnb_datefield: this.year - 1 + '-01-01', mdnb_textfield12, mdnb_textfield19, mdnb_textfield15, mdnb_textfield17, mdnb_textfield20 }, pageSize: 1000 } if (mdnb_textfield20) { post('/ierp/kapi/v2/mdnb/mdnb_xmkb/mdnb_manager_preinvest/ejct', value).then(res => { that.config6.data = [] if (res.data.rows.length > 0) { that.originalConfig6 = res.data.rows[0].mdnb_entryentity11 that.config6.data = [] if (this.projectNum == 211 || this.projectNum == 212) { that.config6.header = ["所属集团", "项目名称", '投资主体', '项目类型', '项目性质', '已占用额度(万元)'] res.data.rows[0].mdnb_entryentity11.forEach((item, index) => { that.config6.data[index] = [] that.config6.data[index][0] = item.mdnb_textfield7 that.config6.data[index][1] = item.mdnb_textfield6 that.config6.data[index][2] = item.mdnb_textfield8 that.config6.data[index][3] = item.mdnb_textfield25 that.config6.data[index][4] = item.mdnb_textfield26 that.config6.data[index][5] = item.mdnb_amountfield22 / 10000 }) } else if (this.projectNum == 2141) { that.config6.header = ["所属集团", "项目名称", '投资主体', '项目类型', '项目性质', '本年度计划投资额(万元)'] res.data.rows[0].mdnb_entryentity11.forEach((item, index) => { that.config6.data[index] = [] that.config6.data[index][0] = item.mdnb_textfield7 that.config6.data[index][1] = item.mdnb_textfield6 that.config6.data[index][2] = item.mdnb_textfield8 that.config6.data[index][3] = item.mdnb_textfield25 that.config6.data[index][4] = item.mdnb_textfield26 that.config6.data[index][5] = item.mdnb_amountfield22 / 10000 }) } else if (this.projectNum == 2142) { that.config6.header = ["所属集团", "项目名称", '投资主体', '项目类型', '项目性质', '是否主业', '本年度计划投资额(万元)'] res.data.rows[0].mdnb_entryentity11.forEach((item, index) => { that.config6.data[index] = [] that.config6.data[index][0] = item.mdnb_textfield7 that.config6.data[index][1] = item.mdnb_textfield6 that.config6.data[index][2] = item.mdnb_textfield8 that.config6.data[index][3] = item.mdnb_textfield25 that.config6.data[index][4] = item.mdnb_textfield26 that.config6.data[index][5] = item.mdnb_textfield21 that.config6.data[index][6] = item.mdnb_amountfield22 / 10000 }) } else if (this.projectNum == 2143) { that.config6.header = ["所属集团", "项目名称", '投资主体', '项目类型', '项目性质', '项目管理类型', '本年度计划投资额(万元)'] res.data.rows[0].mdnb_entryentity11.forEach((item, index) => { that.config6.data[index] = [] that.config6.data[index][0] = item.mdnb_textfield7 that.config6.data[index][1] = item.mdnb_textfield6 that.config6.data[index][2] = item.mdnb_textfield8 that.config6.data[index][3] = item.mdnb_textfield25 that.config6.data[index][4] = item.mdnb_textfield26 that.config6.data[index][5] = item.mdnb_textfield22 that.config6.data[index][6] = item.mdnb_amountfield22 / 10000 }) } else if (this.projectNum == 215) { that.config6.header = ["所属集团", "项目名称", '投资主体', '产业类别I级', '产业类别II级', '本年度计划投资额(万元)'] res.data.rows[0].mdnb_entryentity11.forEach((item, index) => { that.config6.data[index] = [] that.config6.data[index][0] = item.mdnb_textfield7 that.config6.data[index][1] = item.mdnb_textfield6 that.config6.data[index][2] = item.mdnb_textfield8 that.config6.data[index][3] = item.mdnb_textfield9 that.config6.data[index][4] = item.mdnb_textfield10 that.config6.data[index][5] = item.mdnb_amountfield22 / 10000 }) } else if (this.projectNum == 216) { that.config6.header = ["所属集团", "项目名称", '投资主体', '项目类型', '项目性质', '项目阶段', '本年度计划投资额(万元)'] res.data.rows[0].mdnb_entryentity11.forEach((item, index) => { that.config6.data[index] = [] that.config6.data[index][0] = item.mdnb_textfield7 that.config6.data[index][1] = item.mdnb_textfield6 that.config6.data[index][2] = item.mdnb_textfield8 that.config6.data[index][3] = item.mdnb_textfield25 that.config6.data[index][4] = item.mdnb_textfield26 that.config6.data[index][5] = item.mdnb_textfield24 that.config6.data[index][6] = item.mdnb_amountfield22 / 10000 }) } } that.config6 = { ...that.config6 } that.projectListTipShow = true resolve(1); }) } else { post('/ierp/kapi/v2/mdnb/mdnb_xmkb/mdnb_manager_preinvest/tzedfxzed', value).then(res => { if (res.data.rows.length > 0) { that.originalConfig6 = res.data.rows[0].mdnb_entryentity11 that.config6.data = [] if (this.projectNum == 211 || this.projectNum == 212) { that.config6.header = ["所属集团", "项目名称", '投资主体', '项目类型', '项目性质', '已占用额度(万元)'] res.data.rows[0].mdnb_entryentity11.forEach((item, index) => { that.config6.data[index] = [] that.config6.data[index][0] = item.mdnb_textfield7 that.config6.data[index][1] = item.mdnb_textfield6 that.config6.data[index][2] = item.mdnb_textfield8 that.config6.data[index][3] = item.mdnb_textfield25 that.config6.data[index][4] = item.mdnb_textfield26 that.config6.data[index][5] = item.mdnb_amountfield22 / 10000 }) } else if (this.projectNum == 2141) { that.config6.header = ["所属集团", "项目名称", '投资主体', '项目类型', '项目性质', '本年度计划投资额(万元)'] res.data.rows[0].mdnb_entryentity11.forEach((item, index) => { that.config6.data[index] = [] that.config6.data[index][0] = item.mdnb_textfield7 that.config6.data[index][1] = item.mdnb_textfield6 that.config6.data[index][2] = item.mdnb_textfield8 that.config6.data[index][3] = item.mdnb_textfield25 that.config6.data[index][4] = item.mdnb_textfield26 that.config6.data[index][5] = item.mdnb_amountfield22 / 10000 }) } else if (this.projectNum == 2142) { that.config6.header = ["所属集团", "项目名称", '投资主体', '项目类型', '项目性质', '是否主业', '本年度计划投资额(万元)'] res.data.rows[0].mdnb_entryentity11.forEach((item, index) => { that.config6.data[index] = [] that.config6.data[index][0] = item.mdnb_textfield7 that.config6.data[index][1] = item.mdnb_textfield6 that.config6.data[index][2] = item.mdnb_textfield8 that.config6.data[index][3] = item.mdnb_textfield25 that.config6.data[index][4] = item.mdnb_textfield26 that.config6.data[index][5] = item.mdnb_textfield21 that.config6.data[index][6] = item.mdnb_amountfield22 / 10000 }) } else if (this.projectNum == 2143) { that.config6.header = ["所属集团", "项目名称", '投资主体', '项目类型', '项目性质', '项目管理类型', '本年度计划投资额(万元)'] res.data.rows[0].mdnb_entryentity11.forEach((item, index) => { that.config6.data[index] = [] that.config6.data[index][0] = item.mdnb_textfield7 that.config6.data[index][1] = item.mdnb_textfield6 that.config6.data[index][2] = item.mdnb_textfield8 that.config6.data[index][3] = item.mdnb_textfield25 that.config6.data[index][4] = item.mdnb_textfield26 that.config6.data[index][5] = item.mdnb_textfield22 that.config6.data[index][6] = item.mdnb_amountfield22 / 10000 }) } else if (this.projectNum == 215) { that.config6.header = ["所属集团", "项目名称", '投资主体', '产业类别I级', '产业类别II级', '本年度计划投资额(万元)'] res.data.rows[0].mdnb_entryentity11.forEach((item, index) => { that.config6.data[index] = [] that.config6.data[index][0] = item.mdnb_textfield7 that.config6.data[index][1] = item.mdnb_textfield6 that.config6.data[index][2] = item.mdnb_textfield8 that.config6.data[index][3] = item.mdnb_textfield9 that.config6.data[index][4] = item.mdnb_textfield10 that.config6.data[index][5] = item.mdnb_amountfield22 / 10000 }) } else if (this.projectNum == 216) { that.config6.header = ["所属集团", "项目名称", '投资主体', '项目类型', '项目性质', '项目阶段', '本年度计划投资额(万元)'] res.data.rows[0].mdnb_entryentity11.forEach((item, index) => { that.config6.data[index] = [] that.config6.data[index][0] = item.mdnb_textfield7 that.config6.data[index][1] = item.mdnb_textfield6 that.config6.data[index][2] = item.mdnb_textfield8 that.config6.data[index][3] = item.mdnb_textfield25 that.config6.data[index][4] = item.mdnb_textfield26 that.config6.data[index][5] = item.mdnb_textfield24 that.config6.data[index][6] = item.mdnb_amountfield22 / 10000 }) } that.config6 = { ...that.config6 } that.projectListTipShow = true } resolve(1); }) } }); } else { that.projectListTipShow = true } }, // 中间穿透一级 一个柱状图还是两个 centerPenetrateOne (type, param, typeNum, typeCTwo, paramCTwo, portType) { this.boardType = 'center' let that = this return new Promise((resolve, err) => { let value = { access_token: this.access_token, mock: this.mockData, presetYear: this.year, type, param } get('/ierp/kapi/v2/mdnb/mdnb_xmkb/presetdata/getPenetrationLevel1', value).then(res => { if (typeNum == 1) { common3 = [] res.data.keyIndicators.forEach((item, index) => { 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('center', '', '', '', '', typeCTwo, paramCTwo, portType) }) } 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 == 'new') { res.data.keyIndicators.forEach((item, index) => { common4.push(item.newamount) common5.push(item.newcount) }) } else if (param == 'renew') { res.data.keyIndicators.forEach((item, index) => { common4.push(item.renewamount) common5.push(item.renewcount) }) } else if (param == '太原市') { res.data.investmentMap.forEach((item, index) => { common4.push(item.value2) common5.push(item.amount) }) } } setTimeout(() => { this.initChartLTip2('center', '', '', '', '', type, param, typeCTwo, paramCTwo, portType) this.initChartLTip3('center', '', '', '', '', type, param, typeCTwo, paramCTwo, portType) }) } else if (typeNum == 3) { // 山西地图 center5 = [] res.data.investmentMap.forEach((item, index) => { center5.push({ name: item.address, value: that.yuanChange(item.amount), value2: item.value2 }) }) setTimeout(() => { that.initProvinceChart() }); } resolve(1); }) }); }, // 中间穿透二级 centerPenetrateTwo (type, param, orgNum, portType) { this.boardType = 'center' let that = this return new Promise((resolve, err) => { let value = { access_token: this.access_token, mock: this.mockData, presetYear: this.year, type, param, orgNum } that.config6.header[2] = '投资主体' that.config6.header[5] = '年投资完成额(亿)' if (portType == 1) { get('/ierp/kapi/v2/mdnb/mdnb_xmkb/presetdata/MainPageMonthReportProject', value).then(res => { that.config6.data = [] that.originalConfig6 = res.data res.data.forEach((item, index) => { that.config6.data[index] = [] that.config6.data[index][0] = item.projectname that.config6.data[index][1] = item.orgName that.config6.data[index][2] = item.tzzt that.config6.data[index][3] = item.cylb that.config6.data[index][4] = item.cylb2 that.config6.data[index][5] = item.amount }) that.config6 = { ...that.config6 } that.projectListTipShow = true resolve(1); }) } else if (portType == 2) { get('/ierp/kapi/v2/mdnb/mdnb_xmkb/presetdata/MainPagePlanProject', value).then(res => { that.config6.data = [] that.originalConfig6 = res.data res.data.forEach((item, index) => { that.config6.data[index] = [] that.config6.data[index][0] = item.projectname that.config6.data[index][1] = item.orgName that.config6.data[index][2] = item.tzzt that.config6.data[index][3] = item.cylb that.config6.data[index][4] = item.cylb2 that.config6.data[index][5] = item.amount }) that.config6 = { ...that.config6 } that.projectListTipShow = true resolve(1); }) } else { value = { access_token: this.access_token, mock: this.mockData, presetYear: this.year, type: 'investmentMap', param: '太原市', orgNum } get('/ierp/kapi/v2/mdnb/mdnb_xmkb/presetdata/MainPageMonthReportProject', value).then(res => { that.config6.data = [] that.originalConfig6 = res.data res.data.forEach((item, index) => { that.config6.data[index] = [] that.config6.data[index][0] = item.projectname that.config6.data[index][2] = item.orgName that.config6.data[index][5] = item.amount }) that.config6 = { ...that.config6 } that.projectListTipShow = true 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() }); }, // 找公司编码 findCode (code) { let a = this.commonCompanyAll.find((item, index) => { return item.simplename == code }) return a ? a.number.slice(0, 4) : '' }, // 找项目编码 findProjectCode (a, b, type) { if (type == 'center') { let c = this.originalConfig6.find(item => { return item.projectname == a && item.tzzt == b }) return c.projectno } else if (type == 'right') { let c = this.originalConfig6.find(item => { return item.mdnb_project_name == a && item.mdnb_org == b }) return c.mdnb_projectnumber } else if (type == 'left') { let c = this.originalConfig6.find(item => { return item.mdnb_textfield6 == a && item.mdnb_textfield8 == b }) return c.mdnb_textfield14 } }, // 去项目看板 goLookBoard (e, f) { console.log(e, '看看E') if (f) { this.boardType = f this.boardUrl = `http://172.21.3.68:8081/ierp/accessTokenLogin.do?access_token=${this.access_token}&redirect=http://172.21.3.68:8081/ierp/index.html?formId=mdnb_threetoproject&prj=${this.findProjectCode(e.row[0], e.row[1], this.boardType)}` } else { this.boardUrl = `http://172.21.3.68:8081/ierp/accessTokenLogin.do?access_token=${this.access_token}&redirect=http://172.21.3.68:8081/ierp/index.html?formId=mdnb_threetoproject&prj=${this.findProjectCode(e.row[0], e.row[2], this.boardType)}` } // this.findProjectCode(e.row[0],e.row[2]) // 当前页面打开 // 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.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, typeCTwo, paramCTwo, portType, num, modelName, projectStepCode) { modelName ? this.rightAdd.modelName = modelName : this.rightAdd.modelName = '' projectStepCode ? this.rightAdd.projectStepCode = projectStepCode : this.rightAdd.projectStepCode = '' num && (this.projectNum = num) this.titleName = e this.closeTap() this.echartDoubleTipShow = true if (this.versions) { 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, typeCTwo, paramCTwo, portType) } } else { setTimeout(() => { this.initChartLTip2() this.initChartLTip3() }) } }, // 单个柱状图的弹窗 showChartLTipSingle (e, location, type, param, mdnb_textfield11, mdnb_textfield13, mdnb_textfield16, mdnb_textfield23, typeCTwo, paramCTwo, portType, num) { this.projectNum = num this.closeTap() this.titleName = e this.echartSingleTipShow = true if (this.versions) { if (location == 'center') { this.centerPenetrateOne(type, param, 1, typeCTwo, paramCTwo, portType) } if (location == 'left') { this.leftPenetrateOne(mdnb_textfield11, mdnb_textfield13, mdnb_textfield16, mdnb_textfield23, 1, type, param) } } else { setTimeout(() => { this.initChartLTip(location) }) } }, initChartLTip (location, mdnb_textfield11, mdnb_textfield13, mdnb_textfield16, mdnb_textfield23, typeCTwo, paramCTwo, portType) { 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: "总额度", 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: ["总额度"], 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) { if (that.versions) { if (location == 'right') { that.rightPenetrateTwo(that.rightPenetrateTwo.modelName, '', that.findCode(param.name)) } else if (location == 'left') { that.leftPenetrateTwo(mdnb_textfield11, mdnb_textfield13, mdnb_textfield16, mdnb_textfield23, param.name, that.projectNum) } else if (location == 'center') { that.centerPenetrateTwo(typeCTwo, paramCTwo, that.findCode(param.name), portType) } } else { that.projectListTipShow = true } }) that.myChartTip1.setOption(option); }, initChartLTip2 (location, mdnb_textfield11, mdnb_textfield13, mdnb_textfield16, mdnb_textfield23, type, param, typeCTwo, paramCTwo, portType) { 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: "总数量", 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: ["总数量"], 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) { if (that.versions) { if (location == 'right') { that.rightPenetrateTwo(that.rightPenetrateTwo.modelName, '', that.findCode(param.name)) } else if (location == 'left') { that.leftPenetrateTwo(mdnb_textfield11, mdnb_textfield13, mdnb_textfield16, mdnb_textfield23, param.name, that.projectNum) } else if (location == 'center') { that.centerPenetrateTwo(typeCTwo, paramCTwo, that.findCode(param.name), portType) } } else { that.projectListTipShow = true } }) that.myChartTip2.setOption(option); }, initChartLTip3 (location, mdnb_textfield11, mdnb_textfield13, mdnb_textfield16, mdnb_textfield23, type, param, typeCTwo, paramCTwo, portType) { 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: "总额度", 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: ["总额度"], 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) { if (that.versions) { if (location == 'right') { that.rightPenetrateTwo(that.rightPenetrateTwo.modelName, '', that.findCode(param.name)) } else if (location == 'left') { that.leftPenetrateTwo(mdnb_textfield11, mdnb_textfield13, mdnb_textfield16, mdnb_textfield23, param.name, that.projectNum) } else if (location == 'center') { that.centerPenetrateTwo(typeCTwo, paramCTwo, that.findCode(param.name), portType) } } else { that.projectListTipShow = true } }) 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 () { this.left11Chart = 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' }, }, }, }, ], }; this.left11Chart.setOption(option) }, initChartL1 () { this.left9Chart = 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轴文字颜色 }, }, }, }, ], }; this.left9Chart.setOption(option) }, initChartL2 () { var chartData = left5 var timer = null; var i = 0; let that = this var option = { colors: ['#064F78', '#BDB35D', '#623726', '#955773', '#B57C63', '#73A88E', '#09736D', '#13400B', '#0D3265'], 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 } }) that.left1Chart.update({ series: [{ type: 'pie', name: '占比', point: { events: { click: function (e) { that.projectNum = 2142 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 }) that.left1Chart.update({ series: [{ type: 'pie', name: '占比', point: { events: { click: function (e) { that.projectNum = 2142 that.showChartLTipDouble(e.point.name, 'left', '投资计划分析', e.point.name, '', '') } } }, data: chartData }] }) } }, 2000); }, legendItemClick: function (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.projectNum = 2142 that.showChartLTipDouble(e.point.name, 'left', '投资计划分析', e.point.name, '', '') }, mouseOver: function (e) { //鼠标移入停止轮播并且找到移入的当前数据设为选中 chartData.forEach((item, index) => { // item.sliced = false // item.selected = false }) // chartData[e.target.index].sliced = true // chartData[e.target.index].selected = true that.left1Chart.update({ series: [{ type: 'pie', name: '占比', point: { events: { click: function (e) { that.projectNum = 2142 that.showChartLTipDouble(e.point.name, 'left', '投资计划分析', e.point.name, '', '') } } }, data: chartData }] }) timer && clearInterval(timer); }, mouseOut: function () { // 鼠标移出后需要继续执行轮播 var points = that.left1Chart.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 } }) that.left1Chart.update({ series: [{ type: 'pie', name: '占比', point: { events: { click: function (e) { that.projectNum = 2142 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 }) that.left1Chart.update({ series: [{ type: 'pie', name: '占比', point: { events: { click: function (e) { that.projectNum = 2142 that.showChartLTipDouble(e.point.name, 'left', '投资计划分析', e.point.name, '', '') } } }, data: chartData }] }) } }, 2000); } } }, data: chartData }] } that.left1Chart = Highcharts.chart('echartL2', option); function autoTooltip (point) { that.left1Chart.tooltip.refresh(point); } }, initChartL3 () { var chartData = left6 var timer = null; var i = 0; let that = this that.left2Chart = Highcharts.chart('echartL3', { colors: ['#064F78', '#BDB35D', '#623726', '#955773', '#B57C63', '#73A88E', '#09736D', '#13400B', '#0D3265'], 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 } }) that.left2Chart.update({ series: [{ type: 'pie', name: '占比', point: { events: { click: function (e) { that.projectNum = 2143 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 }) that.left2Chart.update({ series: [{ type: 'pie', name: '占比', point: { events: { click: function (e) { that.projectNum = 2143 that.showChartLTipDouble(e.point.name, 'left', '投资计划分析', e.point.name, '', '') } } }, data: chartData }] }) } }, 2000); }, legendItemClick: function (event) { that.projectNum = 2143 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.projectNum = 2143 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 that.left2Chart.update({ series: [{ type: 'pie', name: '占比', point: { events: { click: function (e) { that.projectNum = 2143 that.showChartLTipDouble(e.point.name, 'left', '投资计划分析', e.point.name, '', '') } } }, data: chartData }] }) timer && clearInterval(timer); }, mouseOut: function () { // 鼠标移出后需要继续执行轮播 var points = that.left2Chart.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 } }) that.left2Chart.update({ series: [{ type: 'pie', name: '占比', point: { events: { click: function (e) { that.projectNum = 2143 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 }) that.left2Chart.update({ series: [{ type: 'pie', name: '占比', point: { events: { click: function (e) { console.log(e) } } }, data: chartData }] }) } }, 2000); } } }, data: chartData }] }); function autoTooltip (point) { that.left2Chart.tooltip.refresh(point); } }, initChartL4 (dataList) { this.left10Chart = 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 + data[0].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: "已用额度", 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: '#3986F8', }, ]), }, }, { name: "总额度", type: "bar", data: left3[1], 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", // 小图标的宽高 }, }; let that = this tools.loopShowTooltip(that.left10Chart, option, { nterval: 2000, loopSeries: true, }) that.left10Chart.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() }); }) that.left10Chart.setOption(option); }, initChartL5 () { var chartData = left7 var timer = null; var i = 0; let that = this var option = { colors: ['#064F78', '#BDB35D', '#623726', '#955773', '#B57C63', '#73A88E', '#09736D', '#13400B', '#0D3265'], 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 } }) that.left3Chart.update({ series: [{ type: 'pie', name: '占比', point: { events: { click: function (e) { that.showChartLTipDouble(e.point.name, 'left', '产业布局分析', '传统产业分析', e.point.name, '', '', '', '', '', '', 215) // that.showChartLTipDouble(e.point.name, 'left', '产业布局分析', '优势特色产业', '体育产业', '') } } }, 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, '', '', '', '', '', '', 215) // that.showChartLTipDouble(e.point.name, 'left', '产业布局分析', '优势特色产业', '体育产业', '') }, 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 that.left3Chart.update({ series: [{ type: 'pie', name: '占比', point: { events: { click: function (e) { that.showChartLTipDouble(e.point.name, 'left', '产业布局分析', '传统产业分析', e.point.name, '', '', '', '', '', '', 215) // that.showChartLTipDouble(e.point.name, 'left', '产业布局分析', '优势特色产业', '体育产业', '') } } }, data: chartData }] }) timer && clearInterval(timer); }, mouseOut: function () { // 鼠标移出后需要继续执行轮播 var points = that.left3Chart.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 } }) that.left3Chart.update({ series: [{ type: 'pie', name: '占比', point: { events: { click: function (e) { that.showChartLTipDouble(e.point.name, 'left', '产业布局分析', '传统产业分析', e.point.name, '', '', '', '', '', '', 215) // that.showChartLTipDouble(e.point.name, 'left', '产业布局分析', '优势特色产业', '体育产业', '') } } }, data: chartData }] }) i++; if (i === len) { i = 0; } }, 2000); } } }, data: chartData }] } that.left3Chart = Highcharts.chart('echartL5', option); function autoTooltip (point) { that.left3Chart.tooltip.refresh(point); } }, initChartL6 () { var chartData = left8 var timer = null; var i = 0; let that = this var option = { colors: ['#064F78', '#BDB35D', '#623726', '#955773', '#B57C63', '#73A88E', '#09736D', '#13400B', '#0D3265'], 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 } }) that.left4Chart.update({ series: [{ type: 'pie', name: '占比', point: { events: { click: function (e) { that.showChartLTipDouble(e.point.name, 'left', '产业布局分析', '战略性新兴产业', e.point.name, '', '', '', '', '', '', 215) } } }, 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, '', '', '', '', '', '', 215) }, 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 that.left4Chart.update({ series: [{ type: 'pie', name: '占比', point: { events: { click: function (e) { that.showChartLTipDouble(e.point.name, 'left', '产业布局分析', '战略性新兴产业', e.point.name, '', '', '', '', '', '', 215) } } }, data: chartData }] }) timer && clearInterval(timer); }, mouseOut: function () { // 鼠标移出后需要继续执行轮播 var points = that.left4Chart.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 } }) that.left4Chart.update({ series: [{ type: 'pie', name: '占比', point: { events: { click: function (e) { that.showChartLTipDouble(e.point.name, 'left', '产业布局分析', '战略性新兴产业', e.point.name, '', '', '', '', '', '', 215) } } }, data: chartData }] }) i++; if (i === len) { i = 0; } }, 2000); } } }, data: chartData }] } that.left4Chart = Highcharts.chart('echartL6', option); function autoTooltip (point) { that.left4Chart.tooltip.refresh(point); } }, initChartL7 () { var chartData = left9 var timer = null; var i = 0; let that = this var option = { colors: ['#064F78', '#BDB35D', '#623726', '#955773', '#B57C63', '#73A88E', '#09736D', '#13400B', '#0D3265'], 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 } }) that.left5Chart.update({ series: [{ type: 'pie', name: '占比', point: { events: { click: function (e) { that.showChartLTipDouble(e.point.name, 'left', '产业布局分析', '特色优势产业', e.point.name, '', '', '', '', '', '', 215) } } }, 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, '', '', '', '', '', '', 215) }, 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 that.left5Chart.update({ series: [{ type: 'pie', name: '占比', point: { events: { click: function (e) { that.showChartLTipDouble(e.point.name, 'left', '产业布局分析', '特色优势产业', e.point.name, '', '', '', '', '', '', 215) } } }, data: chartData }] }) timer && clearInterval(timer); }, mouseOut: function () { // 鼠标移出后需要继续执行轮播 var points = that.left5Chart.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 } }) that.left5Chart.update({ series: [{ type: 'pie', name: '占比', point: { events: { click: function (e) { that.showChartLTipDouble(e.point.name, 'left', '产业布局分析', '特色优势产业', e.point.name, '', '', '', '', '', '', 215) } } }, data: chartData }] }) i++; if (i === len) { i = 0; } }, 2000); } } }, data: chartData }] } that.left5Chart = Highcharts.chart('echartL7', option); function autoTooltip (point) { that.left5Chart.tooltip.refresh(point); } }, initChartL8 () { var chartData = left10 var timer = null; var i = 0; let that = this var option = { colors: ['#064F78', '#BDB35D', '#623726', '#955773', '#B57C63', '#73A88E', '#09736D', '#13400B', '#0D3265'], 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 } }) that.left6Chart.update({ series: [{ type: 'pie', name: '占比', point: { events: { click: function (e) { that.showChartLTipDouble(e.point.name, 'left', '产业布局分析', '公共基础等产业', e.point.name, '', '', '', '', '', '', 215) } } }, 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, '', '', '', '', '', '', 215) }, 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 that.left6Chart.update({ series: [{ type: 'pie', name: '占比', point: { events: { click: function (e) { that.showChartLTipDouble(e.point.name, 'left', '产业布局分析', '公共基础等产业', e.point.name, '', '', '', '', '', '', 215) } } }, data: chartData }] }) timer && clearInterval(timer); }, mouseOut: function () { // 鼠标移出后需要继续执行轮播 var points = that.left6Chart.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 } }) that.left6Chart.update({ series: [{ type: 'pie', name: '占比', point: { events: { click: function (e) { that.showChartLTipDouble(e.point.name, 'left', '产业布局分析', '公共基础等产业', e.point.name, '', '', '', '', '', '', 215) } } }, data: chartData }] }) i++; if (i === len) { i = 0; } }, 2000); } } }, data: chartData }] } that.left6Chart = Highcharts.chart('echartL8', option); function autoTooltip (point) { that.left6Chart.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 () { this.left7Chart = 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 that.left7Chart.on('click', function (param) { that.showChartLTipDouble(param.name, 'left', '项目阶段分析', '固定资产', param.name, param.seriesName, '', '', '', '', '', 216) }) that.left7Chart.setOption(option) tools.loopShowTooltip(that.left7Chart, option, { nterval: 2000, loopSeries: true, }) }, initChartL11 () { this.left8Chart = 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 that.left8Chart.on('click', function (param) { that.showChartLTipDouble(param.name, 'left', '项目阶段分析', '股权类进度分布', param.name, param.seriesName, '', '', '', '', '', 216) }) that.left8Chart.setOption(option) tools.loopShowTooltip(that.left8Chart, option, { nterval: 2000, loopSeries: true, }) }, // 大屏二 initChartC1 () { if (this.centerType) { //3D饼图 var chartData = center2 var timer = null; var i = 0; let that = this var option = { colors: ['#064F78', '#BDB35D', '#623726', '#955773', '#B57C63', '#73A88E', '#09736D', '#13400B', '#0D3265'], 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 } }) that.center1Chart.update({ series: [{ type: 'pie', name: '占比', point: { events: { click: function (e) { that.showChartLTipDouble(e.point.name, 'center', '', '', '', '', 'distribution', e.point.options.typeno, 'industry', e.point.options.typeno, 1) } } }, 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.options.typeno, 'industry', e.point.options.typeno, 1) }, 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 that.center1Chart.update({ series: [{ type: 'pie', name: '占比', point: { events: { click: function (e) { that.showChartLTipDouble(e.point.name, 'center', '', '', '', '', 'distribution', e.point.options.typeno, 'industry', e.point.options.typeno, 1) } } }, data: chartData }] }) timer && clearInterval(timer); }, mouseOut: function () { // 鼠标移出后需要继续执行轮播 var points = that.center1Chart.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 } }) that.center1Chart.update({ series: [{ type: 'pie', name: '占比', point: { events: { click: function (e) { that.showChartLTipDouble(e.point.name, 'center', '', '', '', '', 'distribution', e.point.options.typeno, 'industry', e.point.options.typeno, 1) } } }, data: chartData }] }) i++; if (i === len) { i = 0; } }, 2000); } } }, data: chartData }] } that.center1Chart = Highcharts.chart('echartC1', option); function autoTooltip (point) { that.center1Chart.tooltip.refresh(point); } } else { let myChart = echarts.init(this.$refs['echartC1']) data = center2 arrName = getArrayValue(data, "name"); arrValue = getArrayValue(data, "value"); sumValue = eval(arrValue.join("+")); objData = array2obj(data, "name"); optionData = getData(data); function getArrayValue (array, key) { var key = key || "value"; var res = []; if (array) { array.forEach(function (t) { res.push(t[key]); }); } return res; } function array2obj (array, key) { var resObj = {}; for (var i = 0; i < array.length; i++) { resObj[array[i][key]] = array[i]; } return resObj; } function getData (data) { var res = { series: [], yAxis: [], }; for (let i = 0; i < data.length; i++) { // console.log([70 - i * 15 + '%', 67 - i * 15 + '%']); res.series.push({ name: "", type: "pie", clockWise: false, //顺时加载 hoverAnimation: false, //鼠标移入变大 radius: [73 - i * 25 + "%", 63 - i * 25 + "%"], center: ["35%", "50%"], label: { show: false, }, itemStyle: { label: { show: false, }, labelLine: { show: false, }, borderWidth: 5, }, data: [ { value: data[i].value, name: data[i].name, }, { value: sumValue - data[i].value, name: "", itemStyle: { color: "rgba(0,0,0,0)", borderWidth: 0, }, tooltip: { show: false, }, hoverAnimation: false, }, ], }); res.series.push({ name: "", type: "pie", silent: true, z: 1, clockWise: false, //顺时加载 hoverAnimation: false, //鼠标移入变大 radius: [73 - i * 25 + "%", 63 - i * 25 + "%"], center: ["35%", "50%"], label: { show: false, }, itemStyle: { label: { show: false, }, labelLine: { show: false, }, borderWidth: 5, }, data: [ { value: 7.5, itemStyle: { color: "#4d638050", borderWidth: 0, }, tooltip: { show: false, }, hoverAnimation: false, }, { value: 2.5, name: "", itemStyle: { color: "rgba(0,0,0,0)", borderWidth: 0, }, tooltip: { show: false, }, hoverAnimation: false, }, ], }); res.yAxis.push(((data[i].value / sumValue) * 100).toFixed(2) + "%"); } return res; } let option = { // graphic: { // elements: [{ // type: 'image',//需要填充图片,配置image,如果不需要图片可以配置其他的, text, circle, sector, ring, polygon, polyline, rect, line, bezierCurve, arc, group, // style: { // image: './images/loop.png', //这里添加图片地址 // width: 320, // height: 320 // }, // left: '30',// // top: 'middle' //配置图片居中 // }] // }, legend: { show: true, trigger: 'item', icon: "circle", top: "center", left: "70%", data: arrName, width: 50, padding: [0, 5], itemGap: 25, formatter: function (data) { let a = center2.find(item => item.name == data) console.log(a) // return `${data}
${a.value}亿
${a.num}个` return `${data}
` }, textStyle: { fontSize: 20, color: '#fff', fontFamily: 'Microsoft YaHei' // rich: { // title: { // fontSize: 14, // lineHeight: 15, // color: "rgb(0, 178, 246)", // }, // value: { // fontSize: 18, // lineHeight: 20, // color: "#fff", // }, // }, }, }, // tooltip: { // show: false, // normal: { // show: false, // trigger: "item", // label: { // margin: 10, // label 距离轴的距离 // color: '#FFF', // 文字的颜色 // fontStyle: 'normal', // 文字字体的风格('normal',无样式;'italic',斜体;'oblique',倾斜字体) // fontWeight: 'normal', // 文字字体的粗细('normal',无样式;'bold',加粗;'bolder',加粗的基础上再加粗;'lighter',变细;数字定义粗细也可以,取值范围100至700) // fontSize: '20', // 文字字体大小 // lineHeight: '50', // 行高 // }, // }, // // formatter: "{a}
{b}:{c}({d}%)666", // textStyle: { // color: '#FFF', // 文字的颜色 // fontStyle: 'normal', // 文字字体的风格('normal',无样式;'italic',斜体;'oblique',倾斜字体) // fontWeight: 'normal', // 文字字体的粗细('normal',无样式;'bold',加粗;'bolder',加粗的基础上再加粗;'lighter',变细;数字定义粗细也可以,取值范围100至700) // }, // formatter: data => { // console.log(data) // // 小圆点 // return `
${data.name}:${data.percent}` // }, // }, color: ['#064F78', '#BDB35D', '#623726', '#955773', '#B57C63', '#73A88E', '#09736D', '#13400B', '#0D3265'], grid: { top: "10%", bottom: "52%", left: "36%", containLabel: false, }, yAxis: [ { type: "category", inverse: true, axisLine: { show: false, }, axisTick: { show: false, }, axisLabel: { interval: 0, inside: true, textStyle: { color: "#fff", fontSize: 20, fontFamily: 'Microsoft YaHei' }, show: true, formatter: data => { return '---- ' + data }, }, data: optionData.yAxis, }, ], xAxis: [ { show: false, }, ], series: optionData.series, } myChart.setOption(option) // tools.loopShowTooltip(myChart, option, { // interval: 500, // loopSeries: true, // }); } }, initChartC2 () { let that = this that.center2Chart = echarts.init(this.$refs['echartC2']) that.center2Chart.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 that.center2Chart.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 that.center2Chart.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: commonCompany, // 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), }, ], } that.center2Chart.on('click', function (param) { that.projectListTipShow = true that.centerPenetrateTwo('', '', that.findCode(param.name), param.seriesName == '计划投资' ? 2 : 1) }) that.center2Chart.setOption(option) tools.loopShowTooltip(that.center2Chart, 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 }, yuanChange (value) { return Number((value / 100000000).toFixed(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 } }, 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]}亿

` callback(ticket, tipHtml) return tipHtml } if (params.componentSubType == 'map') { let tipHtml = `

项目数量:${data[params.dataIndex].value2}个

总投资额:${params.data.value}亿

` callback(ticket, tipHtml) return tipHtml } }, }, visualMap: { show: false, min: 0, max: 300, right: 0, bottom: 0, text: ['高', '低'], textStyle: { color: '#f1f1f1' }, realtime: false, calculable: false, inRange: { color: ['lightskyblue', '#2754b7'] } }, geo: { show: true, map: 'shanxi', layoutCenter: ['50%', '50%'], //地图位置 layoutSize: '140%', label: { normal: { position: [100, 100], fontSize: 25, fontFamily: 'Microsoft YaHei', fontWeight: 600, color: '#fff', show: true, }, emphasis: { show: true, color: '#e7e1a0', fontSize: 30, }, }, roam: false, itemStyle: { normal: { areaColor: '#1946a8', shadowColor: '#1946a8', borderWidth: 2, //设置外层边框 borderColor: '#1946a8', shadowOffsetX: 0, shadowOffsetY: 0, shadowBlur: 0, }, emphasis: { areaColor: '#013d95', borderColor: '#e7e1a0', borderWidth: 4, //设置外层边框 }, }, }, series: [ { type: 'map', map: 'shanxi', geoIndex: 0, aspectScale: 1.5, //长宽比 data: data, }, ], } let that = this this.mapChart.on('click', function (params) { if (params.name == '太原市') { that.showChartLTipDouble(params.name, 'center', '', '', '', '', 'investmentMap', '太原市', '山西省') } }) tools.loopShowTooltip(this.mapChart, option, { interval: 2000, loopSeries: false, }); this.mapChart.setOption(option) }, initChinaChart () { var data = centerChina this.geoCoordMap = [] /*获取地图数据*/ this.mapChart = echarts.init(this.$refs['chinaMap']) echarts.registerMap('china', china) var mapFeatures = echarts.getMap('china').geoJson.features mapFeatures.forEach(v => { // 地区名称 var name = v.properties.name // 地区经纬度 this.geoCoordMap[name] = v.properties.cp data.push({ name: v.properties.name, value: v.properties.cp[0], value2: v.properties.cp[1] }) }) let option = { tooltip: { padding: 15, enterable: true, transitionDuration: 1, formatter: (params, ticket, callback) => { // 清空所有轮播 this.mapChart.dispatchAction({ // type: 'geoUnSelect', type: 'downplay', name: '南海诸岛', }) 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]}亿

` callback(ticket, tipHtml) return tipHtml } if (params.componentSubType == 'map') { let tipHtml = `

项目数量:${data[params.dataIndex].value2}个

总投资额:${params.data.value}亿

` callback(ticket, tipHtml) return tipHtml } }, }, visualMap: { show: false, min: 0, max: 1000, left: '100', bottom: 100, text: ['高', '低'], textStyle: { color: '#f1f1f1' }, realtime: true, //拖拽时,是否实时更新 calculable: false, inRange: { color: ['lightskyblue', '#2754b7'] }, itemWidth: 50, //图形的宽度,即长条的宽度。 itemHeight: 400, //图形的高度,即长条的高度。 textStyle: { fontSize: 30, color: '#fff' } }, geo: { show: true, map: 'china', layoutCenter: ['50%', '50%'], //地图位置 layoutSize: '110%', label: { normal: { position: [100, 100], fontSize: 25, fontFamily: 'Microsoft YaHei', fontWeight: 600, color: '#fff', show: true, }, emphasis: { show: true, color: '#e7e1a0', fontSize: 30, }, }, // 滑轮缩放 roam: false, itemStyle: { normal: { areaColor: '#1946a8', shadowColor: '#1946a8', borderWidth: 2, //设置外层边框 borderColor: '#0b245b', shadowOffsetX: 0, shadowOffsetY: 0, shadowBlur: 0, }, emphasis: { areaColor: '#013d95', borderColor: '#e7e1a0', borderWidth: 4, //设置外层边框 }, }, }, series: [ { type: 'map', map: 'china', geoIndex: 0, data: data, }, ], } let that = this this.mapChart.on('click', function (params) { if (params.name == '山西') { // that.showChartLTipDouble(params.name, 'center', '', '', '', '', '', 'investmentMap', '山西省') that.mapChart.dispose() that.centerShow = true setTimeout(() => { that.initChartC1() that.initChartC2() that.initChartC3() that.initChartC4() if (that.versions) { that.centerPenetrateOne('investmentMap', params.name, 3, '', '') } else { that.initProvinceChart() } that.initProjectList() }) } }) tools.loopShowTooltip(this.mapChart, option, { interval: 2000, loopSeries: false, }); this.mapChart.setOption(option) }, initChartC3 () { this.center3Chart = echarts.init(this.$refs['echartC3']) let option = { tooltip: { trigger: 'axis', formatter: '{a0}:{c0}' + '亿', //+ '
'+ '{a1}:{c1}' + '%', axisPointer: { // type: 'cross',', }, textStyle: { color: '#FFF', // 文字的颜色 fontSize: '20', // 文字字体大小 fontFamily: 'Microsoft YaHei' }, }, grid: { top: '8%', right: '3%', left: '7%', bottom: '10%', }, // legend: { // top: '1', // textStyle: { // color: 'rgba(250,250,250,0.6)', // }, // }, xAxis: { data: center6.map(item => item.name), axisLine: { show: true, //隐藏X轴轴线 lineStyle: { color: '#005094', width: 1, }, }, axisTick: { show: false, //隐藏X轴刻度 }, axisLabel: { show: true, rotate: 20, 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' }, }, { type: 'value', axisLine: { show: false, }, splitLine: { show: false, }, axisLabel: { show: true, formatter: '{value} %', textStyle: { color: 'rgba(250,250,250,0.6)', fontFamily: 'Microsoft YaHei' }, }, }, ], series: [ { type: 'bar', name: '投资金额', barWidth: 15, itemStyle: { normal: { color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ { offset: 0, color: '#69c0ff', }, { offset: 1, color: '#082550', }, ]), }, }, data: center6.map(item => item.value), }, ], } let that = this that.center3Chart.on('click', function (param) { if (param.name == '煤炭和煤电') { that.showChartLTipSingle(param.name, 'center', 'keyIndicators', 'ceiamount', '', '', '', '', 'five', '1', 2) } else if (param.name == '煤电和新能源') { that.showChartLTipSingle(param.name, 'center', 'keyIndicators', 'cpneiamount', '', '', '', '', 'five', '2', 2) } else if (param.name == '煤炭和化工') { that.showChartLTipSingle(param.name, 'center', 'keyIndicators', 'ccheiamount', '', '', '', '', 'five', '3', 2) } else if (param.name == '煤炭和数字') { that.showChartLTipSingle(param.name, 'center', 'keyIndicators', 'cdiamount', '', '', '', '', 'five', '4', 2) } else if (param.name == '煤炭和降炭') { that.showChartLTipSingle(param.name, 'center', 'keyIndicators', 'cciamount', '', '', '', '', 'five', '5', 2) } }) that.center3Chart.setOption(option) tools.loopShowTooltip(that.center3Chart, option, { nterval: 2000, loopSeries: true, }) }, initChartC4 () { if (this.centerType) { // 3D饼图 var chartData = [] var timer = null; var timer2 = null; var i = 0; center7.forEach((item, index) => { let obj = { name: item.name, y: item.value2, num: item.value, typeno: item.typeno, sliced: false, selected: false, color: index == 0 ? '#064F78' : '#BDB35D' } chartData.push(obj) }) let that = this that.center4Chart = Highcharts.chart('echartC4', { 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 } }) that.center4Chart.update({ series: [{ type: 'pie', name: '占比', point: { events: { click: function (e) { that.showChartLTipDouble(e.point.name, 'center', '', '', '', '', 'keyIndicators', e.point.options.typeno, 'state', e.point.name == '新建' ? 'new' : 'renew', 1) } } }, data: chartData }] }) i++; if (i === len) { i = 0; chartData.forEach((item, index) => { item.sliced = false item.selected = false }) that.center4Chart.update({ series: [{ type: 'pie', name: '占比', point: { events: { click: function (e) { that.showChartLTipDouble(e.point.name, 'center', '', '', '', '', 'keyIndicators', e.point.options.typeno, 'state', e.point.name == '新建' ? 'new' : 'renew', 1) } } }, data: chartData }] }) } }, 2000); }, legendItemClick: function (event) { console.log(event); return true; } } }, credits: { enabled: false //去掉hightchats水印 }, title: { text: null }, 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 = Math.round(this.percentage) return `${this.key}:${this.percentage}%
投资完成额:${this.y}亿
投资数量:${num}个` }, //pointFormat: }, legend: { layout: 'vertical', align: 'right', y: -10, verticalAlign: 'bottom', itemStyle: { fontSize: '20px', color: '#fff', fontWeight: 0, fontFamily: 'Microsoft YaHei' } }, 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}' } }, }, series: [{ type: 'pie', name: '占比', center: ['60%', '50%'], y: -10, point: { events: { click: function (e) { //点击事件 that.showChartLTipDouble(e.point.name, 'center', '', '', '', '', 'keyIndicators', e.point.options.typeno, 'state', e.point.name == '新建' ? 'new' : 'renew', 1) }, 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 that.center4Chart.update({ series: [{ type: 'pie', name: '占比', point: { events: { click: function (e) { that.showChartLTipDouble(e.point.name, 'center', '', '', '', '', 'keyIndicators', e.point.options.typeno, 'state', e.point.name == '新建' ? 'new' : 'renew', 1) } } }, data: chartData }] }) timer && clearInterval(timer); }, mouseOut: function () { // 鼠标移出后需要继续执行轮播 var points = that.center4Chart.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 } }) that.center4Chart.update({ series: [{ type: 'pie', name: '占比', point: { events: { click: function (e) { that.showChartLTipDouble(e.point.name, 'center', '', '', '', '', 'keyIndicators', e.point.options.typeno, 'state', e.point.name == '新建' ? 'new' : 'renew', 1) } } }, data: chartData }] }) i++; if (i === len) { i = 0; chartData.forEach((item, index) => { item.sliced = false item.selected = false }) that.center4Chart.update({ series: [{ type: 'pie', name: '占比', point: { events: { click: function (e) { that.showChartLTipDouble(e.point.name, 'center', '', '', '', '', 'keyIndicators', e.point.options.typeno, 'state', e.point.name == '新建' ? 'new' : 'renew', 1) } } }, data: chartData }] }) } }, 2000); } } }, data: chartData }] }); function autoTooltip (point) { that.center4Chart.tooltip.refresh(point); } } else { // 环形图 let myChart = echarts.init(this.$refs['echartC4']) data = center7 arrName = getArrayValue(data, "name"); arrValue = getArrayValue(data, "value"); sumValue = eval(arrValue.join("+")); objData = array2obj(data, "name"); optionData = getData(data); function getArrayValue (array, key) { var key = key || "value"; var res = []; if (array) { array.forEach(function (t) { res.push(t[key]); }); } return res; } function array2obj (array, key) { var resObj = {}; for (var i = 0; i < array.length; i++) { resObj[array[i][key]] = array[i]; } return resObj; } function getData (data) { var res = { series: [], yAxis: [], }; for (let i = 0; i < data.length; i++) { res.series.push({ name: "", type: "pie", clockWise: false, //顺时加载 hoverAnimation: false, //鼠标移入变大 radius: [73 - i * 40 + "%", 58 - i * 40 + "%"], center: ["50%", "50%"], label: { show: false, }, itemStyle: { label: { show: false, }, labelLine: { show: false, }, borderWidth: 5, }, data: [ { value: data[i].value, name: data[i].name, }, { value: sumValue - data[i].value, name: "", itemStyle: { color: "rgba(0,0,0,0)", borderWidth: 0, }, tooltip: { show: false, }, hoverAnimation: false, }, ], }); res.series.push({ name: "", type: "pie", silent: true, z: 1, clockWise: false, //顺时加载 hoverAnimation: false, //鼠标移入变大 radius: [73 - i * 40 + "%", 58 - i * 40 + "%"], center: ["50%", "50%"], label: { show: false, }, itemStyle: { label: { show: false, }, labelLine: { show: false, }, borderWidth: 10, }, data: [ { value: 7.5, itemStyle: { color: "rgba(9,40,83,0.7)", borderWidth: 0, }, tooltip: { show: false, }, hoverAnimation: false, }, { value: 2.5, name: "", itemStyle: { color: "rgba(0,0,0,0)", borderWidth: 0, }, tooltip: { show: false, }, hoverAnimation: false, }, ], }); res.yAxis.push(((data[i].value / sumValue) * 100).toFixed(2) + "%"); } return res; } let option = { // graphic: { // elements: [{ // type: 'image',//需要填充图片,配置image,如果不需要图片可以配置其他的, text, circle, sector, ring, polygon, polyline, rect, line, bezierCurve, arc, group, // style: { // // image: './images/loop.png', //这里添加图片地址 // width: 320, // height: 320 // }, // left: '30',// // top: 'middle' //配置图片居中 // }] // }, // tooltip: { // show: true, // trigger: "item", // normal: { // show: false, // label: { // color: '#FFF', // 文字的颜色 // fontStyle: 'normal', // 文字字体的风格('normal',无样式;'italic',斜体;'oblique',倾斜字体) // fontWeight: 'normal', // 文字字体的粗细('normal',无样式;'bold',加粗;'bolder',加粗的基础上再加粗;'lighter',变细;数字定义粗细也可以,取值范围100至700) // fontSize: '20', // 文字字体大小 // }, // }, // formatter: function (data) { // console.log(data, '?????') // // return `${data.data.name}:${data.percent}%
${data.data.y}亿,${data.data.num}个` // }, // // formatter: "{a}
{b}:{c}({d}%)666", // textStyle: { // fontSize: '20', // 文字字体大小 // color: '#FFF', // 文字的颜色 // fontStyle: 'normal', // 文字字体的风格('normal',无样式;'italic',斜体;'oblique',倾斜字体) // fontWeight: 'normal', // 文字字体的粗细('normal',无样式;'bold',加粗;'bolder',加粗的基础上再加粗;'lighter',变细;数字定义粗细也可以,取值范围100至700) // }, // }, tooltip: { trigger: 'item', textStyle: { color: '#fff', //X轴文字颜色 fontSize: 20, fontFamily: 'Microsoft YaHei' }, // 设置提示的位置 position: (p) => { // return ['15%', '25%'] return [p[0] - 70, p[1] - 70] // console.log(params,'???????位置信息是什么鬼') // if (params.name == '新建') { // return ['15%', '25%'] // } }, formatter: data => { let a = '' a = center7.find(item => item.name == data.name) return `${data.name}:${data.percent}%
${data.value}亿,${a.value2}个` }, }, legend: { show: true, icon: "circle", top: "bottom", right: "5%", data: arrName, orient: 'vertical', // width: 50, // padding: [0, 5], itemGap: 5, textStyle: { color: '#fff', fontSize: 20, fontFamily: 'Microsoft YaHei' }, }, color: ['#064F78', '#BDB35D', '#623726', '#955773', '#B57C63', '#73A88E', '#09736D', '#13400B', '#0D3265'], grid: { top: "8%", bottom: "52%", left: "50%", containLabel: true, }, yAxis: [ { type: "category", inverse: true, axisLine: { show: false, }, axisTick: { show: false, }, axisLabel: { interval: 0, inside: true, textStyle: { color: "#fff", fontSize: 20, fontFamily: 'Microsoft YaHei' }, show: true, }, data: optionData.yAxis, }, ], xAxis: [ { show: false, }, ], series: optionData.series, } myChart.setOption(option) tools.loopShowTooltip(myChart, option, { interval: 500, loopSeries: true, }); } }, initProjectList () { let dataList = [] center8.map(item => { if (this.versions) { dataList.push([item.office, item.name, this.yuanChange(item.value) + '亿', item.typeno]) } else { dataList.push([item.office, item.name, item.value + '亿']) } }) this.storageRecordConfig2.data = dataList this.storageRecordConfig2 = { ...this.storageRecordConfig2 } }, // 大屏三 initChartR1 () { let that = this that.right1Chart = echarts.init(this.$refs['echartR1']) that.right1Chart.on('showTip', (params) => { // 如果是7或者15并且满足防抖则切换 if ((params.dataIndex == 5 || params.dataIndex == 11) && that.echartR1Fd) { that.echartR1Fd = false setTimeout(() => { option.dataZoom[0].endValue = option.dataZoom[0].endValue + 6 option.dataZoom[0].startValue = option.dataZoom[0].startValue + 6 that.right1Chart.setOption(option); // 防止勿刷新做的防抖 setTimeout(() => { that.echartR1Fd = true }, 2000) }, 1900); // 如果是17表示到了最后一个,那么重新来一遍 } else if (params.dataIndex == 17 && that.echartR1Fd) { that.echartR1Fd = false setTimeout(() => { option.dataZoom[0].endValue = 0 option.dataZoom[0].startValue = 5 that.right1Chart.setOption(option); // 防止勿刷新做的防抖 setTimeout(() => { that.echartR1Fd = true }, 2000) }, 1900) } }) let option = { tooltip: { formatter: data => { return `${data[0].name}
${data[0].seriesName}:${data[0].value}亿
${data[1].seriesName}:${data[1].value}亿
${data[2].seriesName}:${data[2].value}亿
${data[3].seriesName}:${data[3].value}亿
${data[4].seriesName}:${data[4].value}亿` }, textStyle: { color: '#FFF', // 文字的颜色 fontSize: '20', // 文字字体大小 fontFamily: 'Microsoft YaHei' }, trigger: 'axis', axisPointer: { // type: 'cross',', }, }, 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: '5%', bottom: '5%', }, legend: { data: ["预算额", "已签合同额", '产值认定额', '结算额', '付款额'], x: 'center', y: '0px', textStyle: { color: '#fff', fontSize: "20", fontFamily: 'Microsoft YaHei' }, }, xAxis: { data: commonCompany, // data: right4.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: '亿', nameTextStyle: { color: 'rgba(255,255,255,0.6)', }, 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: '#064F78', }, { offset: 1, color: '#082550', }, ]), }, }, data: right4.map(item => item.value), }, { name: '已签合同额', type: 'bar', barWidth: 10, itemStyle: { normal: { color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ { offset: 0, color: '#BDB35D', }, { offset: 1, color: '#082550', }, ]), }, }, data: right4.map(item => item.value2), }, { name: '产值认定额', type: 'bar', barWidth: 10, itemStyle: { normal: { color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ { offset: 0, color: '#623726', }, { offset: 1, color: '#082550', }, ]), }, }, data: right4.map(item => item.value3), }, { name: '结算额', type: 'bar', barWidth: 10, itemStyle: { normal: { color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ { offset: 0, color: '#13400B', }, { offset: 1, color: '#082550', }, ]), }, }, data: right4.map(item => item.value4), }, { name: '付款额', type: 'bar', barWidth: 10, itemStyle: { normal: { color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ { offset: 0, color: '#B57C63', }, { offset: 1, color: '#082550', }, ]), }, }, data: right4.map(item => item.value5), }, ], } that.right1Chart.on('click', function (param) { if (that.versions) { that.rightPenetrateTwo(2, '', that.findCode(param.name), 'right') } else { that.projectListTipShow = true } }) that.right1Chart.setOption(option) tools.loopShowTooltip(that.right1Chart, option, { interval: 2000, loopSeries: true, }) }, initChartR2 () { let that = this const itemStyle = { // opacity: 0.8, shadowBlur: 10, shadowOffsetX: 0, shadowOffsetY: 0, shadowColor: 'rgba(0,0,0,0.3)' }; that.right2Chart = echarts.init(this.$refs['echartR2']) that.right2Chart.on('showTip', (params) => { // 如果是7或者15并且满足防抖则切换 if ((params.dataIndex == 5 || params.dataIndex == 11) && that.echartR2Fd) { that.echartR2Fd = false setTimeout(() => { option.dataZoom[0].endValue = option.dataZoom[0].endValue + 6 option.dataZoom[0].startValue = option.dataZoom[0].startValue + 6 that.right2Chart.setOption(option); // 防止勿刷新做的防抖 setTimeout(() => { that.echartR2Fd = true }, 2000) }, 1900); // 如果是17表示到了最后一个,那么重新来一遍 } else if (params.dataIndex == 17 && that.echartR2Fd) { that.echartR2Fd = false setTimeout(() => { option.dataZoom[0].endValue = 0 option.dataZoom[0].startValue = 5 that.right2Chart.setOption(option); // 防止勿刷新做的防抖 setTimeout(() => { that.echartR2Fd = true }, 2000) }, 1900) } }) let option = { color: ['#04635E', '#697143', '#4A3042'], 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, //鼠标滚轮触发滚动 } ], legend: { top: 10, data: ['正偏差', '容差', '负偏差'], textStyle: { fontSize: 20, color: '#fff', fontFamily: 'Microsoft YaHei' } }, textStyle: { color: '#fff', }, tooltip: { show: true, trigger: "axis", textStyle: { color: '#FFF', // 文字的颜色 fontSize: '20', // 文字字体大小 fontFamily: 'Microsoft YaHei' }, formatter: data => { return `${data[0].value[0]}
${data[0].seriesName}:${data[0].data[2]}亿
${data[1].seriesName}:${data[1].data[2]}亿
${data[2].seriesName}:${data[2].data[2]}亿` }, axisPointer: { // // type: 'cross',', }, }, grid: { top: '10%', right: '4%', left: '5%', bottom: '5%', }, yAxis: { name: '', 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: '#fff', fontSize: 20, fontFamily: 'Microsoft YaHei' }, }, xAxis: { data: commonCompany, // data: right5[0].map(item => item[0]), axisLine: { show: true, //隐藏X轴轴线 lineStyle: { color: '#005094', width: 1, }, }, splitLine: { show: true, lineStyle: { color: '#68b4dd66', type: 'dashed', }, }, axisTick: { show: false, //隐藏X轴刻度 }, axisLabel: { show: true, // rotate: 40, padding: [0, 0, 0, 0], textStyle: { color: '#fff', //X轴文字颜色 fontSize: 20, fontFamily: 'Microsoft YaHei' }, }, }, series: [ { name: '正偏差', type: 'scatter', itemStyle: itemStyle, data: right5[0], symbolSize: function (data) { return Math.sqrt(Math.abs(data[2])) * 9; }, }, { name: '容差', type: 'scatter', itemStyle: itemStyle, data: right5[1], symbolSize: function (data) { return Math.sqrt(Math.abs(data[2])) * 9; }, }, { name: '负偏差', type: 'scatter', itemStyle: itemStyle, data: right5[2], symbolSize: function (data) { return Math.sqrt(Math.abs(data[2])) * 9; }, } ] } that.right2Chart.on('click', function (param) { if (that.versions) { that.rightPenetrateTwo(1, param.seriesName == '正偏差' ? 1 : param.seriesName == '容差' ? 2 : 3, that.findCode(param.name), 'right') } else { that.projectListTipShow = true } }) that.right2Chart.setOption(option) tools.loopShowTooltip(that.right2Chart, option, { interval: 2000, loopSeries: true, }) }, initChartR3 () { let that = this that.right3Chart = echarts.init(this.$refs['echartR3']) that.right3Chart.on('showTip', (params) => { this.echartR4Chart ? this.echartR4Chart.dispose() : '' this.echartR5Chart ? this.echartR5Chart.dispose() : '' that.initChartR4(params.dataIndex) that.initChartR5(params.dataIndex) // 如果是7或者15并且满足防抖则切换 if ((params.dataIndex == 5 || params.dataIndex == 11) && that.echartR3Fd) { that.echartR3Fd = false setTimeout(() => { option.dataZoom[0].endValue = option.dataZoom[0].endValue + 6 option.dataZoom[0].startValue = option.dataZoom[0].startValue + 6 that.right3Chart.setOption(option); // 防止勿刷新做的防抖 setTimeout(() => { that.echartR3Fd = true }, 2000) }, 7900); // 如果是17表示到了最后一个,那么重新来一遍 } else if (params.dataIndex == 17 && that.echartR3Fd) { that.echartR3Fd = false setTimeout(() => { option.dataZoom[0].endValue = 0 option.dataZoom[0].startValue = 5 that.right3Chart.setOption(option); // 防止勿刷新做的防抖 setTimeout(() => { that.echartR3Fd = true }, 2000) }, 7900) } }) let option = { tooltip: { formatter: data => { return `${data[0].name}
${data[0].seriesName}:${data[0].value}亿
${data[1].seriesName}:${data[1].value}亿
${data[2].seriesName}:${data[2].value}亿` }, trigger: 'axis', axisPointer: { // type: 'cross',', }, position: (params) => { return [params[0] + 10, 60] }, textStyle: { color: '#FFF', // 文字的颜色 fontSize: '20', // 文字字体大小 fontFamily: 'Microsoft YaHei' }, confine: true }, 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: '25%', right: '3%', left: '10%', bottom: '20%', }, legend: { data: ["低风险", "中风险", '高风险'], x: 'center', y: '15px', textStyle: { // color: 'rgba(250,250,250,0.6)', color: '#fff', fontSize: "20", fontFamily: 'Microsoft YaHei' }, }, xAxis: { data: commonCompany, // data: right4.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: '亿', nameTextStyle: { color: 'rgba(255,255,255,0.6)', }, 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', stack: 'Ad', barWidth: 10, itemStyle: { normal: { color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ { offset: 0, color: '#4A3042', }, { offset: 1, color: '#4A3042', }, ]), }, }, data: right6.map(item => item.value), }, { name: '中风险', type: 'bar', stack: 'Ad', barWidth: 10, itemStyle: { normal: { color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ { offset: 0, color: '#697143', }, { offset: 1, color: '#697143', }, ]), }, }, data: right6.map(item => item.value2), }, { name: '低风险', type: 'bar', stack: 'Ad', barWidth: 10, itemStyle: { normal: { color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ { offset: 0, color: '#04635E', }, { offset: 1, color: '#04635E', }, ]), }, }, data: right6.map(item => item.value3), }, ], } that.right3Chart.on('click', function (param) { if (that.versions) { that.rightPenetrateTwo(that.rightPenetrateTwo.modelName, '', that.findCode(param.name), 'right') } else { that.projectListTipShow = true } }) that.right3Chart.setOption(option) tools.loopShowTooltip(that.right3Chart, option, { interval: 8000, loopSeries: true, }) }, initChartR4 (indexValue) { this.echartR4Chart = echarts.init(this.$refs['echartR4']) option = { title: { text: '' }, radar: { center: ['50%', '50%'], radius: 135, indicator: [ { name: '安全风险', max: 100000 }, { name: '付款风险', max: 100000 }, { name: '合同风险', max: 100000 }, { name: '结算风险', max: 100000 }, { name: '进度风险', max: 100000 }, { name: '质量风险', max: 100000 }, ], axisLine: { // 设置雷达图中间射线的颜色 lineStyle: { color: '#887d33', }, }, splitLine: { //网格颜色设置 show: true, lineStyle: { width: 1, color: ['#871b1a', '#638f41', '#d29e35', '#b6802b'] }, }, name: { //修改indicator文字的颜色 textStyle: { color: "#fff", fontSize: '20', fontFamily: 'Microsoft YaHei' } }, splitNumber: 4, //有几个圈 splitArea: { //设置图表颜色,show的值为true show: true, areaStyle: { // color:"#c1ddf8", //一般设置方式 //设置渐变背景色 new echarts.graphic.LinearGradient(a,b,c,d,arr) //a ,b,c,d值可为0,1 a:1表示arr中的颜色右到左;c:1 arr中的颜色左到右 //b:1表示arr中的颜色下到上;d:1表示arr中的颜色上到下 // color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [ // { offset: 0, color: '#887D33' }, // 0% 处的颜色 // { offset: 0.75, color: '#7D4216' }, // 0% 处的颜色 // { offset: 1, color: '#430705' }// 100% 处的颜色 // ], false) color: ['#638f41', '#887d33', '#7d4216', '#430705'], } } }, series: [ { name: '', type: 'radar', symbol: 'circle', // 单个数值点的样式,还可以取值'rect','angle'等 symbolSize: 0, // 数值点的大小 data: [ { value: right7[indexValue], name: '安全风险', itemStyle: { //该数值区域样式设置 normal: { color: 'rgb(44,198,255,0.8)', //背景颜色,还需设置areaStyle lineStyle: { color: 'rgb(44,198,255,0.8)', //边框颜色 }, }, }, label: { //显示value中具体的数值 normal: { show: false, textStyle: { //更改数值样式 color: '#43EDE3' } }, }, areaStyle: { //设置区域背景颜色透明度 normal: { width: 1, opacity: 0.8, }, }, } ] } ] }; // tools.loopShowTooltip(myChart, option, { // interval: 2000, // loopSeries: true, // }); this.echartR4Chart.setOption(option) }, initChartR5 () { this.echartR5Chart = echarts.init(this.$refs['echartR5']) let option = { tooltip: { formatter: data => { return `${data[0].name}
${data[0].seriesName}:${data[0].value}亿
${data[1].seriesName}:${data[1].value}亿
${data[2].seriesName}:${data[2].value}亿
${data[3].seriesName}:${data[3].value}亿` }, trigger: 'axis', axisPointer: { // type: 'cross',', }, textStyle: { color: '#FFF', // 文字的颜色 fontSize: '20', // 文字字体大小 fontFamily: 'Microsoft YaHei' }, }, grid: { top: '15%', right: '3%', left: '5%', bottom: '35', }, legend: { data: ["预算额", "合同额", "结算额", "支付额"], x: 'center', y: '10px', textStyle: { // color: 'rgba(250,250,250,0.6)', color: '#fff', fontSize: "20", fontFamily: 'Microsoft YaHei' }, }, xAxis: { data: ['设备费', '设计费', '施工费', '材料费'], 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: '亿', nameTextStyle: { color: 'rgba(255,255,255,0.6)', }, 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: '#064F78', }, { offset: 1, color: '#082550', }, ]), }, }, data: right8.map(item => item.value), }, { name: '合同额', type: 'bar', barWidth: 10, itemStyle: { normal: { color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ { offset: 0, color: '#BDB35D', }, { offset: 1, color: '#082550', }, ]), }, }, data: right8.map(item => item.value2), }, { name: '结算额', type: 'bar', barWidth: 10, itemStyle: { normal: { color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ { offset: 0, color: '#623726', }, { offset: 1, color: '#082550', }, ]), }, }, data: right8.map(item => item.value3), }, { name: '支付额', type: 'bar', barWidth: 10, itemStyle: { normal: { color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ { offset: 0, color: '#955773', }, { offset: 1, color: '#082550', }, ]), }, }, data: right8.map(item => item.value4), }, ], } this.echartR5Chart.setOption(option) tools.loopShowTooltip(this.echartR5Chart, option, { interval: 2000, loopSeries: true, }) }, }, })