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

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

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

` 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 = [{ name: '河北', value: 60.35, value2: 28 }, { name: '山西', value: 4060.35, value2: 29 }, { name: '辽宁', value: 260.35, value2: 30 }, { name: '吉林', value: 360.35, value2: 30 }, { name: '黑龙江', value: 460.35, value2: 30 }, { name: '江苏', value: 560.35, value2: 30 }, { name: '浙江', value: 60.35, value2: 28 }, { name: '安徽', value: 160.35, value2: 29 }, { name: '福建', value: 260.35, value2: 30 }, { name: '江西', value: 360.35, value2: 30 }, { name: '山东', value: 460.35, value2: 30 }, { name: '河南', value: 560.35, value2: 30 }, { name: '湖北', value: 60.35, value2: 28 }, { name: '湖南', value: 160.35, value2: 29 }, { name: '广东', value: 260.35, value2: 30 }, { name: '海南', value: 360.35, value2: 30 }, { name: '四川', value: 6.35, value2: 30 }, { name: '贵州', value: 560.35, value2: 30 }, { name: '云南', value: 60.35, value2: 28 }, { name: '陕西', value: 160.35, value2: 29 }, { name: '甘肃', value: 260.35, value2: 30 }, { name: '青海', value: 360.35, value2: 30 }, { name: '台湾', value: 460.35, value2: 30 }, { name: '内蒙古', value: 560.35, value2: 30 }, { name: '广西', value: 60.35, value2: 28 }, { name: '西藏', value: 160.35, value2: 29 }, { name: '宁夏', value: 260.35, value2: 30 }, { name: '新疆', value: 360.35, value2: 30 }, { name: '北京', value: 460.35, value2: 30 }, { name: '天津', value: 560.35, value2: 30 }, { name: '上海', value: 260.35, value2: 30 }, { name: '重庆', value: 360.35, value2: 30 }, { name: '香港', value: 460.35, value2: 30 }, { name: '澳门', value: 560.35, value2: 30 },] 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() that.initProvinceChart() that.initProjectList() }) } }) tools.loopShowTooltip(this.mapChart, option, { interval: 2000, loopSeries: false, }); this.mapChart.setOption(option) }, initChartC3 () { let myChart = 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)', }, }, }, ], 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 myChart.on('click', function (param) { if (param.name == '煤炭和煤电') { that.showChartLTipSingle(param.name, 'center', 'keyIndicators', 'ceiamount') } else if (param.name == '煤电和新能源') { that.showChartLTipSingle(param.name, 'center', 'keyIndicators', 'cpneiamount') } else if (param.name == '煤炭和化工') { that.showChartLTipSingle(param.name, 'center', 'keyIndicators', 'ccheiamount') } else if (param.name == '煤炭和数字') { that.showChartLTipSingle(param.name, 'center', 'keyIndicators', 'cdiamount') } else if (param.name == '煤炭和降碳') { that.showChartLTipSingle(param.name, 'center', 'keyIndicators', 'cciamount') } }) myChart.setOption(option) tools.loopShowTooltip(myChart, option, { nterval: 2000, loopSeries: true, }) }, initChartC4 () { 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, sliced: false, selected: false, color: index == 0 ? '#a79c57' : '#cc8c29' } chartData.push(obj) }) let that = this var chart = 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 } }) chart.update({ series: [{ type: 'pie', name: '占比', point: { events: { click: function (e) { that.showChartLTipDouble(e.point.name, 'center', '', '', '', '', 'keyIndicators', e.point.name) } } }, data: chartData }] }) i++; if (i === len) { i = 0; chartData.forEach((item, index) => { item.sliced = false item.selected = false }) chart.update({ series: [{ type: 'pie', name: '占比', point: { events: { click: function (e) { that.showChartLTipDouble(e.point.name, 'center', '', '', '', '', 'keyIndicators', e.point.name) } } }, 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.name) }, mouseOver: function (e) { //鼠标移入停止轮播并且找到移入的当前数据设为选中 //console.log(e) chartData.forEach((item, index) => { item.sliced = false item.selected = false }) chartData[e.target.index].sliced = true chartData[e.target.index].selected = true chart.update({ series: [{ type: 'pie', name: '占比', point: { events: { click: function (e) { that.showChartLTipDouble(e.point.name, 'center', '', '', '', '', 'keyIndicators', e.point.name) } } }, data: chartData }] }) timer && clearInterval(timer); }, mouseOut: function () { // 鼠标移出后需要继续执行轮播 var points = chart.series[0].points; var len = points.length; timer && clearInterval(timer); timer = setInterval(function () { autoTooltip(points[i]); chartData.forEach((item, index) => { item.sliced = false item.selected = false if (index == i) { item.sliced = true item.selected = true } }) chart.update({ series: [{ type: 'pie', name: '占比', point: { events: { click: function (e) { that.showChartLTipDouble(e.point.name, 'center', '', '', '', '', 'keyIndicators', e.point.name) } } }, data: chartData }] }) i++; if (i === len) { i = 0; chartData.forEach((item, index) => { item.sliced = false item.selected = false }) chart.update({ series: [{ type: 'pie', name: '占比', point: { events: { click: function (e) { that.showChartLTipDouble(e.point.name, 'center', '', '', '', '', 'keyIndicators', e.point.name) } } }, data: chartData }] }) } }, 2000); } } }, data: chartData }] }); function autoTooltip (point) { chart.tooltip.refresh(point); } }, initProjectList () { let dataList = [] center8.map(item => { dataList.push([item.office, item.name, item.value + '亿']) }) this.storageRecordConfig2.data = dataList this.storageRecordConfig2 = { ...this.storageRecordConfig2 } }, // 大屏三 initChartR1 () { let that = this let myChart = echarts.init(this.$refs['echartR1']) myChart.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 myChart.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 myChart.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: 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: '#a79c57', }, { 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: '#cc8c29', }, { 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: '#034a39', }, { 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: '#383062', }, { 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: '#91a65f', }, { offset: 1, color: '#082550', }, ]), }, }, data: right4.map(item => item.value5), }, ], } myChart.on('click', function (param) { that.rightPenetrateTwo(2, '', param.name,'right') }) myChart.setOption(option) tools.loopShowTooltip(myChart, 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)' }; let myChart = echarts.init(this.$refs['echartR2']) myChart.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 myChart.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 myChart.setOption(option); // 防止勿刷新做的防抖 setTimeout(() => { that.echartR2Fd = true }, 2000) }, 1900) } }) let option = { color: ['#1a5137', '#8e6b1f', '#5f2226'], 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[1]}%
${data[1].seriesName}:${data[1].data[1]}%
${data[2].seriesName}:${data[2].data[1]}%` }, 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: 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[1])) * 9; }, }, { name: '容差', type: 'scatter', itemStyle: itemStyle, data: right5[1], symbolSize: function (data) { return Math.sqrt(Math.abs(data[1])) * 9; }, }, { name: '负偏差', type: 'scatter', itemStyle: itemStyle, data: right5[2], symbolSize: function (data) { return Math.sqrt(Math.abs(data[1])) * 9; }, } ] } myChart.on('click', function (param) { that.rightPenetrateTwo(1, param.seriesName == '正偏差' ? 1 : param.seriesName == '容差' ? 2 : 3, param.name,'right') }) myChart.setOption(option) tools.loopShowTooltip(myChart, option, { interval: 2000, loopSeries: true, }) }, initChartR3 () { let that = this let myChart = echarts.init(this.$refs['echartR3']) myChart.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 myChart.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 myChart.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: 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: '#5f2226', }, { offset: 1, color: '#5f2226', }, ]), }, }, 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: '#8e6b1f', }, { offset: 1, color: '#8e6b1f', }, ]), }, }, 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: '#1a5137', }, { offset: 1, color: '#1a5137', }, ]), }, }, data: right6.map(item => item.value3), }, ], } myChart.on('click', function (param) { that.rightPenetrateTwo('', '', param.name,'right') }) myChart.setOption(option) tools.loopShowTooltip(myChart, 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: '#a79c57', }, { 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: '#cc8c29', }, { 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: '#034a39', }, { 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: '#383062', }, { offset: 1, color: '#082550', }, ]), }, }, data: right8.map(item => item.value4), }, ], } this.echartR5Chart.setOption(option) tools.loopShowTooltip(this.echartR5Chart, option, { interval: 2000, loopSeries: true, }) }, }, })