let app = new Vue({ el: '#app', data () { return { leftEcharts1: '', leftEcharts2: '', leftEcharts3: '', leftEcharts4: '', leftEcharts5: '', leftEcharts6: '', leftEcharts7: '', leftEcharts8: '', shanxiMap: '',// 山西地图 industryProportion: 1, // 主辅业占比轮播 industryLayout: 0,//产业布局分析 time1: '', // 4秒定时器 time2: '', // 针对投前产业布局分析的定时器 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); }, 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.chinaEchartsFun() this.initChartR1(); this.initChartR2(); }) }, 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: 20, 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.right2Chart = 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: {}, grid: { left: "3%", right: "4%", bottom: "3%", containLabel: true, }, xAxis: [ { type: "category", data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"], }, ], yAxis: [ { type: "value", }, ], series: [ { name: "Email", type: "bar", stack: "Ad", barWidth: 14, emphasis: { focus: "series", }, itemStyle: { barBorderRadius: [15, 15, 15, 15], }, data: [120, 132, 101, 134, 90, 230, 210], }, { name: "Union Ads", type: "bar", stack: "Ad", itemStyle: { barBorderRadius: [15, 15, 15, 15], }, emphasis: { focus: "series", }, data: [220, 182, 191, 234, 290, 330, 310], }, { name: "Video Ads", type: "bar", stack: "Ad", itemStyle: { barBorderRadius: [15, 15, 15, 15], }, emphasis: { focus: "series", }, data: [150, 232, 201, 154, 190, 330, 410], }, ], }; that.right2Chart.setOption(option); }, clickItem(index) { console.log(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 }, 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 () { 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) }); } } 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: '#404a59', 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 } }, tooltip: { trigger: 'item', formatter: function (params) { console.log(params, '??????????') } }, roam: false, itemStyle: { normal: { // borderColor: 'rgba(147, 235, 248, 1)', 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 } }, 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, // 不超出当前表 formatter: function (params) { console.log(params) return `
${params.name}
项目数量:26
投资总额:180亿
` }, }, 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', coordinateSystem: 'geo', data: convertedData[0], symbolSize: function (val) { return Math.max(val[2] / 500, 8); }, showEffectOn: 'render', rippleEffect: { brushType: 'stroke' }, hoverAnimation: true, label: { normal: { formatter: '{b}', position: 'right', show: true, fontSize: '30', color: '#fff' } }, itemStyle: { normal: { color: '#ffc809', shadowBlur: 50, shadowColor: '#ffc809', fontSize: "500", } }, zlevel: 1 } ] }; 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; } let that = this // 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, }); this.shanxiMap.setOption(option) }, } })