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", }, ], stockRightList: [ { label: "前期准备", value: "66", }, { label: "工商变更登记", value: "77", }, ], 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", }, ], }, riskData: { x: [ { name: "大地控股", value: [14, 13, 6, 15, 13, 4] }, { name: "云时代", value: [15, 12, 12, 10, 24, 6] }, { name: "华舰体育", value: [14, 13, 6, 15, 13, 4] }, { name: "神农科技", value: [14, 13, 6, 15, 13, 4] }, { name: "山西焦煤", value: [14, 13, 6, 15, 13, 4] }, { name: "晋能控股", value: [14, 13, 6, 15, 13, 4] }, { name: "华阳新材", value: [14, 13, 6, 15, 13, 4] }, { name: "潞安化工", value: [14, 13, 6, 15, 13, 4] }, { name: "华新燃气", value: [14, 13, 6, 15, 13, 4] }, { name: "太重集团", value: [14, 13, 6, 15, 13, 4] }, { name: "国际能源", value: [14, 13, 6, 15, 13, 4] }, { name: "华远陆港", value: [14, 13, 6, 15, 13, 4] }, { name: "水控集团", value: [14, 13, 6, 15, 13, 4] }, { name: "文旅集团", value: [14, 13, 6, 15, 13, 4] }, { name: "交控集团", value: [14, 13, 6, 15, 13, 4] }, { name: "航产集团", value: [14, 13, 6, 15, 13, 4] }, { name: "山西建投", value: [14, 13, 6, 15, 13, 4] }, { name: "汾酒集团", value: [14, 13, 6, 15, 13, 4] }, ], y1: [ 120, 110, 200, 220, 123, 345, 323, 123, 233, 234, 123, 143, 120, 110, 20, 220, 123, 345, ], y2: [ 120, 110, 210, 220, 123, 345, 323, 123, 233, 234, 123, 143, 120, 110, 20, 220, 123, 345, ], y3: [ 120, 110, 230, 220, 123, 345, 323, 123, 233, 234, 123, 143, 120, 110, 20, 220, 123, 345, ], }, inner: 0, innerDeg: 0, timer: null, witchs: 0, topIndex: 0, echartR1Fd1: true, echartR2Fd2: true, r3Index: 0, riskData1: { x: [ "大地控股", "云时代", "华舰体育", "神农科技", "山西焦煤", "晋能控股", "华阳新材", "潞安化工", "华新燃气", "太重集团", "国际能源", "华远陆港", "水控集团", "文旅集团", "交控集团", "航产集团", "山西建投", "汾酒集团", ], y1: [ 100, 45, 67, 110, 108, 34, 100, 45, 67, 110, 108, 34, 100, 45, 67, 110, 108, 34, ], y2: [ 100, 45, 67, 110, 108, 34, 100, 45, 67, 110, 108, 34, 100, 45, 67, 110, 108, 34, ], y3: [ 100, 45, 67, 110, 108, 34, 100, 45, 67, 110, 108, 34, 100, 45, 67, 110, 108, 34, ], y4: [ 100, 45, 67, 110, 108, 34, 100, 45, 67, 110, 108, 34, 100, 45, 67, 110, 108, 34, ], y5: [ 100, 45, 67, 110, 108, 34, 100, 45, 67, 110, 108, 34, 100, 45, 67, 110, 108, 34, ], }, }; }, 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.initChartR4(); }); }, methods: { initChartR1() { let right5 = [ [ ["山西焦煤", 43.8], ["晋能控股", 49.8], ["华阳新材", 46], ["潞安化工", 53.8], ["华新燃气", 59], ["太重集团", 57], ["国际能源", 44], ["华远陆港", 46], ["万家寨水控", 57], ["文旅集团", 62.8], ["山西交控", 55.8], ["航产集团", 44.2], ["山西建投", 49.6], ["汾酒集团", 66.65], ["大地控股", 45.6], ["云时代", 63.9], ["华舰体育", 70.6], ["神农科技", 45.6], ], [ ["山西焦煤", 25.8], ["晋能控股", 25.8], ["华阳新材", 38], ["潞安化工", 37.8], ["华新燃气", 28], ["太重集团", 38], ["国际能源", 28], ["华远陆港", 38], ["万家寨水控", 35.8], ["文旅集团", 22.8], ["山西交控", 25.8], ["航产集团", 24.2], ["山西建投", 23.6], ["汾酒集团", 26.65], ["大地控股", 25.6], ["云时代", 30.9], ["华舰体育", 38.6], ["神农科技", 35.6], ], [ ["山西焦煤", 15.8], ["晋能控股", 15.8], ["华阳新材", 8], ["潞安化工", 17.8], ["华新燃气", 18], ["太重集团", 18], ["国际能源", 8], ["华远陆港", 5.8], ["万家寨水控", 5.8], ["文旅集团", 2.8], ["山西交控", 5.8], ["航产集团", 12.2], ["山西建投", 13.6], ["汾酒集团", 16.65], ["大地控股", 15.6], ["云时代", 13.9], ["华舰体育", 18.6], ["神农科技", 15.6], ], ]; 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["echartR1"]); 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: ["#74a55d", "#cea446", "#b84b4b"], 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(data[1]) * 9; }, }, { name: "容差", type: "scatter", itemStyle: itemStyle, data: right5[1], symbolSize: function (data) { return Math.sqrt(data[1]) * 8; }, }, { name: "负偏差", type: "scatter", itemStyle: itemStyle, data: right5[2], symbolSize: function (data) { return Math.sqrt(data[1]) * 7; }, }, ], }; myChart.on("click", function (param) { // that.showChartLTipDouble(param.name) that.projectListTipShow = true; }); myChart.setOption(option); tools.loopShowTooltip(myChart, option, { interval: 2000, loopSeries: true, }); }, initChartR2() { let that = this; that.right1Chart = echarts.init(this.$refs["echartR2"]); that.right1Chart.on("showTip", (params) => { that.r3Index = params.dataIndex; that.initChartR3(); console.log(that.r3Index); // 如果是7或者15并且满足防抖则切换 if ( (params.dataIndex == 5 || params.dataIndex == 11) && that.echartR1Fd1 ) { that.echartR1Fd1 = false; setTimeout(() => { option.dataZoom[0].endValue = option.dataZoom[0].endValue + 6; option.dataZoom[0].startValue = option.dataZoom[0].startValue + 6; that.right1Chart.setOption(option); // 防止勿刷新做的防抖 setTimeout(() => { that.echartR1Fd1 = true; }, 2000); }, 1900); // 如果是17表示到了最后一个，那么重新来一遍 } else if (params.dataIndex == 17 && that.echartR1Fd1) { that.echartR1Fd1 = false; setTimeout(() => { option.dataZoom[0].endValue = 0; option.dataZoom[0].startValue = 5; that.right1Chart.setOption(option); // 防止勿刷新做的防抖 setTimeout(() => { that.echartR1Fd1 = true; }, 2000); }, 1900); } }); 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 }, ], 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, right: 10, textStyle: { fontSize: 20, color: "#fff", fontFamily: "Microsoft YaHei", }, itemStyle: { borderCap: "round", }, }, tooltip: { trigger: "item", show: true, position: "top", 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", // 文字字体大小 }, formatter: function (p) { console.log(p); return p.name + "
" + p.marker + p.seriesName + ": " + p.value; }, }, grid: { left: "3%", right: "4%", bottom: "3%", containLabel: true, }, xAxis: [ { type: "category", data: that.riskData.x.map((item) => item.name), 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: that.riskData.y1, }, { name: "中风险", type: "bar", barWidth: 14, stack: "Ad", itemStyle: { barBorderRadius: [15, 15, 15, 15], }, emphasis: { focus: "series", }, data: that.riskData.y2, }, { name: "高风险", type: "bar", barWidth: 14, stack: "Ad", itemStyle: { barBorderRadius: [15, 15, 15, 15], }, emphasis: { focus: "series", }, data: that.riskData.y3, }, ], }; that.right1Chart.setOption(option); tools.loopShowTooltip(that.right1Chart, option, { interval: 2000, loopSeries: true, }); }, 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", label: { show: true, formatter: function (params) { return params.value; }, fontSize: 24, color: "#68BDFF", }, data: [ { value: that.riskData.x[that.r3Index].value, 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"]); that.right4Chart.on("showTip", (params) => { // 如果是7或者15并且满足防抖则切换 if ( (params.dataIndex == 5 || params.dataIndex == 11) && that.echartR2Fd2 ) { that.echartR2Fd2 = false; setTimeout(() => { option.dataZoom[0].endValue = option.dataZoom[0].endValue + 6; option.dataZoom[0].startValue = option.dataZoom[0].startValue + 6; that.right4Chart.setOption(option); // 防止勿刷新做的防抖 setTimeout(() => { that.echartR2Fd2 = true; }, 2000); }, 1900); // 如果是17表示到了最后一个，那么重新来一遍 } else if (params.dataIndex == 17 && that.echartR2Fd2) { that.echartR2Fd2 = false; setTimeout(() => { option.dataZoom[0].endValue = 0; option.dataZoom[0].startValue = 5; that.right4Chart.setOption(option); // 防止勿刷新做的防抖 setTimeout(() => { that.echartR2Fd2 = true; }, 2000); }, 1900); } }); let option = { 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, //鼠标滚轮触发滚动 }, ], title: { text: "企业后评价执行情况", left: "center", textStyle: { color: "#fff", fontSize: 32, }, }, tooltip: { trigger: "item", show: true, position: "top", 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", // 文字字体大小 }, formatter: function (p) { console.log(p); return p.name + "
" + p.marker + p.seriesName + ": " + p.value; }, }, legend: { show: true, textStyle: { fontSize: 24, color: "rgba(255, 255, 255, .6)", }, inactiveColor: "#fff", itemHeight: 20, top: "15%", backgroundColor: "transparent", data: [ { name: "应首评项目数", icon: "image://data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAUCAYAAAC58NwRAAAAAXNSR0IArs4c6QAAAWdJREFUOE+N0k8og3EYB/Dvs8P8CSlTxJGD8u+yTYmNm0gJQznIQRxMoV2cXWSKCznIQdk7SkmOEomNg41y4EjURkLZFI/ed3vX+5v82nt4357n9/s8Pe/v9xCST6+fzVHGKAMDAKqT6WsCNi2ElS0Xfak5Ul+tfi77YewBqNcLpH0vTYSOAxc9kFo5wghINus2lJMPOzl8PE6EpX8qC2lmuMmp8CmABn3FVgJ4bIloLggEnwRzRg6F4wSY9fR2J1CUnYieY0DPrgDiUvASA7pF8PGnJXsp4LEC3wx4L4DAY1pLLQq7GVjM5KcJmKC2fc76fNeOtU6GmBDOzYMt04sLmQjt2sUZRyMCjAEYBKNKyxNuAGwUA8vCaBhbcSrMxviwj1JFU7Nk3NC49iqAk+FCObAu3AngfLJCDmpmjgVwNdskB5UjPgHcrvbLQXmXVwD3O1NyYGmeFkD0aF4OCmqHBPAWXhfAL4WqeuKVsFKCAAAAAElFTkSuQmCC", }, { name: "已完成首评项目数", icon: "image://data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAUCAYAAAC58NwRAAAAAXNSR0IArs4c6QAAAXFJREFUOE+V0kFLAkEUB/D/G9eW3UN1sFPYNaJAu2R0Coog8mq0fQH1kEVBhz5Ah6CoLhrdE/LqKQo6VZ7SKCKChKRTBRmhbq47oabsZC22h1nem/k93jCP8P0F+E2HQ1dD4NAAGqqn+TUI8YpciCVo8LOaoeoSKOR6GTOSxOFtFLD+OSFtmpI/obqfqFqZ6Wrqr8NNyJHJK4aPtNLDAue0+1vlnzkiHqG5YvYcwGhj08MUhJyuWhgrvyBjFq3uogp0AB2NbFR2o5sctfCNVxDWc1ag/xPQR0tLXqYg6HTBBMd++RXplpZK2Qg4dtq5NAiLNM3v5a6ilALBY4s4rvKKMdLWw4EjU4E0U3s462gwXQ3DMLeJsfpgmCYgsSVTLkSF0bC24r9NcWucHPA1izZnyXpg8vRIAMfjU/ZgLH4ogDNt1h4Mb8YEcLkSsgf9y+sCuNtaswd92qoAHuMb9qBnIiiA55M9e9DpnRfAe/pAAF9gqJXUYWdYUwAAAABJRU5ErkJggg==", }, { name: "应再评项目数", icon: "image://data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAUCAYAAAC58NwRAAAAAXNSR0IArs4c6QAAAV5JREFUOE+V0j8oxGEYwPHvo/wMjgyUslAWcTFhMRiEsHLKYDzFKZRBSskgR7mUG29QjpX86QaDwdlwLotiUYpB/gyHPDru9HsPP+c3vL+e530/T8/b+wipb31KrYJ8vAi9QE0qfYqy+vBEsHtKnpM5SS4bC1qW+8amQl26gP0vcPSSQ2fXiFxJsnKhi8PfDtvgsVo0yJZfhwQCP1XOzCn4ZNuvB0BjerO4HNxtn1FsB24vDRZNggRgpdPNXsjL/4wST7AXNEDiv+DxW0slFVDTCvoG8QjcXGS2NKc+hMVsLo0yLFsBzZNnDoHaP9CJWtRn9XDA8WsOHR8PZx+NQhcDqvQhVH3klTMRVu4fWTZGw97Ktl/VHrePyVfRr1myHwhP3xnAM1nkDJbGzw0wOFvpDCa8+waYCTY5g/6esAFCax5n0NI6b4DI7qgzcDeOGSAW9TuD0up+A1zHQwZ4B2JrgI9r4uMDAAAAAElFTkSuQmCC", }, { name: "已完成再评项目数", icon: "image://data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAUCAYAAAC58NwRAAAAAXNSR0IArs4c6QAAAWBJREFUOE9jZICC/1e12Rh4uDIY/jNGMjAw6ECFrzAw/l/O8OXbDEbtq79AYowg4v9jS2mGv3+3MDAwGMAMQKMvMDAz+zDKHn/KCDaZm/skHsUwvRcZfr8zZ/z/0CyX4T/DJBwmowozMuQx/n9gdpyBgcECLsNpycAgXAPhvm1hYPgOkoaDEyANPxkYGNjgQjJbGRiYRSDcv28YGJ54I2v4SUDDWwaGJ17IGr5gcZIV1El/GRjetjMwfD+G5qSHpnkM/xknEufp//mM/2+rsDOwCoGCVZ+ApksMv9+ZERtxFxmYmb3BEYeaNHgyGf7/j2FgYNCEil9nYGRcwvDly3SUpIHslP8PzP4j8xkVTsENhaclZAWvLligaBAzOIFfw9ld1igajN2O4tewar49ioawxIP4NbQ0OqNoqKnfi19DXIoHioZFc3bg12Dt6YOi4ej2Lfg1yBn7o2h4dHYjigYAb0t88hVwEBYAAAAASUVORK5CYII=", }, { name: "再评达标项目数", icon: "image://data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAUCAYAAAC58NwRAAAAAXNSR0IArs4c6QAAAWBJREFUOE+V0k8og2EcwPHvkzVZLLm6KItEzWlclIPbdhGKcsCJwzZFdtgOK+8OimIXTjgoSrisXByUgz8nE4mmXFwlZmuaPXr3r/eZ9sZ7eN9+v/f5/J6n3/MTFJ9wWFpTFqYFjAFdxfSthF1blo1wWHzpOaG/gppszkIM6C4VqPheW8ATCYkXoVdOW7g0WVyy8ZSdHhFYlF4E0SqV1bTEJwKaPAd6S3/aWmHEU4j2Y/D4pJgLHWQAaykd9ENDfSH6SEJkTQGZ/4LkryO1O2DYDbkcHB7DQ6LiSAua9AlQN67SAQl+4Y3KWtt7vq1Os04JuPm04/rrxcUt4M5fnHE00jXMIBgHOor5eyQ7dd+sK6NhPEpAk9IYL4VEuWh5lowLfKE3BUS1RnMwOZtQwNaqwxwMTp0p4Gizzxz0D+0p4PRg1Bw4B1YUED+ZMwctrnkFPF8tm4OmzgkFvN5tK+AHKZh4TU8krdoAAAAASUVORK5CYII=", }, ], }, grid: { top: "30%", left: "3%", right: "4%", bottom: "3%", containLabel: true, }, xAxis: { data: that.riskData1.x, type: "category", splitLine: { show: false, }, alignTicks: true, axisLine: { show: true, lineStyle: { color: "rgba(0, 80, 148, .8)", }, }, axisTick: { show: false, }, axisLabel: { color: "#fff", fontSize: 22, rotate: 20, }, }, yAxis: { type: "value", splitLine: { show: true, lineStyle: { color: "rgba(104, 180, 221, .2)", type: "dashed", }, }, axisLine: { show: false, }, axisTick: { show: false, }, axisLabel: { color: "#fff", fontSize: 22, }, }, series: [ { type: "bar", name: "应首评项目数", barWidth: 4, barGap: "600%", data: that.riskData1.y1, label: { show: true, position: "top", formatter: " ", width: 6, height: 6, borderRadius: 50, borderWidth: 6, borderColor: "#40A9FF", backgroundColor: "#fff", }, itemStyle: { color: { x: 0, y: 0, x2: 0, y2: 1, colorStops: [ { offset: 0, color: "#40A9FF", // 0% 处的颜色 }, { offset: 1, color: "#092351", // 100% 处的颜色 }, ], }, }, }, { type: "bar", name: "已完成首评项目数", barGap: "600%", barWidth: 4, data: that.riskData1.y2, label: { show: true, position: "top", formatter: " ", width: 6, height: 6, borderRadius: 50, borderWidth: 6, borderColor: "#58F7DF", backgroundColor: "#fff", }, itemStyle: { color: { x: 0, y: 0, x2: 0, y2: 1, colorStops: [ { offset: 0, color: "#58F7DF", // 0% 处的颜色 }, { offset: 1, color: "#092351", // 100% 处的颜色 }, ], }, }, }, { type: "bar", name: "应再评项目数", barGap: "600%", barWidth: 4, data: that.riskData1.y3, label: { show: true, position: "top", formatter: " ", width: 6, height: 6, borderRadius: 50, borderWidth: 6, borderColor: "#B78CFF", backgroundColor: "#fff", }, itemStyle: { color: { x: 0, y: 0, x2: 0, y2: 1, colorStops: [ { offset: 0, color: "#B78CFF", // 0% 处的颜色 }, { offset: 1, color: "#092351", // 100% 处的颜色 }, ], }, }, }, { type: "bar", name: "已完成再评项目数", barGap: "600%", barWidth: 4, data: that.riskData1.y4, label: { show: true, position: "top", formatter: " ", width: 6, height: 6, borderRadius: 50, borderWidth: 6, borderColor: "#FFE036", backgroundColor: "#fff", }, itemStyle: { color: { x: 0, y: 0, x2: 0, y2: 1, colorStops: [ { offset: 0, color: "#FFE036", // 0% 处的颜色 }, { offset: 1, color: "#092351", // 100% 处的颜色 }, ], }, }, }, { type: "bar", name: "再评达标项目数", barGap: "600%", barWidth: 4, data: that.riskData1.y5, label: { show: true, position: "top", formatter: " ", width: 6, height: 6, borderRadius: 50, borderWidth: 6, borderColor: "#7784FF", backgroundColor: "#fff", }, itemStyle: { color: { x: 0, y: 0, x2: 0, y2: 1, colorStops: [ { offset: 0, color: "#7784FF", // 0% 处的颜色 }, { offset: 1, color: "#092351", // 100% 处的颜色 }, ], }, }, }, ], }; that.right4Chart.setOption(option); tools.loopShowTooltip(that.right4Chart, option, { interval: 2000, loopSeries: true, }); }, 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); }, }, });