let app = new Vue({ el: "#app", data () { return { count: 0, //重点项目两线指标轮到哪个 list: [], //重点项目两线指标数组 countType: 0,//重点项目两线指标数组 leftEcharts1: "", leftEcharts2: "", leftEcharts3: "", leftEcharts4: "", leftEcharts5: "", leftEcharts6: "", leftEcharts7: "", leftEcharts8: "", leftEcharts9: '', leftEcharts10: '', leftEcharts11: '', shanxiMap: "", // 山西地图 industryProportion: 1, // 主辅业占比轮播 industryLayout: 0, //产业布局分析 time1: "", // 4秒定时器 time2: "", // 针对投前产业布局分析的定时器 storageRecordConfig: { waitTime: '2000', hoverPause: true, header: ['企业集团', '项目名 ', '投资总额'], headerHeight: 80, headerBGC: '#092853', oddRowBGC: '#001c42', evenRowBGC: '#001c42', // oddRowBGC: '#05507b33', rowNum: 6, columnWidth: [150, 450, 150], align: ['center', 'center', 'center'], data: [ ['国际能源', '娄烦县120MW智慧光伏发电项目+10%储能', "6.78亿元"], ['国际能源', '平朔矿区150MW农光储氢一体化项目', "7.84亿元"], ['汾酒集团', '汾酒2030技改原酒产储能扩建项目(一期)', "91.02亿元"], ['大地控股', '山西大地控股忻州新店矿业有限公司投资建设年产800万吨精品砂石骨料项目', "8.67亿元"], ['潞安化工', '分布式光伏发电项目', "2.01亿元"], ['太重集团', '设立太重(大同)新能源产业投资公司', "0.30亿元"], ['大地控股', '山西大地宏翔环保科技有限公司电厂固废资源化综合利用建设项目', "3.60亿元"], ['大地控股', '山西大地海科环保科技有限公司电厂固废资源化综合利用建设项目', "3.11亿元"], ['汾酒集团', '保健酒园区新增原酒产能项目', "4.98亿元"], ['汾酒集团', '白玉酒厂改扩建项目', "4.96亿元"], ['华阳新材', '5GW高效光伏组件制造项目', "4.82亿元"], ['华新燃气', '吉县—延长输气管道项目(一期工程)', "3.54亿元"], ['太重集团', '建设液压挖掘机配套油缸项目', "2.60亿元"], ['华远陆港', '物产集团参股设立项目公司投资建设山西物产万科(太原)综合物流产业园项目', "6.60亿元"], ['太重集团', '设立昔阳县晶能新能源有限公司', "0.50亿元"], ['山西建投', '设立山西低碳环保产业集团有限公司', "30.00亿元"], ['山西建投', '设立山西省太忻经济一体化发展投资集团有限公司', "30.00亿元"], ['华新燃气', '设立山西华新液化天然气集团有限公司', "3.00亿元"], ['交控集团', '设立山西交控新能源发展有限公司', "3.00亿元"] ], }, meansList: [ { label: "初步设计", value: "106", }, { label: "详细设计", value: "103", }, { label: "施工", value: "62", }, { label: "完工", value: "35", }, { label: "验收", value: "42", }, { label: "结算", value: "33", }, ], costList: [ { num: 160, value: 284, status: "正偏差", }, { num: 280, value: 129, status: "容差内", }, { num: 103, value: 1082, status: "负偏差", }, ], investData: { investList: [ { name: "大地控股", yse: "26.79", yqhte: "9.64", czrde: "121.59", jse: "120.13", fke: "36.4", url: "./img/logos/logo15.png", }, { name: "云时代", yse: "21.79", yqhte: "9.64", czrde: "121.59", jse: "120.13", fke: "36.4", url: "./img/logos/logo16.png", }, { name: "华舰体育", yse: "26.79", yqhte: "9.64", czrde: "121.59", jse: "120.13", fke: "36.4", url: "./img/logos/logo17.png", }, { name: "神农科技", yse: "26.79", yqhte: "9.64", czrde: "121.59", jse: "120.13", fke: "36.4", url: "./img/logos/logo18.png", }, { name: "山西焦煤", yse: "26.79", yqhte: "9.64", czrde: "121.59", jse: "120.13", fke: "36.4", url: "./img/logos/logo1.png", }, { name: "晋能控股", yse: "26.79", yqhte: "9.64", czrde: "121.59", jse: "120.13", fke: "36.4", url: "./img/logos/logo2.png", }, { name: "华阳新材", yse: "26.79", yqhte: "9.64", czrde: "121.59", jse: "120.13", fke: "36.4", url: "./img/logos/logo3.png", }, { name: "潞安化工", yse: "26.79", yqhte: "9.64", czrde: "121.59", jse: "120.13", fke: "36.4", url: "./img/logos/logo4.png", }, { name: "华新燃气", yse: "26.79", yqhte: "9.64", czrde: "121.59", jse: "120.13", fke: "36.4", url: "./img/logos/logo5.png", }, { name: "太重集团", yse: "26.79", yqhte: "9.64", czrde: "121.59", jse: "120.13", fke: "36.4", url: "./img/logos/logo6.png", }, { name: "国际能源", yse: "26.79", yqhte: "9.64", czrde: "121.59", jse: "120.13", fke: "36.4", url: "./img/logos/logo7.png", }, { name: "华远陆港", yse: "26.79", yqhte: "9.64", czrde: "121.59", jse: "120.13", fke: "36.4", url: "./img/logos/logo8.png", }, { name: "水控集团", yse: "26.79", yqhte: "9.64", czrde: "121.59", jse: "120.13", fke: "36.4", url: "./img/logos/logo9.png", }, { name: "文旅集团", yse: "26.79", yqhte: "9.64", czrde: "121.59", jse: "120.13", fke: "36.4", url: "./img/logos/logo10.png", }, { name: "交控集团", yse: "26.79", yqhte: "9.64", czrde: "121.59", jse: "120.13", fke: "36.4", url: "./img/logos/logo11.png", }, { name: "航产集团", yse: "26.79", yqhte: "9.64", czrde: "121.59", jse: "120.13", fke: "36.4", url: "./img/logos/logo12.png", }, { name: "山西建投", yse: "26.79", yqhte: "9.64", czrde: "121.59", jse: "120.13", fke: "36.4", url: "./img/logos/logo13.png", }, { name: "汾酒集团", yse: "26.79", yqhte: "9.64", czrde: "121.59", jse: "120.13", fke: "36.4", url: "./img/logos/logo14.png", }, ], }, inner: 0, innerDeg: 0, timer: null, witchs: 0, topIndex: 0, }; }, created () { }, beforeDestroy () { clearInterval(this.timer); clearInterval(this.time1); clearInterval(this.time2); }, mounted () { this.time4s(); this.timeNs(); this.filterLpData(); this.lpRotate(); setTimeout(() => { this.leftEcharts1Fun(); this.leftEcharts2Fun(); this.leftEcharts3Fun(); this.leftEcharts4Fun(); this.leftEcharts5Fun(); this.leftEcharts6Fun(); this.leftEcharts7Fun(); this.leftEcharts8Fun(); this.leftEcharts9Fun(); this.leftEcharts10Fun(); this.leftEcharts11Fun(); this.chinaEchartsFun(); this.initChartR1(); this.initChartR2(); this.initChartR3(); this.initChartR4(); }); }, methods: { initChartR1 () { let that = this; let sumA = 42; let right5 = [[1, 2, 3, 4, 5, 6]]; let commonCompany = [ "山西焦煤", "山西焦煤", "山西焦煤", "山西焦煤", "山西焦煤", "山西焦煤", ]; // 所有在100范围外的全部变成0,其他值相应增加/减少sumA // right5.forEach((item) => { // item.forEach((item2) => { // if (Number(item2[1]) < 0) { // item2[1] = that.$set(item2, 1, Number(that.numSub(item2[1], sumA))); // } else if (Number(item2[1]) > 0) { // item2[1] = that.$set(item2, 1, Number(item2[1]) + sumA); // } // if (Number(item2[1]) < -100 - sumA) { // item2[1] = that.$set(item2, 1, 0); // item2[1] = that.$set(item2, 2, 0); // } else if (Number(item2[1]) > 100 + sumA) { // item2[1] = that.$set(item2, 1, 0); // item2[1] = that.$set(item2, 2, 0); // } // }); // }); const itemStyle = { // opacity: 0.8, shadowBlur: 10, shadowOffsetX: 0, shadowOffsetY: 0, shadowColor: "rgba(0,0,0,0.3)", }; that.right2Chart = echarts.init(this.$refs["echartR1"]); that.right2Chart.on("showTip", (params) => { // 如果是7或者15并且满足防抖则切换 if ( (params.dataIndex == 5 || params.dataIndex == 11) && that.echartR2Fd ) { that.echartR2Fd = false; setTimeout(() => { option.dataZoom[0].endValue = option.dataZoom[0].endValue + 6; option.dataZoom[0].startValue = option.dataZoom[0].startValue + 6; that.right2Chart.setOption(option); // 防止勿刷新做的防抖 setTimeout(() => { that.echartR2Fd = true; }, 2000); }, 1900); // 如果是17表示到了最后一个,那么重新来一遍 } else if (params.dataIndex == 17 && that.echartR2Fd) { that.echartR2Fd = false; setTimeout(() => { option.dataZoom[0].endValue = 0; option.dataZoom[0].startValue = 5; that.right2Chart.setOption(option); // 防止勿刷新做的防抖 setTimeout(() => { that.echartR2Fd = true; }, 2000); }, 1900); } }); let option = { color: ["#04635E", "#697143", "#4A3042"], dataZoom: [ { // start: 9,//默认为@ // end: 100,//黑认认为1@0 type: "slider", show: false, // xAxisIndex: [0] handlesize: 0, //滑动条的 左右2个滑动条的大小 startValue: 5, // 初始显示值 endValue: 0, // 结束显示值 height: 10, //组件高度 left: "5%", right: "4%", //右边的距离 bottom: "25%", //底边的距离 borderColor: "#939", fillerColor: "#269cdb", borderRadius: 5, backgroundColor: "#33384b", //两边未选中的滑动条区域的额色 showDataShadow: false, //是否显示数据阴影 showDetail: false, //即拖拽时候是否显示详细数值信息 truerealtime: true, //是否实时更新 filterMode: "filter", }, { type: "inside", show: true, start: 1, end: 100, zoomOnMouseWheel: false, //滚轮是否触发缩放 moveOnMouseMove: false, //鼠标滚轮触发滚动 }, ], legend: { selectedMode: false, top: 10, right: "6%", 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}:${that.numFormat( // data[0].data[2] // )}亿
${data[1].seriesName}:${that.numFormat( // data[1].data[2] // )}亿
${data[2].seriesName}:${that.numFormat( // data[2].data[2] // )}亿`; // }, // axisPointer: { // // // type: 'cross',', // }, // }, grid: { top: "10%", right: "7%", left: "7%", bottom: "6%", }, yAxis: { min: -101 - sumA, max: 101 + sumA, maxInterval: 1, splitLine: { show: false, // interval:, lineStyle: { color: "#68b4dd66", type: "dashed", }, }, axisLine: { show: false, }, axisTick: { show: false, }, axisLabel: { show: true, // formatter: '{value}', formatter (data) { if (data == 100 + sumA) { return "100%"; } else if (data == -100 - sumA) { return "-100%"; } else if (data == -5 - sumA) { return "-5%"; } else if (data == 5 + sumA) { return "5%"; } }, textStyle: { color: "#fff", fontSize: "20", fontFamily: "Microsoft YaHei", }, }, nameTextStyle: { color: "#fff", fontSize: 20, fontFamily: "Microsoft YaHei", }, }, xAxis: { data: commonCompany, axisLine: { show: false, //隐藏X轴轴线 lineStyle: { color: "#005094", width: 1, }, }, splitLine: { show: true, lineStyle: { color: "#68b4dd66", type: "dashed", }, }, axisTick: { show: true, //隐藏X轴刻度 }, axisLabel: { show: true, rotate: 20, padding: [0, 0, 0, 0], textStyle: { color: "#fff", //X轴文字颜色 fontSize: 22, fontFamily: "Microsoft YaHei", }, }, }, series: [ { name: "正偏差", type: "scatter", itemStyle: itemStyle, data: right5[0], symbolSize: function (data) { if ((data[2] > 0 && data[2] < 50) || data[2] == 50) { return 40; } else if ((data[2] > 50 && data[2] < 100) || data[2] == 100) { return 70; } else if (data[2] > 100) { return 100; } }, markLine: { symbol: "none", data: [ { name: "100%", yAxis: 100 + sumA, lineStyle: { // color: '#fff', }, label: { show: false, formatter: "{b}", position: "right", color: "#fff", fontSize: 20, label: { show: false, }, }, }, { name: "5%", yAxis: 5 + sumA, lineStyle: { // color: '#fff', }, label: { show: false, formatter: "{b}", position: "right", color: "#fff", fontSize: 20, }, }, { name: "-5%", yAxis: -5 - sumA, lineStyle: { // color: '#fff', }, label: { show: false, formatter: "{b}", position: "right", color: "#fff", fontSize: 20, }, }, { name: "100%", yAxis: -100 - sumA, lineStyle: { // color: '#fff', }, label: { show: false, formatter: "{b}", position: "right", color: "#fff", fontSize: 20, }, }, ], }, }, { name: "容差", type: "scatter", itemStyle: itemStyle, data: right5[1], symbolSize: function (data) { if ((data[2] > 0 && data[2] < 50) || data[2] == 50) { return 40; } else if ((data[2] > 50 && data[2] < 100) || data[2] == 100) { return 70; } else if (data[2] > 100) { return 100; } }, }, { name: "负偏差", type: "scatter", itemStyle: itemStyle, data: right5[2], symbolSize: function (data) { if ((data[2] > 0 && data[2] < 50) || data[2] == 50) { return 40; } else if ((data[2] > 50 && data[2] < 100) || data[2] == 100) { return 70; } else if (data[2] > 100) { return 100; } }, }, ], }; that.right2Chart.on("click", function (param) { if (that.versions) { that.rightAdd.modelName = 1; that.rightAdd.substraction = param.seriesName == "正偏差" ? 1 : param.seriesName == "容差" ? 2 : 3; that.rightAdd.projectStepCode = ""; that.projectNum = 313; that.rightPenetrateTwo( 1, param.seriesName == "正偏差" ? 1 : param.seriesName == "容差" ? 2 : 3, that.findCode(param.name), "right" ); } else { that.projectListTipShow = true; } }); that.right2Chart.setOption(option); tools.loopShowTooltip(that.right2Chart, option, { interval: 2000, loopSeries: true, }); }, initChartR2 () { let that = this; that.right1Chart = echarts.init(this.$refs["echartR2"]); let option = { color: [ { type: "linear", x: 0, y: 0, x2: 0, y2: 1, colorStops: [ { offset: 0, color: "#91231F", // 0% 处的颜色 }, { offset: 1, color: "#F98784", // 100% 处的颜色 }, ], global: false, // 缺省为 false }, { type: "linear", x: 0, y: 0, x2: 0, y2: 1, colorStops: [ { offset: 0, color: "#9F7F00", // 0% 处的颜色 }, { offset: 1, color: "#FBE463", // 100% 处的颜色 }, ], global: false, // 缺省为 false }, { type: "linear", x: 0, y: 0, x2: 0, y2: 1, colorStops: [ { offset: 0, color: "#07806E", // 0% 处的颜色 }, { offset: 1, color: "#79FFEB", // 100% 处的颜色 }, ], global: false, // 缺省为 false }, ], legend: { top: 10, right: 10, textStyle: { fontSize: 20, color: "#fff", fontFamily: "Microsoft YaHei", }, itemStyle: { borderCap: "round", }, }, grid: { left: "3%", right: "4%", bottom: "3%", containLabel: true, }, xAxis: [ { type: "category", data: [ "山西焦煤", "华阳控股", "晋能控股", "潞安化工", "国际能源", "云时代", "航产集团", ], axisLine: { lineStyle: { color: "#005094", }, }, axisTick: { show: false, }, axisLabel: { color: "#fff", rotate: 20, fontSize: 22, }, }, ], yAxis: [ { type: "value", axisLabel: { color: "#fff", fontSize: 22, }, splitLine: { lineStyle: { type: "dashed", }, }, }, ], series: [ { name: "低风险", type: "bar", stack: "Ad", barWidth: 14, emphasis: { focus: "series", }, itemStyle: { barBorderRadius: [15, 15, 15, 15], }, data: [120, 132, 101, 134, 90, 230, 210], }, { name: "中风险", type: "bar", stack: "Ad", itemStyle: { barBorderRadius: [15, 15, 15, 15], }, emphasis: { focus: "series", }, data: [220, 182, 191, 234, 290, 330, 310], }, { name: "高风险", type: "bar", stack: "Ad", itemStyle: { barBorderRadius: [15, 15, 15, 15], }, emphasis: { focus: "series", }, data: [150, 232, 201, 154, 190, 330, 410], }, ], }; that.right1Chart.setOption(option); }, initChartR3 () { let that = this; that.right3Chart = echarts.init(this.$refs["echartR3"]); let option = { radar: { // shape: 'circle', splitNumber: 3, splitLine: { lineStyle: { color: ["#DD5955", "#39e1d0", "#2e3d45"], }, }, splitArea: { areaStyle: { color: [ "rgba(88,247,223,0.2)", "rgba(255, 224, 54, 0.2)", "rgba(221,89,85,0.3)", ], }, }, indicator: [ { name: "安全风险", max: 25 }, { name: "付款风险", max: 25 }, { name: "合同风险", max: 25 }, { name: "结算风险", max: 25 }, { name: "进度风险", max: 25 }, { name: "质量风险", max: 25 }, ], }, series: [ { name: "风险", type: "radar", symbol: "circle", data: [ { value: [12, 23, 21, 17, 20, 9], name: "Allocated Budget", areaStyle: { color: "#112b75", }, lineStyle: { width: 4, color: "#60C1FF", }, label: { fontSize: 22, }, }, ], }, ], }; that.right3Chart.setOption(option); }, initChartR4 () { let that = this; that.right4Chart = echarts.init(this.$refs["echartR4"]); let option = { tooltip: { trigger: "item", show: true, formatter: function (p) { console.info(p); return p.marker + p.name + " : " + p.value; }, }, grid: { left: "3%", right: "4%", bottom: "3%", containLabel: true, }, xAxis: { data: ["山西焦煤", "晋能控股", "华阳新材"], type: "category", splitLine: { show: false, }, axisLine: { show: true, lineStyle: { color: "#fff", }, }, axisTick: { show: true, }, axisLabel: { color: "#fff", fontSize: 22, rotate: 20, }, }, yAxis: { type: "value", splitNumber: 4, interval: 50, splitLine: { show: true, lineStyle: { color: "#68B4DD", type: "dashed", }, }, axisLine: { show: false, }, axisTick: { show: false, }, axisLabel: { color: "#fff", fontSize: 22, }, }, series: [ { type: "bar", animation: false, barWidth: 2, data: [60, 85, 110], tooltip: { show: false, }, itemStyle: { color: { x: 0, y: 0, x2: 0, y2: 1, colorStops: [ { offset: 0, color: "rgba(85, 255, 237, 1)", // 0% 处的颜色 }, { offset: 1, color: "rgba(66, 142, 255, 0.05)", // 100% 处的颜色 }, ], }, }, }, { type: "scatter", data: [60, 85, 110], symbolOffset: ["-120%", "0"], symbolSize: 8, itemStyle: { borderWidth: 0, opacity: 1, color: "rgba(85, 255, 237, 1)", shadowColor: "rgba(85, 255, 237, 1)", shadowBlur: 100, shadowOffsetX: 100, }, }, { type: "bar", animation: false, barGap: "800%", barWidth: 2, data: [60, 85, 110], tooltip: { show: false, }, itemStyle: { color: { x: 0, y: 0, x2: 0, y2: 1, colorStops: [ { offset: 0, color: "rgba(214, 91, 255, 1)", // 0% 处的颜色 }, { offset: 1, color: "rgba(184, 91, 255, 0.05)", // 100% 处的颜色 }, ], }, }, }, { type: "scatter", data: [60, 85, 110], symbolOffset: ["110%", "0"], symbolSize: 8, itemStyle: { borderWidth: 0, opacity: 1, color: "#f2fec3", }, }, ], }; that.right4Chart.setOption(option); }, clickItem (index) { const angle = 360 / this.investData.investList.length; this.witchs = index; this.inner = index; this.innerDeg = this.witchs * angle; this.lpRotate(); }, lpRotate () { const angle = 360 / this.investData.investList.length; clearInterval(this.timer); this.timer = setInterval(() => { this.inner++; this.topIndex++; this.topIndex = this.topIndex % this.meansList.length; this.witchs = this.inner % this.investData.investList.length; this.innerDeg = this.inner * angle; }, 2000); }, filterLpData () { const angle = 360 / this.investData.investList.length; for (let i in this.investData.investList) { this.investData.investList[i].deg = i * angle; this.$set(this.investData.investList, i, { ...this.investData.investList[i], deg: i * angle, }); } }, // 4秒定时器 time4s () { let that = this; // 4秒定时器 this.time1 = setInterval(() => { that.industryProportion == 1 ? (that.industryProportion = 2) : (that.industryProportion = 1); that.leftEcharts1.dispose(); that.leftEcharts2.dispose(); that.leftEcharts3.dispose(); that.leftEcharts4.dispose(); that.leftEcharts1Fun(); that.leftEcharts2Fun(); that.leftEcharts3Fun(); that.leftEcharts4Fun(); }, 4000); }, // 针对投前产业布局分析的定时器 timeNs () { let that = this; this.time2 = setInterval(() => { if (that.industryLayout < 3) { that.industryLayout = that.industryLayout + 1; } else { that.industryLayout = 0; } this.time2 && clearInterval(this.time2); this.timeNs(); that.leftEcharts5.dispose(); that.leftEcharts5Fun(); }, left1[that.industryLayout].length * 2000); }, // 主辅业占比点击方法 industryProportionChange (e) { let that = this; this.industryProportion = e; this.time1 && clearInterval(this.time1); that.leftEcharts1.dispose(); that.leftEcharts2.dispose(); that.leftEcharts3.dispose(); that.leftEcharts4.dispose(); that.leftEcharts1Fun(); that.leftEcharts2Fun(); that.leftEcharts3Fun(); that.leftEcharts4Fun(); this.time4s(); }, // 产业布局分析点击方法 industryLayoutChange (e) { this.industryLayout = e; this.time2 && clearInterval(this.time2); this.leftEcharts5.dispose(); this.timeNs() this.leftEcharts5Fun(); }, yuanChange (value) { return Number((value / 100000000).toFixed(2)); }, // 逢三折断 numFormat (value) { if (!value) return "0"; // var intPart = Number(value).toFixed(0) // 获取整数部分 var intPart = parseInt(value); // 获取整数部分 var intPartFormat = intPart .toString() .replace(/(\d)(?=(?:\d{3})+$)/g, "$1,"); // 将整数部分逢三一断 var floatPart = ".00"; // 预定义小数部分 var value2Array = value.toString().split("."); // =2表示数据有小数位 if (value2Array.length === 2) { floatPart = value2Array[1].toString(); // 拿到小数部分 if (floatPart.length === 1) { // 补0 return intPartFormat + "." + floatPart + "0"; } else { floatPart = floatPart.slice(0, 2); return intPartFormat + "." + floatPart; } } else { return intPartFormat; } }, leftEcharts1Fun () { let that = this; this.leftEcharts1 = echarts.init(this.$refs["leftEcharts1"]); option = { title: { text: that.industryProportion == 1 ? "30%" : "70%", x: "center", y: "center", textStyle: { fontWeight: "normal", color: "#68BDFF", fontSize: "20", }, }, color: ["#68BDFF", "#254F7F"], series: [ { name: "Line 1", type: "pie", clockWise: true, radius: ["80%", "100%"], itemStyle: { normal: { label: { show: false, }, labelLine: { show: false, }, }, }, hoverAnimation: false, data: [ { value: 80, name: "01", itemStyle: { normal: { label: { show: false, }, labelLine: { show: false, }, }, }, }, { name: "02", value: 20, }, ], }, ], }; //轮播 // tools.loopShowTooltip(leftEcharts1, option, { // interval: 2000, // loopSeries: true, // }); //注册 that.leftEcharts1.setOption(option); }, leftEcharts2Fun () { let that = this; this.leftEcharts2 = echarts.init(this.$refs["leftEcharts2"]); let nameList = ["a"]; let valueList = that.industryProportion == 1 ? [30] : [70]; let total = 100; // 数据总数 var category = nameList.map((item, index) => { return { value: valueList[index], itemStyle: { color: new echarts.graphic.LinearGradient( 1, 0, 0, 1, [ { offset: 0, color: "#40A9FF50", }, { offset: 1, color: "#40A9FF", }, ], false ), }, }; }); var totalList = []; var totalBorderList = []; nameList.map((item, index) => { totalList.push({ value: total, itemStyle: { color: "rgba(51, 147, 236, 0.29)", }, }); totalBorderList.push({ value: total, itemStyle: { borderColor: "rgba(51, 147, 236, 0.29)", color: "transparent", }, }); }); var datas = []; category.forEach((value) => { datas.push(value.value); }); option = { // backgroundColor: 'rgb(231,238,249)', xAxis: { max: total, splitLine: { show: false, }, axisLine: { show: false, }, axisLabel: { show: false, }, axisTick: { show: false, }, }, grid: { left: "0%", top: "15%", // 设置条形图的边距 right: "15%", bottom: "5%", }, yAxis: [ { type: "category", inverse: false, data: nameList, axisLine: { show: false, }, axisTick: { show: false, }, axisLabel: { show: false, }, }, ], series: [ { // 内 type: "bar", barWidth: 16, barGap: "20%", silent: true, // label: { // normal: { // formatter: (item) => { // return `${item['name']}:${item['value']} `; // }, // textStyle: { // color: 'rgba(105, 120, 136, 1)', // fontSize: 14, // }, // position: [0, '-25px'], // show: true, // }, // }, data: category, z: 1, itemStyle: { normal: { color: new echarts.graphic.LinearGradient( 1, 0, 0, 1, [ { offset: 0, color: "rgba(81, 193, 156, 1)", }, { offset: 1, color: "rgba(234, 177, 100, 1)", }, ], false ), }, }, animationEasing: "elasticOut", }, { // 分隔 type: "pictorialBar", itemStyle: { normal: { color: "#143362", }, }, symbolRepeat: "fixed", symbolMargin: 8, symbol: "rect", symbolClip: false, symbolSize: [4, 20], symbolPosition: "start", symbolOffset: [0, -2], symbolBoundingData: total, data: [total, total, total, total], z: 2, animationEasing: "elasticOut", }, { // label type: "pictorialBar", symbolBoundingData: total, itemStyle: { normal: { color: "none", }, }, label: { normal: { formatter: (params) => { var text; text = `${((params["data"] * 100) / total).toFixed(2)}亿`; return text; }, textStyle: { // 图列内容样式 fontSize: "20", fontWeight: 800, }, position: "right", offset: [0, -3], distance: 10, // 向右偏移位置 show: true, color: "#68BDFF", }, }, data: datas, z: 0, }, { name: "外框", type: "bar", barGap: "-130%", // 设置外框粗细 data: totalBorderList, barWidth: 26, itemStyle: { normal: { // barBorderRadius: [5, 5, 5, 5], borderWidth: 1, // 边框宽度 borderColor: "rgb(51, 147, 236)", // 边框色 color: "rgb(231,238,249)", }, }, z: 0, }, ], }; //轮播 // tools.loopShowTooltip(leftEcharts1, option, { // interval: 2000, // loopSeries: true, // }); //注册 that.leftEcharts2.setOption(option); }, leftEcharts3Fun () { let that = this; this.leftEcharts3 = echarts.init(this.$refs["leftEcharts3"]); option = { title: { text: that.industryProportion == 1 ? "70%" : "30%", x: "center", y: "center", textStyle: { fontWeight: "normal", color: "#68BDFF", fontSize: "20", }, }, color: ["#5BDCC8", "#254F7F"], series: [ { name: "Line 1", type: "pie", clockWise: true, radius: ["80%", "100%"], itemStyle: { normal: { label: { show: false, }, labelLine: { show: false, }, }, }, hoverAnimation: false, data: [ { value: 80, name: "01", itemStyle: { normal: { label: { show: false, }, labelLine: { show: false, }, }, }, }, { name: "02", value: 20, }, ], }, ], }; //轮播 // tools.loopShowTooltip(leftEcharts1, option, { // interval: 2000, // loopSeries: true, // }); //注册 that.leftEcharts3.setOption(option); }, leftEcharts4Fun () { let that = this; this.leftEcharts4 = echarts.init(this.$refs["leftEcharts4"]); let nameList = ["a"]; let valueList = that.industryProportion == 1 ? [70] : [30]; let total = 100; // 数据总数 var category = nameList.map((item, index) => { return { value: valueList[index], itemStyle: { color: new echarts.graphic.LinearGradient( 1, 0, 0, 1, [ { offset: 0, color: "#5BDCC850", }, { offset: 1, color: "#5BDCC8", }, ], false ), }, }; }); var totalList = []; var totalBorderList = []; nameList.map((item, index) => { totalList.push({ value: total, itemStyle: { color: "rgba(51, 147, 236, 0.29)", }, }); totalBorderList.push({ value: total, itemStyle: { borderColor: "rgba(51, 147, 236, 0.29)", color: "transparent", }, }); }); var datas = []; category.forEach((value) => { datas.push(value.value); }); option = { // backgroundColor: 'rgb(231,238,249)', xAxis: { max: total, splitLine: { show: false, }, axisLine: { show: false, }, axisLabel: { show: false, }, axisTick: { show: false, }, }, grid: { left: "0%", top: "15%", // 设置条形图的边距 right: "15%", bottom: "5%", }, yAxis: [ { type: "category", inverse: false, data: nameList, axisLine: { show: false, }, axisTick: { show: false, }, axisLabel: { show: false, }, }, ], series: [ { // 内 type: "bar", barWidth: 16, barGap: "20%", silent: true, // label: { // normal: { // formatter: (item) => { // return `${item['name']}:${item['value']} `; // }, // textStyle: { // color: 'rgba(105, 120, 136, 1)', // fontSize: 14, // }, // position: [0, '-25px'], // show: true, // }, // }, data: category, z: 1, itemStyle: { normal: { color: new echarts.graphic.LinearGradient( 1, 0, 0, 1, [ { offset: 0, color: "rgba(81, 193, 156, 1)", }, { offset: 1, color: "rgba(234, 177, 100, 1)", }, ], false ), }, }, animationEasing: "elasticOut", }, { // 分隔 type: "pictorialBar", itemStyle: { normal: { color: "#143362", }, }, symbolRepeat: "fixed", symbolMargin: 8, symbol: "rect", symbolClip: false, symbolSize: [4, 20], symbolPosition: "start", symbolOffset: [0, -2], symbolBoundingData: total, data: [total, total, total, total], z: 2, animationEasing: "elasticOut", }, { // label type: "pictorialBar", symbolBoundingData: total, itemStyle: { normal: { color: "none", }, }, label: { normal: { formatter: (params) => { var text; text = `${((params["data"] * 100) / total).toFixed(2)}亿`; return text; }, textStyle: { // 图列内容样式 fontSize: "20", fontWeight: 800, }, position: "right", offset: [0, -3], distance: 10, // 向右偏移位置 show: true, color: "#68BDFF", }, }, data: datas, z: 0, }, { name: "外框", type: "bar", barGap: "-130%", // 设置外框粗细 data: totalBorderList, barWidth: 26, itemStyle: { normal: { // barBorderRadius: [5, 5, 5, 5], borderWidth: 1, // 边框宽度 borderColor: "rgb(51, 147, 236)", // 边框色 color: "rgb(231,238,249)", }, }, z: 0, }, ], }; //轮播 // tools.loopShowTooltip(leftEcharts1, option, { // interval: 2000, // loopSeries: true, // }); //注册 that.leftEcharts4.setOption(option); }, leftEcharts5Fun () { let that = this; this.leftEcharts5 = echarts.init(this.$refs["leftEcharts5"]); let dataList = []; left1[that.industryLayout].forEach((item, index) => { dataList[index] = { value: item.y, name: item.name, itemStyle: { normal: { color: new echarts.graphic.LinearGradient(1, 0, 0, 1, [ { offset: 0, color: commonColor2[index], //顶部颜色 }, { offset: 1, color: commonColor[index], // 底部颜色 }, ]), borderColor: commonColor[index], borderWidth: 3, }, }, }; }); let option = { tooltip: { trigger: "item", formatter: function (e) { return `${e.name} ${e.percent}%
${e.value}亿 ${left1[that.industryLayout][e.seriesIndex].num }个`; }, backgroundColor: "rgba(50,50,50,0.7)", // 提示框浮层的背景颜色 textStyle: { color: "#fff", fontStyle: "normal", // 文字字体的风格('normal',无样式;'italic',斜体;'oblique',倾斜字体) fontWeight: "normal", // 文字字体的粗细('normal',无样式;'bold',加粗;'bolder',加粗的基础上再加粗;'lighter',变细;数字定义粗细也可以,取值范围100至700) fontSize: "28", // 文字字体大小 }, }, legend: { top: "center", orient: "vertical", left: "75%", textStyle: { color: "#fff", fontSize: 28, padding: [0, 20], }, }, graphic: { elements: [ { type: "image", //需要填充图片,配置image,如果不需要图片可以配置其他的, text, circle, sector, ring, polygon, polyline, rect, line, bezierCurve, arc, group, style: { image: "./img/whiteCircle.png", //这里添加图片地址 width: 80, height: 80, }, left: "center", // top: "middle", //配置图片居中 }, ], }, series: [ { name: "", type: "pie", radius: ["20%", "80%"], labelLine: { normal: { lineStyle: { width: 1, }, }, }, label: { normal: { show: false, textStyle: { fontSize: 28, color: "#fff", }, }, }, roseType: "area", data: dataList, }, { tooltip: { show: false, }, type: "pie", radius: ["80%", "82%"], hoverAnimation: false, name: "", data: [ { name: "", value: 0, itemStyle: { normal: { color: "#345189", }, }, }, ], }, ], }; //轮播 tools.loopShowTooltip(that.leftEcharts5, option, { interval: 2000, loopSeries: true, }); //注册 that.leftEcharts5.setOption(option); }, leftEcharts6Fun () { let that = this; this.leftEcharts6 = echarts.init(this.$refs["leftEcharts6"]); var dataArr = 44; var colorSet = { color: "#22B95E", }; var color1 = { type: "linear", x: 0, y: 0, x2: 1, y2: 1, colorStops: [ { offset: 0, color: "rgba(255,255,255,0.1)", }, { offset: 1, color: "rgba(255,255,255,0.3)", }, ], global: false, }; var color2 = { type: "linear", x: 0, y: 0, x2: 1, y2: 1, colorStops: [ { offset: 0, color: "#30DBBA", }, { offset: 1, color: "#2DE696", }, ], global: false, }; option = { tooltip: { formatter: "{a}
{b} : {c}%", }, series: [ { name: "内部进度条", type: "gauge", // center: ['20%', '50%'], radius: "50%", splitNumber: 10, axisLine: { lineStyle: { color: [ [dataArr / 100, "rgba(0,0,0,0)"], [1, "rgba(0,0,0,0)"], ], width: 1, }, }, axisLabel: { show: false, }, axisTick: { show: false, }, splitLine: { show: false, }, itemStyle: { color: "#ffffff", }, detail: { formatter: function (value) { if (value !== 0) { var num = Math.round(value); return parseInt(num).toFixed(0) + "%"; } else { return 0; } }, offsetCenter: [0, 117], textStyle: { padding: [0, 0, 0, 0], fontSize: 60, color: "#58F7DF", }, }, title: { //标题 show: true, offsetCenter: [0, 220], // x, y,单位px textStyle: { color: "#40A9FF", fontSize: 34, //表盘上的标题文字大小 fontWeight: 400, fontFamily: "MicrosoftYaHei", }, }, data: [ { name: "总额度:1,323.85亿", value: dataArr, itemStyle: { fontSize: "50", //y轴上方单位的大小 color: "#FFF666", fontFamily: "MicrosoftYaHei", }, }, ], pointer: { show: true, length: "100%", radius: "20%", width: 3, //指针粗细 }, animationDuration: 4000, }, { name: "内部阴影", type: "gauge", radius: "75%", splitNumber: 10, axisLine: { lineStyle: { color: [ [ dataArr / 100, new echarts.graphic.LinearGradient(0, 1, 0, 0, [ { offset: 0, color: "#081947", }, { offset: 0.5, color: "#5DF5A9", }, { offset: 1, color: "#F6F16A", }, ]), ], [1, "#0E4889"], ], width: 70, }, }, axisLabel: { show: false, }, axisTick: { show: false, }, splitLine: { show: false, }, itemStyle: { show: false, }, }, { name: "外部刻度", type: "gauge", // center: ['20%', '50%'], radius: "90%", min: 0, //最小刻度 max: 100, //最大刻度 splitNumber: 5, //刻度数量 startAngle: 225, endAngle: -45, axisLine: { show: true, lineStyle: { width: 1, color: [[1, "rgba(0,0,0,0)"]], }, }, //仪表盘轴线 axisLabel: { show: false, color: "#ffffff", fontSize: 28, fontFamily: "SourceHanSansSC-Regular", fontWeight: "bold", // position: "top", distance: -45, formatter: function (v) { switch (v + "") { case "0": return "0"; case "10": return "10"; case "20": return "20"; case "30": return "30"; case "40": return "40"; case "50": return "50"; case "60": return "60"; case "70": return "70"; case "80": return "80"; case "90": return "90"; case "100": return "100"; } }, }, //刻度标签。 axisTick: { show: true, splitNumber: 10, lineStyle: { color: "#3798D7", //用颜色渐变函数不起作用 width: 1, }, length: -6, }, //刻度样式 splitLine: { show: true, length: -12, lineStyle: { color: "#3798D7", //用颜色渐变函数不起作用 }, }, //分隔线样式 detail: { show: false, }, }, { //指针上的圆 type: "pie", tooltip: { show: false, }, hoverAnimation: false, legendHoverLink: false, radius: ["0%", "4%"], center: ["50%", "50%"], label: { normal: { show: false, }, }, labelLine: { normal: { show: false, }, }, data: [ { value: 120, itemStyle: { normal: { color: "#ffffff", }, }, }, ], }, ], }; //轮播 // tools.loopShowTooltip(leftEcharts1, option, { // interval: 2000, // loopSeries: true, // }); //注册 that.leftEcharts6.setOption(option); }, leftEcharts7Fun () { let that = this; this.leftEcharts7 = echarts.init(this.$refs["leftEcharts7"]); let option = { title: { text: "固定资产进度分布", textStyle: { color: "#fff", fontSize: 28, fontWeight: 500, fontFamily: "Microsoft YaHei", }, top: "20", left: "220", }, textStyle: { color: "#fff", }, tooltip: { show: false, 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: function (data) { if (data == "特别监管") { return "#40A9FF"; } else if (data == "备案") { return "#5BDCC8"; } }, 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: "red", width: 1, }, }, axisTick: { show: false, //隐藏X轴刻度 }, axisLabel: { show: true, textStyle: { color: "#fff", //X轴文字颜色 fontSize: 20, padding: [-80, 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] }, ], }; //轮播 // tools.loopShowTooltip(leftEcharts1, option, { // interval: 2000, // loopSeries: true, // }); //注册 that.leftEcharts7.setOption(option); }, leftEcharts8Fun () { let that = this; this.leftEcharts8 = echarts.init(this.$refs["leftEcharts8"]); let option = { title: { text: "固定资产进度分布", textStyle: { color: "#fff", fontSize: 28, fontWeight: 500, fontFamily: "Microsoft YaHei", }, top: "20", left: "220", }, textStyle: { color: "#fff", }, tooltip: { show: false, 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: false, 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: "red", width: 1, }, }, axisTick: { show: false, //隐藏X轴刻度 }, axisLabel: { show: true, textStyle: { color: "#fff", //X轴文字颜色 fontSize: 20, padding: [-80, 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] }, ], }; //轮播 // tools.loopShowTooltip(leftEcharts1, option, { // interval: 2000, // loopSeries: true, // }); //注册 that.leftEcharts8.setOption(option); }, chinaEchartsFun () { let that = this this.geoCoordMap = [] /*获取地图数据*/ this.shanxiMap = echarts.init(this.$refs["shanxi"]); // echarts.registerMap('china', china) echarts.registerMap("china", shanxi); // 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] }) // }) // var data = [ // { "name": "新疆", value: 29780 }, // { "name": "西藏", value: 2186 }, // { "name": "内蒙古", value: 1135 }, // { "name": "青海", value: 29780 }, // { "name": "四川", value: 2568 }, // { "name": "黑龙江", value: 29780 }, // { "name": "甘肃", value: 6959 }, // { "name": "云南", value: 5632 }, // { "name": "广西", value: 6707 }, // { "name": "湖南", value: 29780 }, // { "name": "陕西", value: 1894 }, // { "name": "广东", value: 15769 }, // { "name": "吉林", value: 8259 }, // { "name": "河北", value: 5741 }, // { "name": "湖北", value: 3030 }, // { "name": "贵州", value: 4542 }, // { "name": "山东", value: 19780 }, // { "name": "江西", value: 3157 }, // { "name": "河南", value: 6690 }, // { "name": "辽宁", value: 8678 }, // { "name": "山西", value: 5303 }, // { "name": "安徽", value: 29780 }, // { "name": "福建", value: 10259 }, // { "name": "浙江", value: 3016 }, // { "name": "江苏", value: 3202 }, // { "name": "重庆", value: 4540 }, // { "name": "宁夏", value: 19780 }, // { "name": "海南", value: 8626 }, // { "name": "台湾", value: 4361 }, // { "name": "北京", value: 20000 }, // { "name": "天津", value: 4080 }, // { "name": "上海", value: 19780 }, // { "name": "香港", value: 6991 }, // { "name": "澳门", value: 13873 }, // { "name": "南海诸岛", value: 0 } // ]; // var geoCoordMap = { // "新疆": [86.9023, 41.148], // "西藏": [87.8695, 31.6846], // "内蒙古": [110.5977, 41.3408], // "青海": [95.2402, 35.4199], // "四川": [102.9199, 30.1904], // "黑龙江": [128.1445, 46.7156], // "甘肃": [102.7129, 38.166], // "云南": [101.0652, 24.6807], // "广西": [108.7813, 23.6426], // "湖南": [111.5332, 27.3779], // "陕西": [108.5996, 33.7396], // "广东": [113.8668, 22.8076], // "吉林": [126.1746, 43.5938], // "河北": [115.4004, 38.1688], // "湖北": [112.2363, 30.8572], // "贵州": [106.6113, 26.6385], // "山东": [118.2402, 36.2307], // "江西": [115.7156, 27.99], // "河南": [113.0668, 33.8818], // "辽宁": [123.0438, 41.0889], // "山西": [112.44, 37.73], // "安徽": [117.2461, 31.0361], // "福建": [118.3008, 25.9277], // "浙江": [120.498, 29.0918], // "江苏": [119.8586, 32.915], // "重庆": [107.7539, 29.8904], // "宁夏": [105.9961, 37.1096], // "海南": [109.9512, 19.2041], // "台湾": [120.8254, 23.5986], // "北京": [116.4551, 40.2539], // "天津": [117.4219, 39.4189], // "上海": [121.4648, 31.2891], // "香港": [114.6178, 22.3242], // "澳门": [113.5547, 21.6484], // '南海诸岛': [128.8254, 21.5986] // }; var data = [ { name: "大同市", value: 6035, value2: 28 }, { name: "朔州市", value: 3361, value2: 13 }, { name: "忻州市", value: 7335, value2: 25 }, { name: "吕梁市", value: 10904, value2: 45 }, { name: "太原市", value: 25167, value2: 113 }, { name: "阳泉市", value: 2512, value2: 28 }, { name: "晋中市", value: 14857, value2: 52 }, { name: "临汾市", value: 13055, value2: 30 }, { name: "长治市", value: 10300, value2: 23 }, { name: "运城市", value: 4106, value2: 23 }, { name: "晋城市", value: 4543, value2: 31 }, ]; var geoCoordMap = { 太原市: [112.53, 37.87], 大同市: [113.3, 40.12], 阳泉市: [113.57, 37.85], 长治市: [113.08, 36.18], 晋城市: [112.83, 35.52], 朔州市: [112.43, 39.33], 晋中市: [112.94, 37.4], 运城市: [110.97, 35.03], 忻州市: [112.53, 38.72], 临汾市: [111.5, 36.08], 吕梁市: [111.13, 37.52], }; var convertData = function (data) { var res = []; for (var i = 0; i < data.length; i++) { var geoCoord = geoCoordMap[data[i].name]; if (geoCoord) { res.push({ name: data[i].name, value: geoCoord.concat(data[i].value, data[i].value2), }); } } return res; }; var convertedData = [ convertData(data), convertData( data .sort(function (a, b) { return b.value - a.value; }) .slice(0, 6) ), ]; data.sort(function (a, b) { return a.value - b.value; }); option = { backgroundColor: '#404a5900', animation: true, animationDuration: 1000, animationEasing: "cubicInOut", animationDurationUpdate: 1000, animationEasingUpdate: "cubicInOut", geo: { map: "china", center: [112.53, 37.67], zoom: 4.5, label: { emphasis: { show: false, }, }, roam: false, itemStyle: { normal: { borderColor: '#7fb3ff', borderWidth: 3, areaColor: { type: 'radial', x: 0.5, y: 0.5, r: 0.8, colorStops: [{ offset: 0, color: '#468ff8' // 0% 处的颜色 }, { offset: 1, color: '#0a2c6d' // 100% 处的颜色 }], globalCoord: false // 缺省为 false }, // shadowColor: 'rgba(128, 217, 248, 1)', shadowColor: '#468ff8', shadowOffsetX: -2, shadowOffsetY: 2, shadowBlur: 20 }, emphasis: { areaColor: { colorStops: [{ offset: 0, color: '#3844aa' // 0% 处的颜色 }, { offset: 1, color: '#7284fc' // 100% 处的颜色 }], }, borderColor: '#b3baff', borderWidth: 5 } }, tooltip: { trigger: "item", className: "custom-tooltip-box", confine: true, // 不超出当前表 formatter: (params, ticket, callback) => { // 清空所有轮播 for (var k in geoCoordMap) { that.shanxiMap.dispatchAction({ // type: 'geoUnSelect', type: 'downplay', name: k, geoIndex: 0 }) that.shanxiMap.dispatchAction({ // type: 'geoUnSelect', type: 'downplay', name: k, seriesName: params.seriesName }) that.shanxiMap.dispatchAction({ // type: 'geoUnSelect', type: 'downplay', name: k, seriesName: 'series\u00001' }) } that.shanxiMap.dispatchAction({ // type: 'geoSelect', type: 'highlight', name: params.name, geoIndex: 0 }) that.shanxiMap.dispatchAction({ // type: 'geoSelect', type: 'highlight', name: params.name, seriesName: params.seriesName }) that.shanxiMap.dispatchAction({ // type: 'geoSelect', type: 'highlight', name: params.name, seriesName: 'series\u00001' }) return `
${params.name}
项目数量:${params.value[3]}
投资总额:${params.value[2]}亿
` }, }, regions: [ { name: "太原市", value: 2000, itemStyle: { emphasis: { borderColor: "#ffe036", borderWidth: 5, areaColor: { type: "radial", x: 0.5, y: 0.5, r: 0.8, colorStops: [ { offset: 0, color: "#ffe036", // 0% 处的颜色 }, { offset: 1, color: "#7c732a", // 100% 处的颜色 }, ], globalCoord: false, // 缺省为 false }, }, }, }, { name: "南海诸岛", itemStyle: { // 隐藏地图 normal: { opacity: 0, // 为 0 时不绘制该图形 }, }, label: { show: false, // 隐藏文字 }, }, ], }, tooltip: { trigger: "item", className: "custom-tooltip-box", confine: true, // 不超出当前表 }, xAxis: { type: "value", scale: true, position: "top", boundaryGap: false, splitLine: { show: false, }, axisLine: { show: false, }, axisTick: { show: false, }, axisLabel: { margin: 2, textStyle: { color: "#aaa", }, }, }, yAxis: { type: "category", nameGap: 16, axisLine: { show: false, lineStyle: { color: "#ddd", }, }, axisTick: { show: false, lineStyle: { color: "#ddd", }, }, axisLabel: { interval: 0, textStyle: { color: "#ddd", }, }, data: categoryData, }, series: [ { type: 'effectScatter', colorBy: 'data', coordinateSystem: 'geo', data: convertedData[0], symbolSize: function (val) { return Math.max(val[2] / 500, 8); }, showEffectOn: "emphasis", rippleEffect: { brushType: "stroke", color: '#58F7DF' }, hoverAnimation: true, label: { normal: { formatter: "{b}", position: "right", show: true, fontSize: "30", color: "#fff", }, }, itemStyle: { normal: { color: "#ffc809", shadowBlur: 50, shadowColor: "#ffc809", }, emphasis: { color: '#58F7DF', shadowBlur: 50, shadowColor: '#58F7DF', }, }, zlevel: 99 }, { type: 'effectScatter', colorBy: 'data', coordinateSystem: 'geo', data: [ { "name": "太原市", "value": [ 112.53, 37.87, 25167 ] } ], symbolSize: function (val) { return Math.max(val[2] / 500, 8); }, showEffectOn: "emphasis", rippleEffect: { brushType: "stroke", color: '#DF62F2' }, hoverAnimation: true, label: { normal: { formatter: "{b}", position: "right", show: true, fontSize: "30", color: "#fff", }, }, itemStyle: { normal: { color: "#ffc809", shadowBlur: 50, shadowColor: "#ffc809", }, emphasis: { color: '#DF62F2', shadowBlur: 50, shadowColor: '#DF62F2', }, }, zlevel: 999 } ] }; var categoryData = []; var barData = []; var sum = 0; for (var i = 0; i < data.length; i++) { categoryData.push(data[i].name); barData.push(data[i].value); sum += data[i].value; } // this.shanxiMap.on('click', function (params) { // if (params.name == '山西') { // that.shanxiMap.dispose() // that.centerShow = true // setTimeout(() => { // }) // } // }) tools.loopShowTooltip(this.shanxiMap, option, { interval: 2000, loopSeries: false, seriesIndex: 0 }); this.shanxiMap.setOption(option); }, leftEcharts9Fun () { let that = this; this.leftEcharts9 = echarts.init(this.$refs["leftEcharts9"]); // var ROOT_PATH = 'https://echarts.apache.org/examples'; let option = { backgroundColor: '#00000000', globe: { globeRadius: 55, baseTexture: './img/3D/world1.jpg', heightTexture: './img/3D/world1.jpg', displacementScale: 0.04, shading: 'realistic', // environment: './img/3D/world2.jpg', realisticMaterial: { roughness: 0.9 }, postEffect: { enable: true }, light: { main: { intensity: 3, shadow: true }, } } }; that.leftEcharts9.setOption(option); }, leftEcharts10Fun () { let that = this; this.leftEcharts10 = echarts.init(this.$refs["leftEcharts10"]); option = { grid: { top: 45, right: 0, left: 80, bottom: 80, }, tooltip: { show: true, trigger: "axis", formatter: data => { return `${data[0].name}
${data[0].seriesName}:${that.numFormat(data[0].value)}亿
${data[1].seriesName}:${that.numFormat(data[1].value)}亿` }, axisPointer: { // 坐标轴指示器,坐标轴触发有效 type: "shadow", // 默认为直线,可选为:'line' | 'shadow' }, backgroundColor: "rgba(50,50,50,0.7)", // 提示框浮层的背景颜色 borderColor: "rgba(50,50,50,0.7)", textStyle: { color: "#fff", fontStyle: "normal", // 文字字体的风格('normal',无样式;'italic',斜体;'oblique',倾斜字体) fontWeight: "normal", // 文字字体的粗细('normal',无样式;'bold',加粗;'bolder',加粗的基础上再加粗;'lighter',变细;数字定义粗细也可以,取值范围100至700) fontSize: "28", // 文字字体大小 }, }, xAxis: { data: commonCompany, axisTick: { show: false, }, // x轴的字体颜色 axisLabel: { rotate: 40, textStyle: { color: "white", fontSize: '20', fontFamily: 'Microsoft YaHei' }, }, //y轴线的颜色以及宽度 axisLine: { show: true, lineStyle: { color: "#1E5389", width: 1, type: "solid", }, }, }, yAxis: { name: '亿', axisTick: { lineStyle: { color: "#18416F", }, }, // y轴的字体颜色 axisLabel: { textStyle: { color: "white", fontSize: '20', fontFamily: 'Microsoft YaHei' }, }, splitLine: { show: true, lineStyle: { color: "#68b4dd66", width: 1, type: "dashed", }, }, //y轴线的颜色以及宽度 axisLine: { show: true, lineStyle: { color: "#1E5389", width: 1, type: "solid", }, }, nameTextStyle: { color: '#fff', fontSize: 20, fontFamily: 'Microsoft YaHei' }, }, series: [ { name: "已用额度", type: "pictorialBar", symbol: 'fixed', symbolSize: [20, 5], symbolMargin: 2, symbolRepeat: 'repeat', data: [26, 36, 16, 46, 26, 36, 16, 46, 26, 36, 16, 46, 26, 36, 16, 46, 26, 36], showBackground: false, barWidth: "15", itemStyle: { color: '#40A9FF' }, zlevel: 1 }, { name: "总额度", type: "pictorialBar", symbol: 'fixed', symbolSize: [30, 5], symbolMargin: 2, symbolRepeat: 'repeat', data: [390, 390, 390, 200, 390, 390, 390, 200, 390, 390, 390, 200, 390, 390, 390, 200, 390, 200], barGap: '-130%', barWidth: "25", itemStyle: { color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [ { offset: 0, color: '#b9b7c060', }, { offset: 1, color: '#b9b7c060', }, ]), }, }, ] }; //轮播 tools.loopShowTooltip(that.leftEcharts10, option, { interval: 2000, loopSeries: true, }); //注册 that.leftEcharts10.setOption(option); }, // 重点项目两线指标轮播方法 scrollChange (index) { if (index == 18) { this.count = -1 } else { this.count = index } if (this.count > 12 && this.count != 18) { this.countType = 1 } else { this.countType = 0 } for (var i = 0; i < this.list.length; i++) { if (i == 2) { this.list[i].classList.add('light') } else { this.list[i].classList.remove('light') } } this.leftEcharts11 ? this.leftEcharts11.dispose() : '' this.leftEcharts11Fun() }, leftEcharts11Fun () { let that = this; this.leftEcharts11 = echarts.init(this.$refs["leftEcharts11"]); option = { tooltip: { trigger: 'axis', formatter: '指标:' + '{c0}' + '
' + '发展线:' + '{c1}' + '
' + '生存线:' + '{c2}', //+ '
'+ '{a1}:{c1}' + '%', axisPointer: { type: 'shadow', }, }, grid: { top: '10%', right: '5%', left: '15%', bottom: '20%', }, xAxis: { data: ['总投资收益率', '销售利润率', '成本费用利润率', '总资产周转率', '财务内部收益率'], // data: left15[this.countType], axisLine: { show: true, //隐藏X轴轴线 lineStyle: { color: '#005094', width: 1, }, }, axisTick: { show: true, //隐藏X轴刻度 }, axisLabel: { show: true, rotate: 30, textStyle: { color: '#fff', //X轴文字颜色 fontSize: 20, fontFamily: 'Microsoft YaHei' }, }, }, yAxis: [ { type: 'value', splitLine: { show: true, lineStyle: { color: '#68b4dd66', type: 'dashed', }, }, axisLine: { show: false }, axisLabel: { show: true, formatter: '{value}%', textStyle: { color: '#fff', fontSize: 20, fontFamily: 'Microsoft YaHei' }, }, nameTextStyle: { color: '#ebf8ac', fontSize: 16, fontFamily: 'Microsoft YaHei' }, }, ], series: [ { name: '实际值', type: 'bar', barWidth: 20, itemStyle: { normal: { color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ { offset: 0, color: '#69c0ff', }, { offset: 1, color: '#082550', }, ]), }, }, data: [70, 52, 33, 41, 52], // data: this.storageRecordConfig.data.length == 0 ? [] : this.storageRecordConfig.data.length == 1 ? left12[this.count][2] : left12[this.count + 1][2] }, { name: '', type: 'line', barWidth: 15, itemStyle: { normal: { color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ { offset: 0, color: '#69c0ff', }, { offset: 1, color: 'green', }, ]), }, }, data: [20, 30, 15, 28, 36], // data: this.storageRecordConfig.data.length == 0 ? [] : this.storageRecordConfig.data.length == 1 ? left12[this.count][1] : left12[this.count + 1][1] }, { name: '', type: 'line', barWidth: 15, itemStyle: { normal: { color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ { offset: 0, color: '#69c0ff', }, { offset: 1, color: 'yellow', }, ]), }, }, data: [15, 22, 17, 33, 14], // data: this.storageRecordConfig.data.length == 0 ? [] : this.storageRecordConfig.data.length == 1 ? left12[this.count][0] : left12[this.count + 1][0] }, ], } //轮播 tools.loopShowTooltip(that.leftEcharts11, option, { interval: 2000, loopSeries: true, }); //注册 that.leftEcharts11.setOption(option); }, }, });