let app = new Vue({ el: '#app', data () { return { echartEnterpriseShow: false, // 企业额度分析控制 mapChart: '',//地图专用echarts chartCarousel: '',//做大屏轮播专用echarts mapTipShow: false, echartSingleTipShow: false, echartDoubleTipShow: false, backShow: false, titleUrl: '', titleName: '', yellowCount: 0, // 黄圈轮播参数 yellowPosition: 40,// 黄圈悬浮窗位置参数 echartR1Fd: true, echartR2Fd: true, echartR3Fd: true, echarts1Time: 16000, time: '', timer: '', timer2: '', totleLimit: left4[0], totleLimit2: left4[1], totleLimit3: left4[2], totleLimit4: left4[3], totleLimit5: left4[4], center1:center1, showTip2: false, showTip3: false, list: [], count: 0, countType: 0, mapName: 'shanxi', geoCoordMap: {}, storageRecordConfig2: center9, titleList: right1, centerLeftList: right3, storageRecordConfig: left11 } }, created () { this.time = formatDate() this.timer = setInterval(() => { this.time = formatDate() }, 1000) this.timer2 = setInterval(() => { this.changeYellow() }, 2000) }, beforeDestroy () { if (this.timer) { clearInterval(this.timer); } if (this.timer2) { clearInterval(this.timer2); } }, mounted () { setTimeout(() => { this.initChartL1() this.initChartL2() this.initChartL3() this.initChartL4() this.initChartL5() this.initChartL6() this.initChartL7() this.initChartL8() this.initChartL10() this.initChartL11() this.changeTopColor() // 大屏二 this.initChartC1() this.initChartC2() this.initChartC3() this.initChartC4() this.initChinaChart() this.initProjectList() // 大屏三 this.initChartR1() this.initChartR2() this.initChartR3() this.initChartR4() this.initChartR5() this.changeYellow() }) }, methods: { // 回到中国地图 backChina () { this.backShow = false this.mapChart.dispose() setTimeout(() => { this.initChinaChart() }); }, // 去项目看板 goLookBoard (e) { console.log(e, '?????') }, // 单个柱状图的弹窗 showChartLTipSingle (e) { this.closeTap() this.titleName = e this.echartSingleTipShow = true setTimeout(() => { this.initChartLTip() }) }, // 两个柱状图的弹窗 showChartLTipDouble (e) { this.titleName = e this.echartDoubleTipShow = true setTimeout(() => { this.initChartLTip2() this.initChartLTip3() }) }, initChartLTip () { let myChart = echarts.init(document.getElementById("echartSingleTip")); let option = { grid: { top: 40, right: 0, left: 60, bottom: 70, }, tooltip: { show: true, trigger: "axis", axisPointer: { // 坐标轴指示器,坐标轴触发有效 type: "shadow", // 默认为直线,可选为:'line' | 'shadow' }, textStyle: { color: '#FFF', // 文字的颜色 fontSize: '20', // 文字字体大小 }, }, xAxis: { data: ["山西焦煤", "晋能控股", "华阳新材", "潞安化工", "华新燃气", "太重集团", "国际能源", "华远陆港", "水控集团", "文旅集团", "交控集团", '航产集团', '山西建投', '汾酒集团', '大地控股', '云时代', '华舰体育', '神农科技'], axisTick: { show: false, }, // x轴的字体颜色 axisLabel: { rotate: 40, textStyle: { color: "white", fontSize: '20' }, }, //y轴线的颜色以及宽度 axisLine: { show: true, lineStyle: { color: "#1E5389", width: 1, type: "solid", }, }, }, yAxis: { name: '亿元', nameTextStyle: {//y轴上方单位的颜色 color: '#fff', fontSize: '20' }, axisTick: { lineStyle: { color: "#18416F", }, }, // y轴的字体颜色 axisLabel: { textStyle: { color: "white", fontSize: '20' }, }, splitLine: { show: true, lineStyle: { color: "#204561", width: 1, type: "dotted", }, }, //y轴线的颜色以及宽度 axisLine: { show: true, lineStyle: { color: "#1E5389", width: 1, type: "solid", }, }, }, series: [ // { // name: "2022年额度", // type: "bar", // data: [263.23, 402.18, 73.28, 144.80, 25.56, 8.23, 0, 12.97, 8.56, -1.72, 0, 0, 0, 76.90, 5.03, 9.14, 0, 0], // showBackground: false, // backgroundStyle: { // color: "#18416F", // }, // barWidth: "10%", // itemStyle: { // barBorderRadius: [10, 10, 0, 0], // color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [ // { // offset: 0, // color: '#082550', // }, // { // offset: 1, // color: '#69c0ff', // }, // ]), // }, // }, { name: "2023年额度", type: "bar", data: [359.91, 400.49, 117.65, 148.96, 34.84, 17.79, 26.15, 26.18, 16.83, 0.00, 43.49, 0.00, 43.39, 76.53, 5.05, 8.59, 0.00, 0.28], showBackground: false, backgroundStyle: { color: "#18416F", }, barWidth: "30%", itemStyle: { // barBorderRadius: [10, 10, 0, 0], color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [ { offset: 0, color: '#082550', }, { offset: 1, color: '#957DFF', }, ]), }, }, ], legend: { // data: ["2022年额度", "2023年额度"], data: ["2023年额度"], textStyle: { // 图列内容样式 color: "#fff", // 字体颜色 fontSize: "20", }, right: 'center', y: 5, icon: "roundRect", // 小图标的宽高 itemHeight: 5, }, }; tools.loopShowTooltip(myChart, option, { nterval: 2000, loopSeries: true, }) let that = this myChart.on('click', function (param) { window.location.href = './investHomeChild.html?type=2' }) myChart.setOption(option); }, initChartLTip2 () { let myChart = echarts.init(document.getElementById("echartSingleTip2")); let option = { grid: { top: 35, right: 0, left: 60, bottom: 50, }, tooltip: { show: true, trigger: "axis", axisPointer: { // 坐标轴指示器,坐标轴触发有效 type: "shadow", // 默认为直线,可选为:'line' | 'shadow' }, textStyle: { color: '#FFF', // 文字的颜色 fontSize: '20', // 文字字体大小 }, }, xAxis: { data: ["山西焦煤", "晋能控股", "华阳新材", "潞安化工", "华新燃气", "太重集团", "国际能源", "华远陆港", "水控集团", "文旅集团", "交控集团", '航产集团', '山西建投', '汾酒集团', '大地控股', '云时代', '华舰体育', '神农科技'], axisTick: { show: false, }, // x轴的字体颜色 axisLabel: { rotate: 40, textStyle: { color: "white", fontSize: '15' }, }, //y轴线的颜色以及宽度 axisLine: { show: true, lineStyle: { color: "#1E5389", width: 1, type: "solid", }, }, }, yAxis: { name: '亿元', nameTextStyle: {//y轴上方单位的颜色 color: '#fff', fontSize: '15' }, axisTick: { lineStyle: { color: "#18416F", }, }, // y轴的字体颜色 axisLabel: { textStyle: { color: "white", fontSize: '15' }, }, splitLine: { show: true, lineStyle: { color: "#204561", width: 1, type: "dotted", }, }, //y轴线的颜色以及宽度 axisLine: { show: true, lineStyle: { color: "#1E5389", width: 1, type: "solid", }, }, }, series: [ // { // name: "2022年额度", // type: "bar", // data: [263.23, 402.18, 73.28, 144.80, 25.56, 8.23, 0, 12.97, 8.56, -1.72, 0, 0, 0, 76.90, 5.03, 9.14, 0, 0], // showBackground: false, // backgroundStyle: { // color: "#18416F", // }, // barWidth: "10%", // itemStyle: { // barBorderRadius: [10, 10, 0, 0], // color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [ // { // offset: 0, // color: '#082550', // }, // { // offset: 1, // color: '#69c0ff', // }, // ]), // }, // }, { name: "2023年额度", type: "bar", data: [359.91, 400.49, 117.65, 148.96, 34.84, 17.79, 26.15, 26.18, 16.83, 0.00, 43.49, 0.00, 43.39, 76.53, 5.05, 8.59, 0.00, 0.28], showBackground: false, backgroundStyle: { color: "#18416F", }, barWidth: "30%", itemStyle: { // barBorderRadius: [10, 10, 0, 0], color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [ { offset: 0, color: '#082550', }, { offset: 1, color: '#957DFF', }, ]), }, }, ], legend: { // data: ["2022年额度", "2023年额度"], data: ["2023年额度"], textStyle: { // 图列内容样式 color: "#fff", // 字体颜色 fontSize: "20", }, right: 'center', y: 5, icon: "roundRect", // 小图标的宽高 itemHeight: 5, }, }; tools.loopShowTooltip(myChart, option, { nterval: 2000, loopSeries: true, }) let that = this myChart.on('click', function (param) { window.location.href = './investHomeChild.html?type=2' }) myChart.setOption(option); }, initChartLTip3 () { let myChart = echarts.init(document.getElementById("echartSingleTip3")); let option = { grid: { top: 35, right: 0, left: 60, bottom: 50, }, tooltip: { show: true, trigger: "axis", axisPointer: { // 坐标轴指示器,坐标轴触发有效 type: "shadow", // 默认为直线,可选为:'line' | 'shadow' }, textStyle: { color: '#FFF', // 文字的颜色 fontSize: '20', // 文字字体大小 }, }, xAxis: { data: ["山西焦煤", "晋能控股", "华阳新材", "潞安化工", "华新燃气", "太重集团", "国际能源", "华远陆港", "水控集团", "文旅集团", "交控集团", '航产集团', '山西建投', '汾酒集团', '大地控股', '云时代', '华舰体育', '神农科技'], axisTick: { show: false, }, // x轴的字体颜色 axisLabel: { rotate: 40, textStyle: { color: "white", fontSize: '15' }, }, //y轴线的颜色以及宽度 axisLine: { show: true, lineStyle: { color: "#1E5389", width: 1, type: "solid", }, }, }, yAxis: { name: '个', nameTextStyle: {//y轴上方单位的颜色 color: '#fff', fontSize: '15' }, axisTick: { lineStyle: { color: "#18416F", }, }, // y轴的字体颜色 axisLabel: { textStyle: { color: "white", fontSize: '15' }, }, splitLine: { show: true, lineStyle: { color: "#204561", width: 1, type: "dotted", }, }, //y轴线的颜色以及宽度 axisLine: { show: true, lineStyle: { color: "#1E5389", width: 1, type: "solid", }, }, }, series: [ // { // name: "2022年额度", // type: "bar", // data: [263.23, 402.18, 73.28, 144.80, 25.56, 8.23, 0, 12.97, 8.56, -1.72, 0, 0, 0, 76.90, 5.03, 9.14, 0, 0], // showBackground: false, // backgroundStyle: { // color: "#18416F", // }, // barWidth: "10%", // itemStyle: { // barBorderRadius: [10, 10, 0, 0], // color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [ // { // offset: 0, // color: '#082550', // }, // { // offset: 1, // color: '#69c0ff', // }, // ]), // }, // }, { name: "2023年额度", type: "bar", data: [359.91, 400.49, 117.65, 148.96, 34.84, 17.79, 26.15, 26.18, 16.83, 0.00, 43.49, 0.00, 43.39, 76.53, 5.05, 8.59, 0.00, 0.28], showBackground: false, backgroundStyle: { color: "#18416F", }, barWidth: "30%", itemStyle: { // barBorderRadius: [10, 10, 0, 0], color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [ { offset: 0, color: '#082550', }, { offset: 1, color: '#69c0ff', }, ]), }, }, ], legend: { // data: ["2022年额度", "2023年额度"], data: ["2023年额度"], textStyle: { // 图列内容样式 color: "#fff", // 字体颜色 fontSize: "20", }, right: 'center', y: 5, icon: "roundRect", // 小图标的宽高 itemHeight: 5, }, }; tools.loopShowTooltip(myChart, option, { nterval: 2000, loopSeries: true, }) let that = this myChart.on('click', function (param) { window.location.href = './investHomeChild.html?type=2' }) myChart.setOption(option); }, closeTap () { this.echartEnterpriseShow = false this.mapTipShow = false this.echartSingleTipShow = false this.echartDoubleTipShow = false }, //点击弹窗左半部分 popLeftClick () { if (this.titleUrl == '2.png') { this.titleUrl = '3.png' } else if (this.titleUrl == '7.png') { this.titleUrl = '8.png' } else if (this.titleUrl == '3.png') { this.titleUrl = '2.png' } else if (this.titleUrl == '8.png') { this.titleUrl = '7.png' } else if (this.titleUrl == '5.png') { this.titleUrl = '2.png' } else if (this.titleUrl == '10.png') { this.titleUrl = '7.png' } }, //点击弹窗右半部分 poprightClick () { if (this.titleUrl == '2.png') { this.titleUrl = '5.png' } else if (this.titleUrl == '7.png') { this.titleUrl = '10.png' } else if (this.titleUrl == '5.png') { this.titleUrl = '2.png' } else if (this.titleUrl == '10.png') { this.titleUrl = '7.png' } else if (this.titleUrl == '3.png') { this.titleUrl = '2.png' } else if (this.titleUrl == '8.png') { this.titleUrl = '7.png' } }, // 标题弹窗 showTitlePop (e, name) { this.closeTap() this.titleUrl = e this.titleName = name this.mapTipShow = true }, changeYellow () { this.titleList.forEach((item, index) => { this.$set(this.titleList[index], 'type', 1) }) this.$set(this.titleList[this.yellowCount], 'type', 2) if (this.yellowCount == 14) { this.yellowCount = 0 this.yellowPosition += 315 } else { if (this.yellowCount != 0) { this.yellowPosition += 315 } else { this.yellowPosition = 40 } this.yellowCount += 2 } }, numFormat (value) { if (!value) return '0' // var intPart = Number(value).toFixed(0) // 获取整数部分 var intPart = parseInt(value)// 获取整数部分 var intPartFormat = intPart.toString().replace(/(\d)(?=(?:\d{3})+$)/g, '$1,') // 将整数部分逢三一断 var floatPart = '.00' // 预定义小数部分 var value2Array = value.toString().split('.') // =2表示数据有小数位 if (value2Array.length === 2) { floatPart = value2Array[1].toString() // 拿到小数部分 if (floatPart.length === 1) { // 补0 return intPartFormat + '.' + floatPart + '0' } else { return intPartFormat + '.' + floatPart } } else { return intPartFormat } }, changeTopColor () { this.list = document.getElementsByClassName('row-item') for (var i = 0; i < this.list.length; i++) { if (i == 1) { this.list[i].classList.add('light') } else { this.list[i].classList.remove('light') } } this.initChartL9() }, scrollChange (index) { if (index == 18) { this.count = -1 } else { this.count = index } if (this.count > 12 && this.count != 18) { this.countType = 1 } else { this.countType = 0 } for (var i = 0; i < this.list.length; i++) { if (i == 2) { this.list[i].classList.add('light') } else { this.list[i].classList.remove('light') } } this.chartCarousel.dispose() this.initChartL9() }, initChartBall () { let myChart = echarts.init(this.$refs['echartBall']) var value = 0.1463; var data = [value]; let option = { backgroundColor: 'transparent', title: [ { // text: '总额度285.48亿', // formatter: `总额度285.48亿`, x: '37%', y: '80%', textStyle: { fontSize: 24, fontWeight: 'bold', color: '#2CB7E0', lineHeight: 16, textAlign: 'center', }, } ], series: [ { type: 'liquidFill', radius: '70%', center: ['50%', '40%'], color: [ { type: 'linear', x: 0, y: 0, x2: 0, y2: 1, colorStops: [ { offset: 0, color: '#446bf5', }, { offset: 1, color: '#2ca3e2', }, ], globalCoord: false, }, ], data: [value, value], // data个数代表波浪数 backgroundStyle: { borderWidth: 1, color: 'RGBA(51, 66, 127, 0.7)', }, label: { normal: { formatter: function (data) { return (data.value * 100).toFixed(2) + '%' }, textStyle: { fontSize: 30, color: '#fff', }, }, }, outline: { // show: false borderDistance: 0, itemStyle: { borderWidth: 2, borderColor: 'transparent', }, }, }, ], } myChart.setOption(option) }, initChartL1 () { let myChart = echarts.init(this.$refs['echartL1']) var value = left2[0]; let option = { backgroundColor: 'transparent', title: [ { // text: '总额度285.48亿', // formatter: `总额度285.48亿`, x: '37%', y: '80%', textStyle: { fontSize: 24, fontWeight: 'bold', color: '#2CB7E0', lineHeight: 16, textAlign: 'center', }, } ], series: [ { type: 'liquidFill', radius: '70%', center: ['50%', '40%'], color: [ { type: 'linear', x: 0, y: 0, x2: 0, y2: 1, colorStops: [ { offset: 0, color: '#446bf5', }, { offset: 1, color: '#2ca3e2', }, ], globalCoord: false, }, ], data: [value, value], // data个数代表波浪数 backgroundStyle: { borderWidth: 1, color: 'RGBA(51, 66, 127, 0.7)', }, label: { normal: { formatter: function (data) { return (data.value * 100).toFixed(2) + '%' }, textStyle: { fontSize: 30, color: '#fff', }, }, }, outline: { // show: false borderDistance: 0, itemStyle: { borderWidth: 2, borderColor: 'transparent', }, }, }, ], } myChart.setOption(option) }, initChartL2 () { var chartData = left5 var timer = null; var i = 0; let that = this var option = { colors: ['#5783ab', '#1a5389', '#a79c57', '#cc8c29', '#91a65f', '#383062', '#034a39'], chart: { type: 'pie', backgroundColor: 'rgba(0,0,0,0)', options3d: { enabled: true, alpha: 45, //beta: 0 }, events: { // load,图表加载完成时触发 load: function () { var chart = this; var points = chart.series[0].points; var len = points.length; timer && clearInterval(timer); timer = setInterval(function () { autoTooltip(points[i]); chartData.forEach((item, index) => { item.sliced = false item.selected = false if (index == i) { item.sliced = true item.selected = true } }) chart.update({ series: [{ type: 'pie', name: '占比', point: { events: { click: function (e) { that.showChartLTipDouble(e.point.name) } } }, data: chartData }] }) i++; if (i === len) { i = 0; chartData.forEach((item, index) => { item.sliced = false item.selected = false }) chart.update({ series: [{ type: 'pie', name: '占比', point: { events: { click: function (e) { console.log(e) } } }, data: chartData }] }) } }, 2000); }, legendItemClick: function (event) { console.log(event); return true; } } }, credits: { enabled: false //去掉hightchats水印 }, legend: { // labelFormatter: function() { // return 123; // }, align: 'right',//横向位置 verticalAlign: 'middle', // 纵向位置 layout: "vertical",//横排还是竖排 x: -30, y: 50, symbolWidth: 50, itemStyle: { fontSize: '20px', color: '#fff', x: 20 }, }, title: { text: '主辅业计划占比', style: { color: '#fff', fontSize: 22, }, align: 'center', verticalAlign: "bottom", x: -80 }, tooltip: { crosshairs: false, backgroundColor: 'rgba(0,0,0,0.5)', // positioner: function(e){ // console.log(e, this) // }, useHTML: false, //开启html模式 style: { color: '#fff', fontSize: '20' }, formatter: function (e) { let num = chartData[this.colorIndex].num this.percentage = this.percentage.toFixed(2) //Math.round(this.percentage) return `${this.key}:${this.percentage}%
${this.y}亿,${num}个` }, //pointFormat: }, plotOptions: { pie: { allowPointSelect: true, showInLegend: true, // 图例 cursor: 'pointer', size: 220, innerSize: 150, //环形图中间空白,0为饼图 depth: 25, //立体高度 slicedOffset: 21, //动画距离 dataLabels: { enabled: false, // 是否展示指示线 format: '{point.name}: {point.percentage}' } }, }, series: [{ type: 'pie', name: '占比', // center: ['70%', '50%'], point: { events: { click: function (e) { //点击事件 that.showChartLTipDouble(e.point.name) }, mouseOver: function (e) { //鼠标移入停止轮播并且找到移入的当前数据设为选中 //console.log(e) chartData.forEach((item, index) => { item.sliced = false item.selected = false }) chartData[e.target.index].sliced = true chartData[e.target.index].selected = true chart.update({ series: [{ type: 'pie', name: '占比', point: { events: { click: function (e) { that.showChartLTipDouble(e.point.name) } } }, data: chartData }] }) timer && clearInterval(timer); }, mouseOut: function () { // 鼠标移出后需要继续执行轮播 var points = chart.series[0].points; var len = points.length; timer && clearInterval(timer); timer = setInterval(function () { autoTooltip(points[i]); chartData.forEach((item, index) => { item.sliced = false item.selected = false if (index == i) { item.sliced = true item.selected = true } }) chart.update({ series: [{ type: 'pie', name: '占比', point: { events: { click: function (e) { that.showChartLTipDouble(e.point.name) } } }, data: chartData }] }) i++; if (i === len) { i = 0; chartData.forEach((item, index) => { item.sliced = false item.selected = false }) chart.update({ series: [{ type: 'pie', name: '占比', point: { events: { click: function (e) { that.showTip3 = true that.showChartLTipDouble(e.point.name) } } }, data: chartData }] }) } }, 2000); } } }, data: chartData }] } var chart = Highcharts.chart('echartL2', option); function autoTooltip (point) { chart.tooltip.refresh(point); } }, initChartL3 () { var chartData = left6 var timer = null; var i = 0; let that = this var chart = Highcharts.chart('echartL3', { colors: ['#5783ab', '#1a5389', '#a79c57', '#cc8c29', '#91a65f', '#383062', '#034a39'], chart: { type: 'pie', backgroundColor: 'rgba(0,0,0,0)', options3d: { enabled: true, alpha: 45, //beta: 0 }, events: { // load,图表加载完成时触发 load: function () { var chart = this; var points = chart.series[0].points; var len = points.length; timer && clearInterval(timer); timer = setInterval(function () { autoTooltip(points[i]); chartData.forEach((item, index) => { item.sliced = false item.selected = false if (index == i) { item.sliced = true item.selected = true } }) chart.update({ series: [{ type: 'pie', name: '占比', point: { events: { click: function (e) { that.showChartLTipDouble(e.point.name) } } }, data: chartData }] }) i++; if (i === len) { i = 0; chartData.forEach((item, index) => { item.sliced = false item.selected = false }) chart.update({ series: [{ type: 'pie', name: '占比', point: { events: { click: function (e) { console.log(e) } } }, data: chartData }] }) } }, 2000); }, legendItemClick: function (event) { that.showChartLTipDouble(e.point.name) return true; } } }, credits: { enabled: false //去掉hightchats水印 }, legend: { // labelFormatter: function() { // return 123; // }, align: 'right',//横向位置 verticalAlign: 'middle', // 纵向位置 layout: "vertical",//横排还是竖排 x: -30, y: 50, symbolWidth: 50, itemDistance: 50, itemStyle: { fontSize: '20px', color: '#fff', x: 20 }, }, title: { text: '项目管理类型', style: { color: '#fff', fontSize: 22, }, align: 'center', verticalAlign: "bottom", x: -120 }, tooltip: { crosshairs: true, backgroundColor: 'rgba(0,0,0,0.5)', // positioner: function(e){ // console.log(e, this) // }, useHTML: false, //开启html模式 style: { color: '#fff', fontSize: '20' }, formatter: function (e) { //console.log(this) let num = chartData[this.colorIndex].num this.percentage = this.percentage.toFixed(2) //Math.round(this.percentage) return `${this.key}:${this.percentage}%
${this.y}亿,${num}个` }, //pointFormat: }, plotOptions: { pie: { allowPointSelect: true, showInLegend: true, // 图例 cursor: 'pointer', size: 220, innerSize: 150, //环形图中间空白,0为饼图 depth: 25, //立体高度 slicedOffset: 21, //动画距离 dataLabels: { enabled: false, // 是否展示指示线 format: '{point.name}: {point.percentage}' } }, }, series: [{ type: 'pie', name: '占比', // center: ['70%', '50%'], point: { events: { click: function (e) { //点击事件 that.showChartLTipDouble(e.point.name) }, mouseOver: function (e) { //鼠标移入停止轮播并且找到移入的当前数据设为选中 //console.log(e) chartData.forEach((item, index) => { item.sliced = false item.selected = false }) chartData[e.target.index].sliced = true chartData[e.target.index].selected = true chart.update({ series: [{ type: 'pie', name: '占比', point: { events: { click: function (e) { that.showChartLTipDouble(e.point.name) } } }, data: chartData }] }) timer && clearInterval(timer); }, mouseOut: function () { // 鼠标移出后需要继续执行轮播 var points = chart.series[0].points; var len = points.length; timer && clearInterval(timer); timer = setInterval(function () { autoTooltip(points[i]); chartData.forEach((item, index) => { item.sliced = false item.selected = false if (index == i) { item.sliced = true item.selected = true } }) chart.update({ series: [{ type: 'pie', name: '占比', point: { events: { click: function (e) { that.showChartLTipDouble(e.point.name) } } }, data: chartData }] }) i++; if (i === len) { i = 0; chartData.forEach((item, index) => { item.sliced = false item.selected = false }) chart.update({ series: [{ type: 'pie', name: '占比', point: { events: { click: function (e) { console.log(e) } } }, data: chartData }] }) } }, 2000); } } }, data: chartData }] }); function autoTooltip (point) { chart.tooltip.refresh(point); } }, initChartL4 () { let myChart = echarts.init(document.getElementById("echartL4")); let option = { grid: { top: 45, right: 0, left: 60, bottom: 60, }, tooltip: { show: true, trigger: "axis", axisPointer: { // 坐标轴指示器,坐标轴触发有效 type: "shadow", // 默认为直线,可选为:'line' | 'shadow' }, textStyle: { color: '#FFF', // 文字的颜色 fontSize: '20', // 文字字体大小 }, }, xAxis: { data: commonCompany, axisTick: { show: false, }, // x轴的字体颜色 axisLabel: { rotate: 40, textStyle: { color: "white", fontSize: '15' }, }, //y轴线的颜色以及宽度 axisLine: { show: true, lineStyle: { color: "#1E5389", width: 1, type: "solid", }, }, }, yAxis: { name: '亿元', nameTextStyle: {//y轴上方单位的颜色 color: '#fff', }, axisTick: { lineStyle: { color: "#18416F", }, }, // y轴的字体颜色 axisLabel: { textStyle: { color: "white", fontSize: '15' }, }, splitLine: { show: true, lineStyle: { color: "#204561", width: 1, type: "dotted", }, }, //y轴线的颜色以及宽度 axisLine: { show: true, lineStyle: { color: "#1E5389", width: 1, type: "solid", }, }, nameTextStyle: { color: '#fff', fontSize: 15, }, }, series: [ { name: "2023年额度", type: "bar", data: left3[0], showBackground: false, backgroundStyle: { color: "#18416F", }, barWidth: "30%", itemStyle: { // barBorderRadius: [10, 10, 0, 0], color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [ { offset: 0, color: '#082550', }, { offset: 1, color: '#957DFF', }, ]), }, }, ], legend: { // data: ["2022年额度", "2023年额度"], data: ["2023年额度"], textStyle: { // 图列内容样式 color: "#fff", // 字体颜色 fontSize: "20", }, right: 'center', y: 5, icon: "roundRect", // 小图标的宽高 itemHeight: 5, }, }; tools.loopShowTooltip(myChart, option, { nterval: 2000, loopSeries: true, }) let that = this myChart.on('click', function (param) { that.titleName = param.name that.echartEnterpriseShow = true setTimeout(() => { that.initChartBall() }); }) myChart.setOption(option); }, initChartL5 () { var chartData = left7 var timer = null; var i = 0; let that = this var option = { colors: ['#5783ab', '#1a5389', '#a79c57', '#cc8c29', '#91a65f', '#383062', '#034a39'], chart: { type: 'pie', backgroundColor: 'rgba(0,0,0,0)', options3d: { enabled: true, alpha: 45, //beta: 0 }, events: { // load,图表加载完成时触发 load: function () { var chart = this; var points = chart.series[0].points; var len = points.length; timer && clearInterval(timer); timer = setInterval(function () { autoTooltip(points[i]); chartData.forEach((item, index) => { item.sliced = false item.selected = false if (index == i) { item.sliced = true item.selected = true } }) chart.update({ series: [{ type: 'pie', name: '占比', point: { events: { click: function (e) { that.showChartLTipDouble(e.point.name) } } }, data: chartData }] }) i++; if (i === len) { i = 0; } }, 2000); }, legendItemClick: function (event) { console.log(event); return true; } } }, credits: { enabled: false //去掉hightchats水印 }, legend: { // labelFormatter: function() { // return 123; // }, align: 'right',//横向位置 verticalAlign: 'middle', // 纵向位置 layout: "vertical",//横排还是竖排 x: -30, y: 50, symbolWidth: 50, itemDistance: 50, itemStyle: { fontSize: '20px', color: '#fff', x: 20 }, }, title: { text: '传统产业分析', style: { color: '#fff', fontSize: 22, }, align: 'center', verticalAlign: "bottom", x: -120 }, tooltip: { crosshairs: true, backgroundColor: 'rgba(0,0,0,0.5)', // positioner: function(e){ // console.log(e, this) // }, useHTML: false, //开启html模式 style: { color: '#fff', fontSize: '20' }, formatter: function (e) { //console.log(this) let num = chartData[this.colorIndex].num this.percentage = this.percentage.toFixed(2) //Math.round(this.percentage) return `${this.key}:${this.percentage}%
${this.y}亿,${num}个` }, //pointFormat: }, plotOptions: { pie: { allowPointSelect: true, showInLegend: true, // 图例 cursor: 'pointer', size: 220, innerSize: 150, //环形图中间空白,0为饼图 depth: 25, //立体高度 slicedOffset: 21, //动画距离 dataLabels: { enabled: false, // 是否展示指示线 format: '{point.name}: {point.percentage}' } }, }, series: [{ type: 'pie', name: '占比', //center: ['35%','50%'], point: { events: { click: function (e) { //点击事件 that.showChartLTipDouble(e.point.name) }, mouseOver: function (e) { //鼠标移入停止轮播并且找到移入的当前数据设为选中 //console.log(e) chartData.forEach((item, index) => { item.sliced = false item.selected = false }) chartData[e.target.index].sliced = true chartData[e.target.index].selected = true chart.update({ series: [{ type: 'pie', name: '占比', point: { events: { click: function (e) { that.showChartLTipDouble(e.point.name) } } }, data: chartData }] }) timer && clearInterval(timer); }, mouseOut: function () { // 鼠标移出后需要继续执行轮播 var points = chart.series[0].points; var len = points.length; timer && clearInterval(timer); timer = setInterval(function () { autoTooltip(points[i]); chartData.forEach((item, index) => { item.sliced = false item.selected = false if (index == i) { item.sliced = true item.selected = true } }) chart.update({ series: [{ type: 'pie', name: '占比', point: { events: { click: function (e) { that.showChartLTipDouble(e.point.name) } } }, data: chartData }] }) i++; if (i === len) { i = 0; } }, 2000); } } }, data: chartData }] } var chart = Highcharts.chart('echartL5', option); function autoTooltip (point) { chart.tooltip.refresh(point); } }, initChartL6 () { var chartData = left8 var timer = null; var i = 0; let that = this var option = { colors: ['#5783ab', '#1a5389', '#a79c57', '#cc8c29', '#91a65f', '#383062', '#034a39', '#5783ab'], chart: { type: 'pie', backgroundColor: 'rgba(0,0,0,0)', options3d: { enabled: true, alpha: 45, //beta: 0 }, events: { // load,图表加载完成时触发 load: function () { var chart = this; var points = chart.series[0].points; var len = points.length; timer && clearInterval(timer); timer = setInterval(function () { autoTooltip(points[i]); chartData.forEach((item, index) => { item.sliced = false item.selected = false if (index == i) { item.sliced = true item.selected = true } }) chart.update({ series: [{ type: 'pie', name: '占比', point: { events: { click: function (e) { that.showChartLTipDouble(e.point.name) } } }, data: chartData }] }) i++; if (i === len) { i = 0; } }, 2000); }, legendItemClick: function (event) { console.log(event); return true; } } }, credits: { enabled: false //去掉hightchats水印 }, legend: { // labelFormatter: function() { // return 123; // }, align: 'right',//横向位置 verticalAlign: 'middle', // 纵向位置 layout: "vertical",//横排还是竖排 x: -30, y: 30, symbolWidth: 50, itemDistance: 50, itemStyle: { fontSize: '20px', color: '#fff', x: 20 }, }, title: { text: '战略性新兴产业', style: { color: '#fff', fontSize: 22, }, align: 'center', verticalAlign: "bottom", x: -120 }, tooltip: { crosshairs: true, backgroundColor: 'rgba(0,0,0,0.5)', // positioner: function(e){ // console.log(e, this) // }, useHTML: false, //开启html模式 style: { color: '#fff', fontSize: '20' }, formatter: function (e) { //console.log(this) let num = chartData[this.colorIndex].num this.percentage = this.percentage.toFixed(2) //Math.round(this.percentage) return `${this.key}:${this.percentage}%
${this.y}亿,${num}个` }, //pointFormat: }, plotOptions: { pie: { allowPointSelect: true, showInLegend: true, // 图例 cursor: 'pointer', size: 220, innerSize: 150, //环形图中间空白,0为饼图 depth: 25, //立体高度 slicedOffset: 21, //动画距离 dataLabels: { enabled: false, // 是否展示指示线 format: '{point.name}: {point.percentage}' } }, }, series: [{ type: 'pie', name: '占比', //center: ['35%','50%'], point: { events: { click: function (e) { //点击事件 that.showChartLTipDouble(e.point.name) }, mouseOver: function (e) { //鼠标移入停止轮播并且找到移入的当前数据设为选中 //console.log(e) chartData.forEach((item, index) => { item.sliced = false item.selected = false }) chartData[e.target.index].sliced = true chartData[e.target.index].selected = true chart.update({ series: [{ type: 'pie', name: '占比', point: { events: { click: function (e) { that.showChartLTipDouble(e.point.name) } } }, data: chartData }] }) timer && clearInterval(timer); }, mouseOut: function () { // 鼠标移出后需要继续执行轮播 var points = chart.series[0].points; var len = points.length; timer && clearInterval(timer); timer = setInterval(function () { autoTooltip(points[i]); chartData.forEach((item, index) => { item.sliced = false item.selected = false if (index == i) { item.sliced = true item.selected = true } }) chart.update({ series: [{ type: 'pie', name: '占比', point: { events: { click: function (e) { that.showChartLTipDouble(e.point.name) } } }, data: chartData }] }) i++; if (i === len) { i = 0; } }, 2000); } } }, data: chartData }] } var chart = Highcharts.chart('echartL6', option); function autoTooltip (point) { chart.tooltip.refresh(point); } }, initChartL7 () { var chartData = left9 var timer = null; var i = 0; let that = this var option = { colors: ['#5783ab', '#1a5389', '#a79c57', '#cc8c29', '#91a65f', '#383062', '#034a39'], chart: { type: 'pie', backgroundColor: 'rgba(0,0,0,0)', options3d: { enabled: true, alpha: 45, //beta: 0 }, events: { // load,图表加载完成时触发 load: function () { var chart = this; var points = chart.series[0].points; var len = points.length; timer && clearInterval(timer); timer = setInterval(function () { autoTooltip(points[i]); chartData.forEach((item, index) => { item.sliced = false item.selected = false if (index == i) { item.sliced = true item.selected = true } }) chart.update({ series: [{ type: 'pie', name: '占比', point: { events: { click: function (e) { that.showChartLTipDouble(e.point.name) } } }, data: chartData }] }) i++; if (i === len) { i = 0; } }, 2000); }, legendItemClick: function (event) { console.log(event); return true; } } }, credits: { enabled: false //去掉hightchats水印 }, title: { text: '特色优势产业', style: { color: '#fff', fontSize: 22, }, align: 'center', verticalAlign: "bottom", x: -120 }, legend: { // labelFormatter: function() { // return 123; // }, align: 'right',//横向位置 verticalAlign: 'middle', // 纵向位置 layout: "vertical",//横排还是竖排 x: -50, y: 30, symbolWidth: 50, itemDistance: 50, itemStyle: { fontSize: '20px', color: '#fff', x: 20 }, }, tooltip: { crosshairs: true, backgroundColor: 'rgba(0,0,0,0.5)', // positioner: function(e){ // console.log(e, this) // }, useHTML: false, //开启html模式 style: { color: '#fff', fontSize: '20' }, formatter: function (e) { //console.log(this) let num = chartData[this.colorIndex].num this.percentage = this.percentage.toFixed(2) //Math.round(this.percentage) return `${this.key}:${this.percentage}%
${this.y}亿,${num}个` }, //pointFormat: }, plotOptions: { pie: { allowPointSelect: true, showInLegend: true, // 图例 cursor: 'pointer', size: 220, innerSize: 150, //环形图中间空白,0为饼图 depth: 25, //立体高度 slicedOffset: 21, //动画距离 dataLabels: { enabled: false, // 是否展示指示线 format: '{point.name}: {point.percentage}' } }, }, series: [{ type: 'pie', name: '占比', //center: ['35%','50%'], point: { events: { click: function (e) { //点击事件 that.showChartLTipDouble(e.point.name) }, mouseOver: function (e) { //鼠标移入停止轮播并且找到移入的当前数据设为选中 //console.log(e) chartData.forEach((item, index) => { item.sliced = false item.selected = false }) chartData[e.target.index].sliced = true chartData[e.target.index].selected = true chart.update({ series: [{ type: 'pie', name: '占比', point: { events: { click: function (e) { that.showChartLTipDouble(e.point.name) } } }, data: chartData }] }) timer && clearInterval(timer); }, mouseOut: function () { // 鼠标移出后需要继续执行轮播 var points = chart.series[0].points; var len = points.length; timer && clearInterval(timer); timer = setInterval(function () { autoTooltip(points[i]); chartData.forEach((item, index) => { item.sliced = false item.selected = false if (index == i) { item.sliced = true item.selected = true } }) chart.update({ series: [{ type: 'pie', name: '占比', point: { events: { click: function (e) { that.showChartLTipDouble(e.point.name) } } }, data: chartData }] }) i++; if (i === len) { i = 0; } }, 2000); } } }, data: chartData }] } var chart = Highcharts.chart('echartL7', option); function autoTooltip (point) { chart.tooltip.refresh(point); } }, initChartL8 () { var chartData = left10 var timer = null; var i = 0; let that = this var option = { colors: ['#5783ab', '#1a5389', '#a79c57', '#cc8c29', '#91a65f', '#383062', '#034a39'], chart: { type: 'pie', backgroundColor: 'rgba(0,0,0,0)', options3d: { enabled: true, alpha: 45, //beta: 0 }, events: { // load,图表加载完成时触发 load: function () { var chart = this; var points = chart.series[0].points; var len = points.length; timer && clearInterval(timer); timer = setInterval(function () { autoTooltip(points[i]); chartData.forEach((item, index) => { item.sliced = false item.selected = false if (index == i) { item.sliced = true item.selected = true } }) chart.update({ series: [{ type: 'pie', name: '占比', point: { events: { click: function (e) { that.showChartLTipDouble(e.point.name) } } }, data: chartData }] }) i++; if (i === len) { i = 0; } }, 2000); }, legendItemClick: function (event) { console.log(event); return true; } } }, credits: { enabled: false //去掉hightchats水印 }, title: { text: '公共基础等产业', style: { color: '#fff', fontSize: 22, }, align: 'center', verticalAlign: "bottom", x: -120 }, legend: { // labelFormatter: function() { // return 123; // }, align: 'right',//横向位置 verticalAlign: 'middle', // 纵向位置 layout: "vertical",//横排还是竖排 x: -70, y: 50, symbolWidth: 50, itemDistance: 50, itemStyle: { fontSize: '20px', color: '#fff', x: 20 }, }, tooltip: { crosshairs: true, backgroundColor: 'rgba(0,0,0,0.5)', // positioner: function(e){ // console.log(e, this) // }, useHTML: false, //开启html模式 style: { color: '#fff', fontSize: '20' }, formatter: function (e) { //console.log(this) let num = chartData[this.colorIndex].num this.percentage = this.percentage.toFixed(2) //Math.round(this.percentage) return `${this.key}:${this.percentage}%
${this.y}亿,${num}个` }, //pointFormat: }, plotOptions: { pie: { allowPointSelect: true, showInLegend: true, // 图例 cursor: 'pointer', size: 220, innerSize: 150, //环形图中间空白,0为饼图 depth: 25, //立体高度 slicedOffset: 21, //动画距离 dataLabels: { enabled: false, // 是否展示指示线 format: '{point.name}: {point.percentage}' } }, }, series: [{ type: 'pie', name: '占比', //center: ['35%','50%'], point: { events: { click: function (e) { //点击事件 that.showChartLTipDouble(e.point.name) }, mouseOver: function (e) { //鼠标移入停止轮播并且找到移入的当前数据设为选中 //console.log(e) chartData.forEach((item, index) => { item.sliced = false item.selected = false }) chartData[e.target.index].sliced = true chartData[e.target.index].selected = true chart.update({ series: [{ type: 'pie', name: '占比', point: { events: { click: function (e) { that.showChartLTipDouble(e.point.name) } } }, data: chartData }] }) timer && clearInterval(timer); }, mouseOut: function () { // 鼠标移出后需要继续执行轮播 var points = chart.series[0].points; var len = points.length; timer && clearInterval(timer); timer = setInterval(function () { autoTooltip(points[i]); chartData.forEach((item, index) => { item.sliced = false item.selected = false if (index == i) { item.sliced = true item.selected = true } }) chart.update({ series: [{ type: 'pie', name: '占比', point: { events: { click: function (e) { that.showChartLTipDouble(e.point.name) } } }, data: chartData }] }) i++; if (i === len) { i = 0; } }, 2000); } } }, data: chartData }] } var chart = Highcharts.chart('echartL8', option); function autoTooltip (point) { chart.tooltip.refresh(point); } }, initChartL9 () { this.chartCarousel = echarts.init(document.getElementById("echartL9")); option = { tooltip: { trigger: 'axis', formatter: '指标:' + '{c0}' + '
' + '发展线:' + '{c1}' + '
' + '生存线:' + '{c2}', //+ '
'+ '{a1}:{c1}' + '%', axisPointer: { type: 'shadow', }, }, grid: { top: '10%', right: '5%', left: '10%', bottom: '10%', }, xAxis: { // data: ['总投资收益率', '销售利润率', '成本费用利润率', '总资产周转率', '财务内部收益率'], data: left15[this.countType], axisLine: { show: true, //隐藏X轴轴线 lineStyle: { color: '#005094', width: 1, }, }, axisTick: { show: true, //隐藏X轴刻度 }, axisLabel: { show: true, rotate: 15, textStyle: { color: '#fff', //X轴文字颜色 fontSize: 15, }, }, }, yAxis: [ { type: 'value', splitLine: { show: true, lineStyle: { color: '#68b4dd66', type: 'dashed', }, }, axisLine: { show: false }, axisLabel: { show: true, formatter: '{value}', textStyle: { color: '#fff', fontSize: 15 }, }, nameTextStyle: { color: '#ebf8ac', fontSize: 16, }, }, ], series: [ { name: '实际值', type: 'bar', barWidth: 15, itemStyle: { normal: { color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ { offset: 0, color: '#69c0ff', }, { offset: 1, color: '#082550', }, ]), }, }, // data: [70, 52, 33, 41, 52], data: left12[this.count + 1][2] // markLine: { // symbol: ['none', 'none'], // data: [ // { // name: '生存线', // yAxis: 10, // lineStyle: { // color: '#FF8F0A', // }, // label: { // formatter: '{b}', // position: 'middle', // color: '#FF8F0A', // fontSize: 12, // }, // }, // { // name: '发展线', // yAxis: 15, // lineStyle: { // color: '#00EEA2', // }, // label: { // formatter: '{b}', // position: 'middle', // color: '#00EEA2', // fontSize: 12, // }, // }, // ], // label: { // distance: [50, 0], // }, // }, }, { name: '', type: 'line', barWidth: 15, itemStyle: { normal: { color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ { offset: 0, color: '#69c0ff', }, { offset: 1, color: 'green', }, ]), }, }, // data: [20, 30, 15, 28, 36], data: left12[this.count + 1][1] }, { name: '', type: 'line', barWidth: 15, itemStyle: { normal: { color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ { offset: 0, color: '#69c0ff', }, { offset: 1, color: 'yellow', }, ]), }, }, // data: [15, 22, 17, 33, 14], data: left12[this.count + 1][0] }, ], } let that = this this.chartCarousel.on('click', function (param) { that.titleName = param.name that.echartSingleTipShow = true setTimeout(() => { that.initChartLTip() }); }) this.chartCarousel.setOption(option) // tools.loopShowTooltip(myChart, option, { // nterval: 2000, // loopSeries: true, // }) }, initChartL10 () { let myChart = echarts.init(document.getElementById("echartL10")); let option = { title: { text: '固定资产', textStyle: { color: '#69C0FF', fontSize: 25, fontWeight: 500 }, top: '20', left: '20' }, textStyle: { color: '#fff', }, tooltip: { trigger: "axis", formatter: function (params) { var tip = params[0].axisValue + '
' + params[0].marker + params[0].data[1] + ':' + params[0].data[2] + '个,' + params[0].data[3] + '亿元' + '
' + params[1].marker + params[1].data[1] + ':' + params[1].data[2] + '个,' + params[1].data[3] + '亿元'; return tip }, textStyle: { color: '#FFF', // 文字的颜色 fontSize: '20', // 文字字体大小 }, axisPointer: { lineStyle: { type: 'dashed', width: 2, color: 'rgba(255,255,255,0.6)' }, animation: true } }, grid: { top: '10%', right: '5%', left: '15%', bottom: '6%', }, yAxis: { data: ['备案', '特别监管'], splitLine: { show: true, lineStyle: { color: '#68b4dd66', type: 'dashed', }, }, axisLine: { show: false }, axisLabel: { show: true, formatter: '{value}', textStyle: { color: '#fff', fontSize: 15, }, }, nameTextStyle: { color: '#ebf8ac', fontSize: 16, }, }, xAxis: { data: ['项目储备', '项目立项', '可研论证', '投资决策'], axisLine: { show: true, //隐藏X轴轴线 lineStyle: { color: '#005094', width: 1, }, }, axisTick: { show: false, //隐藏X轴刻度 }, axisLabel: { show: true, textStyle: { color: '#fff', //X轴文字颜色 fontSize: 15, }, }, }, series: [ { name: '特别监管', type: 'scatter', symbol: 'circle',//'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow' symbolSize: function (data) { return Math.sqrt(data[2]) * 3; }, label: { emphasis: { show: true, formatter: function (param) { return param.data[2]; }, position: 'top' } }, itemStyle: { normal: { color: '#40A9FF' } }, data: left13[0] }, { name: '备案', type: 'scatter', symbol: 'circle',//'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow' symbolSize: function (data) { return Math.sqrt(data[2]) * 3; }, label: { emphasis: { show: true, formatter: function (param) { return param.data[2]; }, position: 'top' } }, itemStyle: { normal: { color: '#45DAD1' } }, data: left13[1] }, ] } let that = this myChart.on('click', function (param) { that.showChartLTipDouble('固定资产') }) myChart.setOption(option) tools.loopShowTooltip(myChart, option, { nterval: 2000, loopSeries: true, }) }, initChartL11 () { let myChart = echarts.init(document.getElementById("echartL11")); let option = { title: { text: '股权类', textStyle: { color: '#69C0FF', fontSize: 25, fontWeight: 500 }, top: '20', left: '20' }, textStyle: { color: '#fff', }, tooltip: { trigger: "axis", formatter: function (params) { var tip = params[0].axisValue + '
' + params[0].marker + params[0].data[1] + ':' + params[0].data[2] + '个,' + params[0].data[3] + '亿元' + '
' + params[1].marker + params[1].data[1] + ':' + params[1].data[2] + '个,' + params[1].data[3] + '亿元'; return tip }, textStyle: { color: '#FFF', // 文字的颜色 fontSize: '20', // 文字字体大小 }, axisPointer: { lineStyle: { type: 'dashed', width: 2, color: 'rgba(255,255,255,0.6)' }, animation: true } }, grid: { top: '10%', right: '5%', left: '15%', bottom: '6%', }, yAxis: { data: ['备案', '特别监管'], splitLine: { show: true, lineStyle: { color: '#68b4dd66', type: 'dashed', }, }, axisLine: { show: false }, axisLabel: { show: true, formatter: '{value}', textStyle: { color: "#fff", fontSize: 15, }, }, nameTextStyle: { color: '#ebf8ac', fontSize: 16, }, }, xAxis: { data: ['项目储备', '项目立项', '可研论证', '投资决策'], axisLine: { show: true, //隐藏X轴轴线 lineStyle: { color: '#005094', width: 1, }, }, axisTick: { show: false, //隐藏X轴刻度 }, axisLabel: { show: true, textStyle: { color: '#fff', //X轴文字颜色 fontSize: 15, }, }, }, series: [ { name: '', type: 'scatter', symbol: 'circle', symbolSize: function (data) { return Math.sqrt(data[2]) * 3; }, label: { emphasis: { show: true, formatter: function (param) { return param.data[2]; }, position: 'top' } }, itemStyle: { normal: { color: '#40A9FF' } }, data: left14[0] }, { name: '', type: 'scatter', symbol: 'circle', symbolSize: function (data) { return Math.sqrt(data[2]) * 3; }, label: { emphasis: { show: true, formatter: function (param) { return param.data[2]; }, position: 'top' } }, itemStyle: { normal: { color: '#45DAD1' } }, data: left14[1] }, ] } let that = this myChart.on('click', function (param) { that.showChartLTipDouble('股权类') }) myChart.setOption(option) tools.loopShowTooltip(myChart, option, { nterval: 2000, loopSeries: true, }) }, // 大屏二 initChartC1 () { var chartData = [] var timer = null; var timer2 = null; var i = 0; center2.forEach((item, index) => { let obj = { name: item.name, y: item.value, sliced: false, selected: false, color: index == 0 ? 'rgb(243,178,119)' : index == 1 ? 'rgb(110,222,191)' : 'rgb(82,161,229)' } chartData.push(obj) }) let that = this var chart = Highcharts.chart('echartC1', { chart: { type: 'pie', backgroundColor: 'rgba(0,0,0,0)', options3d: { enabled: true, alpha: 45, //beta: 0 }, events: { // load,图表加载完成时触发 load: function () { var chart = this; var points = chart.series[0].points; var len = points.length; timer && clearInterval(timer); timer = setInterval(function () { autoTooltip(points[i]); chartData.forEach((item, index) => { item.sliced = false item.selected = false if (index == i) { item.sliced = true item.selected = true } }) chart.update({ series: [{ type: 'pie', name: '占比', point: { events: { click: function (e) { that.showChartLTipDouble(e.point.name) } } }, data: chartData }] }) i++; if (i === len) { i = 0; } }, 2000); }, legendItemClick: function (event) { console.log(event); return true; } } }, credits: { enabled: false //去掉hightchats水印 }, title: { text: null }, tooltip: { crosshairs: true, backgroundColor: 'rgba(0,0,0,0.5)', useHTML: false, //开启html模式 style: { color: '#fff', fontSize: '20' }, formatter: function (e) { //console.log(this, e) this.percentage = Math.round(this.percentage) // e.options.backgroundColor = 'rgba(0,0,0,0.5)' // e.options.style.color = '#fff' return `${this.key}:${this.percentage}%
金额:${this.y}亿` }, //pointFormat: }, legend: { layout: 'vertical', align: 'right', verticalAlign: 'bottom', itemStyle: { fontSize: '20px', color: '#fff', x: 20 } }, plotOptions: { pie: { allowPointSelect: true, showInLegend: true, // 图例 cursor: 'pointer', size: 500, innerSize: 300, //环形图中间空白,0为饼图 depth: 28, //立体高度 slicedOffset: 23, //动画距离 dataLabels: { enabled: false, // 是否展示指示线 format: '{point.name}: {point.percentage}' } }, }, series: [{ type: 'pie', name: '占比', center: ['70%', '50%'], point: { events: { click: function (e) { //点击事件 that.showChartLTipDouble(e.point.name) }, mouseOver: function (e) { //鼠标移入停止轮播并且找到移入的当前数据设为选中 //console.log(e) chartData.forEach((item, index) => { item.sliced = false item.selected = false }) chartData[e.target.index].sliced = true chartData[e.target.index].selected = true chart.update({ series: [{ type: 'pie', name: '占比', point: { events: { click: function (e) { console.log(222222) that.showChartLTipDouble(e.point.name) // if (e.point.name == '战略新兴产业') { // that.tipTitle2 = e.point.name // that.showTip2 = true // } } } }, data: chartData }] }) timer && clearInterval(timer); }, mouseOut: function () { // 鼠标移出后需要继续执行轮播 var points = chart.series[0].points; var len = points.length; timer && clearInterval(timer); timer = setInterval(function () { autoTooltip(points[i]); chartData.forEach((item, index) => { item.sliced = false item.selected = false if (index == i) { item.sliced = true item.selected = true } }) chart.update({ series: [{ type: 'pie', name: '占比', point: { events: { click: function (e) { console.log(111111) that.showChartLTipDouble(e.point.name) // if (e.point.name == '战略新兴产业') { // that.tipTitle2 = e.point.name // that.showTip2 = true // } } } }, data: chartData }] }) i++; if (i === len) { i = 0; } }, 2000); } } }, data: chartData }] }); function autoTooltip (point) { chart.tooltip.refresh(point); } }, initChartC2 () { let myChart = echarts.init(this.$refs['echartC2']) let option = { tooltip: { formatter: data => { return `${data[0].name}
${data[0].seriesName}:${data[0].value}亿
${data[1].seriesName}:${data[1].value}亿` }, trigger: 'axis', axisPointer: { type: 'cross', }, textStyle: { color: '#FFF', // 文字的颜色 fontSize: '20', // 文字字体大小 }, }, dataZoom: [ { // start: 9,//默认为@ // end: 100,//黑认认为1@0 type: "slider", show: false, // xAxisIndex: [0] handlesize: 0,//滑动条的 左右2个滑动条的大小 startValue: 5,// 初始显示值 endValue: 0,// 结束显示值 height: 10,//组件高度 left: "5%", right: "4%",//右边的距离 bottom: "25%",//底边的距离 borderColor: "#939", fillerColor: "#269cdb", borderRadius: 5, backgroundColor: "#33384b",//两边未选中的滑动条区域的额色 showDataShadow: false,//是否显示数据阴影 showDetail: false,//即拖拽时候是否显示详细数值信息 truerealtime: true,//是否实时更新 filterMode: "filter" }, { type: 'inside', show: true, start: 1, end: 100, zoomOnMouseWheel: false, //滚轮是否触发缩放 moveOnMouseMove: false, //鼠标滚轮触发滚动 } ], grid: { top: '10%', right: '3%', left: '7%', bottom: '10%', }, legend: { top: '1', right: '10', textStyle: { color: 'rgba(250,250,250,0.6)', fontSize: '15' }, }, xAxis: { data: center3.map(item => item.name), axisLine: { show: true, //隐藏X轴轴线 lineStyle: { color: '#005094', width: 1, }, }, axisTick: { show: false, //隐藏X轴刻度 }, axisLabel: { show: true, rotate: 40, textStyle: { color: '#fff',//'rgba(255,255,255,0.6)', //X轴文字颜色 fontSize: '15' }, }, }, yAxis: [ { type: 'value', name: '亿元', nameTextStyle: { color: 'rgba(255,255,255,0.6)', fontSize: '15' }, splitLine: { show: true, lineStyle: { color: '#68b4dd66', type: 'dashed', }, }, axisLine: { show: true, lineStyle: { color: '#3D7495', }, }, axisLabel: { show: true, textStyle: { color: '#fff', fontSize: '15' }, }, nameTextStyle: { color: '#fff', fontSize: 15, }, }, ], series: [ { name: '计划投资', type: 'bar', barWidth: 10, itemStyle: { normal: { color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ { offset: 0, color: '#69c0ff', }, { offset: 1, color: '#082550', }, ]), }, }, data: center3.map(item => item.value), }, { name: '实际投资', type: 'bar', barWidth: 10, itemStyle: { normal: { color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ { offset: 0, color: '#957DFF', }, { offset: 1, color: '#082550', }, ]), }, }, data: center3.map(item => item.value2), }, ], } myChart.on('click', function (param) { window.location.href = './investHomeChild.html?type=2' }) myChart.setOption(option) tools.loopShowTooltip(myChart, option, { nterval: 2000, loopSeries: true, }) let arr = center3.map(item => item.value2) this.timeOut = setInterval(function () { let startValue = myChart.getModel().option.dataZoom[0].startValue; let endValue = myChart.getModel().option.dataZoom[0].endValue; let start = myChart.getModel().option.xAxis[0].data[startValue];//起始X轴 let end = myChart.getModel().option.xAxis[0].data[endValue];//结束X轴 // 每次向后滚动一个,最后一个从头开始。 // console.log(option.dataZoom[0].endValue); if (option.dataZoom[0].endValue >= 12) { option.dataZoom[0].endValue = 5 option.dataZoom[0].startValue = 0 } else { option.dataZoom[0].endValue = option.dataZoom[0].endValue + 6 option.dataZoom[0].startValue = option.dataZoom[0].startValue + 6 } // myChart.dispatchAction({ // type: 'showTip', // seriesIndex: 0, // dataIndex: startValue +1, // }); myChart.setOption(option); }, 12000); }, convertData (data) { var res = [] for (var i = 0; i < data.length; i++) { var geoCoord = this.geoCoordMap[data[i].name] if (geoCoord) { res.push({ name: data[i].name, value: geoCoord.concat(data[i].value), }) } } return res }, initProvinceChart () { var data = center5 var moveLine = { normal: [ { fromName: '太原市', toName: '吕梁市', coords: [ [112.3352, 37.9413], [111.3574, 37.7325], ], }, { fromName: '太原市', toName: '忻州市', coords: [ [112.3352, 37.9413], [112.4561, 38.8971], ], }, { fromName: '太原市', toName: '临汾市', coords: [ [112.3352, 37.9413], [111.4783, 36.1615], ], }, { fromName: '太原市', toName: '阳泉市', coords: [ [112.3352, 37.9413], [113.4778, 38.0951], ], }, { fromName: '太原市', toName: '晋中市', coords: [ [112.3352, 37.9413], [112.7747, 37.37], ], }, { fromName: '太原市', toName: '运城市', coords: [ [112.3352, 37.9413], [111.1487, 35.2002], ], }, { fromName: '太原市', toName: '大同市', coords: [ [112.3352, 37.9413], [113.7854, 39.8035], ], }, { fromName: '太原市', toName: '晋城市', coords: [ [112.3352, 37.9413], [112.7856, 35.6342], ], }, { fromName: '太原市', toName: '长治市', coords: [ [112.3352, 37.9413], [112.8625, 36.4746], ], }, { fromName: '太原市', toName: '朔州市', coords: [ [112.3352, 37.9413], [113.0713, 39.6991], ], }, ], } /*获取地图数据*/ this.mapChart = echarts.init(this.$refs['echarts-map']) echarts.registerMap('shanxi', { type: 'FeatureCollection', features: [ { type: 'Feature', id: '1409', properties: { name: '忻州市', cp: [112.4561, 38.8971], childNum: 14 }, geometry: { type: 'Polygon', coordinates: [ '@@Vx@lnbn¦WlnnUšmš°š²VšV‚VVVnUn„ºlz@l„„@Jƒ@kXWVXl@Lƒa@„ƒKUL„ŽlbnKlLnK‚LnKÆXn°šbVV@bUVl°Un@LnaVJUbW@UX²l‚@ČwlVVIšWnkÆa°„„anV‚Kn°™UW¯@™aVUVk@Un@„aV@ValwUanmWU„k@WVUUanaVwnLVl°@nk@mVU@UVK@w„LVKVU@ƒ„K@UUKVUV@@bnL„a‚V„aôšlIXmlKX_°KVV@bVV„@šzV`kblI„V„Ul‚šL@bnV@V„Ċll„„VlIXW@k„a‚U²blKšVnIlJ„albXXlWVn°JnšnL@l@XlJlaX@„X˜W²@l_VmnKšU„blU@mnkVK„¯@U@ƒma@kX¥VƒmakkƒLƒa@aƒ@WIUUVXWWnk@a°a@kkm@kUUmJm@WUUUIk`m@V—kaWWkX™KmƒXk¯ƒ@WKƒLkak@±bƒw@ƒaƒa@akaƒ@ma¯@ƒL—KÇÅkKWbkmġ™±ÅUƒLUK™VVkƒm¯LUVVbƒ„UwUW¯bm„ƒULƒxWJ—@ƒklmkUm@@KnwVkVK@akwƒ@@a¯bƒKkn›VUI™b¯mmbk@UbmKUL@xUUƒ@klmLUŽlVXI‚VVVUVUœU`mLXVWbXnW`Ų°xmŽxU@mĉƒƒwU@mbU@UƒmbkVW¦kJ™@ƒX@`¯Im@UlUVVnb@bWJXnmbƒJUU™UUaƒ@UamIkaƒxƒ@@x@b', ], encodeOffsets: [[113614, 39657]], }, }, { type: 'Feature', id: '1411', properties: { name: '吕梁市', cp: [111.3574, 37.7325], childNum: 13 }, geometry: { type: 'Polygon', coordinates: [ '@@@a@w„@„wlbnJVb„@VbšVVV„InaWmXI@a‚aUmVUVkn@°J@_„Wš@lIX¥lUnaV„V@naV@„xĊ„n‚V@‚wn¯wƱX_WmXaWUnKV_V›VUUUUWJkUVnKlk¯™@@kmKUaŁ±KkU@WmI@WUIlUUmVwXƒ‚w@ƒUlUVwœV‚@„Lnb‚W@anU@UšaVkô@l»n@na˜JnUÈLVaƃUUVm„VKVƒ²L@mU_lK@UVWkU‚a@a@U¯aUaƒÑóÑUb™„ƒKk@@aƒk¯mVaUwVƒÑkWUmK@UUKmXUWÝwUa™LUU@aWJUUU@Ua݄U@WL@VKVaVI@WnU@alIVKƒƒ@kIƒmIkJ@™m@ƒ™@@_™K@xƒ@kaW@U„@Vmn@ŽUK@mIƒJUXV¤XXWlkKƒkkK@XmJVakImJU@ó™¯LWKUV@nUVƒLkxmKkLma@kXKmmƒLƒab™LmK@V@mXVÆUxƒX@`nL„aV@@VmLUVnLlLš˜„b@„šŽ°²nx@b‚VUxlb@V¯bUV@zV‚XVĊXVx@lVn@VnnmŽUš@LlJXVƒz¯VWVXbšV@bmn™VUVk„Çþń@XVxmbUlV„Uln„W„@„Xl‚@VLXÒ@bÞJ°¦„L˜ò„@nU‚b@°„X@ŽXbmVU„V„nb@x‚x', ], encodeOffsets: [[113614, 39657]], }, }, { type: 'Feature', id: '1410', properties: { name: '临汾市', cp: [111.4783, 36.1615], childNum: 17 }, geometry: { type: 'Polygon', coordinates: [ '@@nW‚@@UnLšK‚a„b„KnnWL@lnblKnLlw„KVU@mVUXL°KôšV@nIlJUbnI@WlL„llLXkWWU£VW„InJ‚@VL@nm@UVƒX@lb„@@wšL@`‚@„šn@V@lw„@n„VmVX„WmwnUlƒœa@_lK„wVlUn°xVKVXXWlUšVVI@K@K„n°KœwlVlU@kna@V_„Wn‚m„UVm@kXml_@m„LlKXw°m@_ôJVUV@X™l@UaV@Va°I„lk»VwUkVmwUmmVn@V¯@KƒU—wmK@U¯wUVÝ@mJƒU—nWK™@@UnKVa„_lykUmKÛnm@™x@ƒUUlwVk™ƒXW@ƒa@Uƒ@@K@ƒkIV™nammVakUlƒ@wX@@kƒ™¯@ƒVVbml@„„°UbULmlVbnbÅK±VƒKVXUJWa@ULWaUU@@U@aWK@UkxUKƒLUUUJ±UkL@V±kk@kam@UV@l@LWl@n@VVUx„LlUUx@VUV™U@aƒIUl™L@°mLU‚ƒbkUUaWUUaUU@aWK—LWJ@bUL@VUVVbU@m@a@kmKmnĉlUK™XƒWUblb—xmIkƒƒU@xWb@lkšVx™LXŽmzVV@bklVVUzm˜@bk„@Vx@xlŽU„@lUbVnl@„Wxnl@n@ŽUbV„mL‚mƒb@`X@lUX@@xlnkLWaUJnnWV™Vn@l„@bULVV@l™V@XnJVX', ], encodeOffsets: [[113063, 37784]], }, }, { type: 'Feature', id: '1407', properties: { name: '晋中市', cp: [112.7747, 37.37], childNum: 11 }, geometry: { type: 'Polygon', coordinates: [ '@@@šlInJ„lJ„@‚„ULkJ@bmV@XUJUb‚L@UXKV@ރVbV@VVXI@bVVšKVbÞxVXnWVL@VnLV‚lX„ÒUŽVxUb°n„l@bl@„LšƒVaô҄ÒVb°b@VnLnnV@lmn@lb„U„V@„‚JœUVV‚Xkl@lUzmJ@xšXkl‚bUn„JVšUb„nU‚lb„V@nlLX@lakšV`Ub°š@XVJnU‚L²KlxnI@KV@lbUbVV„KnVl@„zlm@Uš@nŽšI@WUaVl@@mVU„@XkW@ƒnkVKVƒ„_Vw„y@knwVa‚@XalU„@šVnml@„X@V„L‚KVaÞbnnlJšI„mVKn„VVVInVlU„@„m@™mXK@UmyUI@mWUUakamw@wUwmLkakwVƒmK™w@wUam£y@am_ƒW@™UU@knmm„amU@WUa@knw@ƒUUUUV@nƒJm@mVUkKVUUUkKmwƒKULƒKUImV@lUn™nŽm@mbUK@°™bUnmbUmkkƒWUb@am@UXkK@a±@™V™@ĉř„V‚UXVxUVkLWl¯@@bULUlm@@nm`—XƒlWakIkm›VUbUL@Vm@kIƒ@@Kšm@—VaX‚I@W@aU@kUƒVU_™KƒbƒJkkǎ™b@nkKmL™wÅW@kVUUƒVU@WUIƒJmIXmma@_kyVaUUlkUm@ƒkU›x¯Lƒm@L@LUJ™UkVWXUWUL¯wVmUkƒxkL@`›bk„mVnxƒXUWUnmƒƒ@kxU@', ], encodeOffsets: [[114087, 37682]], }, }, { type: 'Feature', id: '1408', properties: { name: '运城市', cp: [111.1487, 35.2002], childNum: 13 }, geometry: { type: 'Polygon', coordinates: [ '@@„Vl„nJ˜wkaVa„XšWVLĊknmnL‚l@@bn‚V@UaVU@UVK@aXI˜KXL@bVVVbXVVblV„aVnK@¯šKVk„J@bšVVU@UVwkVƒKVwUUm@@Xk@K@kVUn@lbl@²l@UlK²VVIVV„KVLlw@VXL@b@VV@VŽXbVK‚@XbVIUW„L‚U²ÆLmaUankVKVaƒ¯@ƒnkUa„U°@„š‚n@@kWa„UVaXUW@IXKVw@U™ƒ„™WU@W@@UUƒU@mn@ƒ`m@UUULkUmJ™IUƒ@@UƒK@U@›anƒ™ak_@wmKUwmakV™kmK™V™k¯b™wƒ`kwUIÇx¯»ÇaŃmn@@™mƒmUkV@wkKW@kxmL™UkĉLÝk™xÝw¯lóVU„mV@ĀVVX¦W¤kz@`Vx°„²ĸ‚š@„Ul@x„êĸNJ°¤V„VlXLWnXxmV@nUl@„', ], encodeOffsets: [[113232, 36597]], }, }, { type: 'Feature', id: '1402', properties: { name: '大同市', cp: [113.7854, 39.8035], childNum: 8 }, geometry: { type: 'Polygon', coordinates: [ '@@²£šyl@Ȑ˜Ė@bĸŽĢbĸ„˜X„a‚KŤnn@ŎôllÈx„nVnÞDŽV@b‚nXllL°KšbVb@J@b—„‚„@ŽU„„xlKXLlKlXk„@Ulk„JlkUƒVKXUƒÇVIVm@_nǚLšašl‚w„VnU@UUwma@aƒaÝaLmUk@@Wƒ@U@@X™wVWÝUUUk@@VmLƒKV»nwUw™aUL@`mzƒJUIVƒUaUw™KUaVIlJôanÑlLVUn@ša„@VV„@@UUwVK°Vn_lJÆLœéW@UUUÅ@»lm@aÞIVwXW˜UUkkm@U@aƒU@mwU£VWU_kWmƒXwW_°yUkkK@UÇK@kkUVymóK—U@KWIƒbUak@mJ@bkbmLkŽ™UmƒkVU„W¦@lnb@„@Vƒ°ULml@nkVƒa™VmLUnk`±@—XƒWW@kbǦXŽ¯„WxI@xmbmxXlWV„„@bŎUz@J‚b@bÞb™ŽU@Wbk@ƒxk@WX¯VۙƒWÝbÝUkVUU@alI@a@akLWa™m@U¯UUmÇL@K@aU@¯VUkƒKmX@`@œkJ@nV‚Ub@lbVÆXVW„ULU`VbkLUV@XWl@bXJ˜@VbV@Vl', ], encodeOffsets: [[115335, 41209]], }, }, { type: 'Feature', id: '1404', properties: { name: '长治市', cp: [112.8625, 36.4746], childNum: 12 }, geometry: { type: 'Polygon', coordinates: [ '@@Uk™Lky@I‚JVa@mÞaWšy@_W@_WƒXVlUVwš@nw°K@m„UƒVaƒmVkU@mmmnLVUmKXa™U@IlKVUnK@UmWkX@WV_Vƒ@akU@a„KWIXyƒIUVmUn™Ua@WaXUVKVmkUWVkUƒLU@@VƒbƒKbƒIUmƒ@mbVL—x›WUUkn±V¯wƒbÅJUbmLkbmKÅKƒbVnUbƒV™KUb™KUbmLKmƒb™aƒKkUm@UŽnn‚VnxUVlUxl¼ƒk¯JUbU@Vbk@WšU@UVóI@`¯nWxkLƒK@nk`Wn@lUnƒVnm‚ƒXU`@mb@lkV@„VnklVVUblz@`nbWnnJ„IVJ@XUVV„UV@lÆXšxnKlL@mšaȍll„I„ašLV`„UlVV@@b@XJWUb@˜™n@L„@lJn@@UVKVaœUlnlJXb„k˜Wn_@mn@VkVK@a°@XklKVUUwVWUšƒĊƚ@šU²@@blLVWn@@bVa„XllVnnaVmša@¯VLnan@‚šmVm@knUVJ', ], encodeOffsets: [[116269, 37637]], }, }, { type: 'Feature', id: '1406', properties: { name: '朔州市', cp: [113.0713, 39.6991], childNum: 5 }, geometry: { type: 'Polygon', coordinates: [ '@@XXWVXVWnnlnn@èƼ@„„xlš„ŽV„nblšššVŽÈUVl‚š@„blnœL܃ĊmUkU@Ua‚—@WI@aXk@WVUlKUaV_VKXƒWUUÅka@VaU@mlI@›@_nW„LVl°UV@@b@LÈKVn°V@VšnXblK@b@bkJ@bVVlUÞVÞa„Xܚ°UXWl@„wl@XaV@šÝa@aa@IVyƍ@aƒƒXUWknwna@w‚JXw°ƒWÈ¥kI@W@kmKm™¯IUmkXWWkaƒbkImJ™UkL±aVƒb@lWXkJƒUkƒĉkƒ@UmU@a™KkƒVƒUkJlaU_™yƒ@UU@aUU¯LW`kLWnkJó™ƒbUƒbmK@aU@UVVL@VƒL@„UVULƒK@xUL@VUV@nml¯@UkmKUxmbVbUV@XƒlXVmnVbkxUbU@ƒbm@@VUlUVšb°@VX¯šm‚', ], encodeOffsets: [[114615, 40562]], }, }, { type: 'Feature', id: '1405', properties: { name: '晋城市', cp: [112.7856, 35.6342], childNum: 6 }, geometry: { type: 'Polygon', coordinates: [ '@@lV„Lšb„an‚LnKVašLVašL„UVaUm„aÆLnLlanKVaÆI„a°x²UlmVVœX˜wUKna„@Vn„J‚a„L„a@UV@@alUkKVKnkmmVwUk„w@ƒ™@kxWUXƒW@@mƒk@aUa@a¯aƒLkKmwkUm@kL@K@aWIXmƒVƒXƒWkUVakL@UVKƒw@aUK@UUKmLU@¯n™KUwVƒUIWJUWmka™@UXƒJƒk@UkmW@kLWKVƒx@bmI@VUaVU@a¯@UUmVKmX@±`kÝKVxUL±akL@V™bƒLkKmVƒ@XWVUbƒVXb@lm@@lW@@xk„lVUbnnmbUšlJ@„@L„@@V„b@‚WXš„UlkxVV@„šwn@ÜmnLlVkzƒ`UbmL@Vš@XL˜m„VnIÞ@VU°x@VnL˜x„V@LU°', ], encodeOffsets: [[115223, 36895]], }, }, { type: 'Feature', id: '1401', properties: { name: '太原市', cp: [112.3352, 37.9413], childNum: 5 }, geometry: { type: 'Polygon', coordinates: [ '@@„@VV@wVKnLVal@na°nšaVJœUlm„L°a@b„@lx@bULUlmx@Ln@lVkn„l˜@XI„w‚K„Vnƒ°aVXVx„ƒUaVU°K„nUlšUVL„KÆVš²Ģ‚lnXalLÈƘL„KUaVkUanmWU™a@WwkUWU¯y¯Ñ@anIl@@aVU„m„I„ymUƒLUUVakaU@@LmJkw±LKmVUI@W¯™VaU_l™kbW@kK@mƒUkaVƒmVaU™ƒIVmalk™W@wnIVy@klkWUU›VI@ƒƒUƒVkam@knU@mmmK@bblVUX@VkLV`@n±KU„ULƒ‚UnVVńUbÇKmV—Imbm@k¼ó@Ul™b@VmV@bXmaƒK@›UUxkV‚V@„xW„UxVnkVVJ@XnJ@XlV²LƂVbnL@lš@°', ], encodeOffsets: [[114503, 39134]], }, }, { type: 'Feature', id: '1403', properties: { name: '阳泉市', cp: [113.4778, 38.0951], childNum: 3 }, geometry: { type: 'Polygon', coordinates: [ '@@°@nb„@lb@b„b„b‚@„x²al@lb„KXU@m‚kUWkkmUUƒVwV@XUW@™naVklKXblKnL‚ƒnLVanImaXKlL„ašV@U@KUKW„alƒXK@£WKXUV@VU„ƒUUVW„_V™@W@@K„@šƒUƒƒIWmXUmƒULƒn™JkImmÝaUbLƒK@UƒWk@mn™Uƒ@kVWb@Ubmx@lƒzUxƒ`U„ULml@„XWlƒ@UV@nk@U‚Vb@X™Jm™@@Vknƒyk@ƒzƒJƒnUV@bk@mJ@b°Ò°zXVlVXx‚@šbXVmnVbUlVb', ], encodeOffsets: [[115864, 39336]], }, }, ], UTF8Encoding: true, }) var mapFeatures = echarts.getMap(this.mapName).geoJson.features mapFeatures.forEach(v => { // 地区名称 var name = v.properties.name // 地区经纬度 this.geoCoordMap[name] = v.properties.cp }) let option = { tooltip: { padding: 15, enterable: true, transitionDuration: 1, formatter: (params, ticket, callback) => { // 清空所有轮播 for (var k in this.geoCoordMap) { this.mapChart.dispatchAction({ // type: 'geoUnSelect', type: 'downplay', name: k, }) } // 如果鼠标滑动到线线上面,则返回空 this.mapChart.dispatchAction({ // type: 'geoSelect', type: 'highlight', name: params.name, }) if (params.componentSubType == 'lines') { return } if (params.componentSubType == 'scatter') { let tipHtml = `

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

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

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

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

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

` callback(ticket, tipHtml) return tipHtml } }, }, visualMap: { show: false, min: 0, max: 300, right: 0, bottom: 0, text: ['高', '低'], textStyle: { color: '#f1f1f1' }, realtime: false, calculable: false, inRange: { color: ['lightskyblue', '#2754b7'] } }, geo: { show: true, map: 'shanxi', layoutCenter: ['50%', '50%'], //地图位置 layoutSize: '65%', zoom: 1.5, label: { normal: { show: false, }, emphasis: { show: false, }, }, roam: false, itemStyle: { normal: { areaColor: '#1946a8', shadowColor: '#1946a8', borderWidth: 1, //设置外层边框 borderColor: '#1946a8', shadowOffsetX: 10, shadowOffsetY: 5, shadowBlur: 2, }, emphasis: { areaColor: '#1946a8', borderColor: '#d4bc1d', borderWidth: 2, //设置外层边框 }, }, }, series: [ { name: '散点', type: 'scatter', coordinateSystem: 'geo', data: this.convertData(data), symbolSize: function (val) { return 10 }, label: { normal: { formatter: '{b}', position: [10, 10], fontSize: 30, fontWeight: 600, fontStyle: 'italic', color: '#fff', show: true, }, emphasis: { show: true, }, }, itemStyle: { normal: { color: '#000', borderWidth: 2, borderColor: '#fff', }, }, }, { type: 'map', map: this.mapName, geoIndex: 0, aspectScale: 1.5, //长宽比 showLegendSymbol: true, // 存在legend时显示 label: { normal: { show: true, }, emphasis: { show: false, textStyle: { color: '#fff', }, }, }, roam: true, itemStyle: { normal: { areaColor: '#031525', borderColor: '#3B5077', }, emphasis: { areaColor: '#2B91B7', }, }, animation: false, data: data, }, { name: '点', type: 'scatter', coordinateSystem: 'geo', zlevel: 6, }, { name: 'Top 5', type: 'effectScatter', coordinateSystem: 'geo', data: this.convertData( data .sort(function (a, b) { return b.value - a.value }) .slice(0, 5) ), symbolSize: function (val) { return 15 }, showEffectOn: 'render', rippleEffect: { brushType: 'stroke', }, hoverAnimation: true, label: { normal: { formatter: '{b}', position: 'left', show: false, }, }, itemStyle: { normal: { color: 'yellow', shadowBlur: 10, shadowColor: 'yellow', }, }, zlevel: 1000, }, { name: '线路', type: 'lines', zlevel: 2, effect: { show: true, period: 4, //箭头指向速度,值越小速度越快 trailLength: 0.02, //特效尾迹长度[0,1]值越大,尾迹越长重 symbol: 'arrow', //箭头图标 symbolSize: 5, //图标大小 }, lineStyle: { normal: { color: '#00FFFF', width: 1, type: 'dashed', opacity: 0.5, //尾迹线条透明度 curveness: -0.3, //尾迹线条曲直度 }, }, data: moveLine.normal, }, ], } let that = this this.mapChart.on('click', function (params) { if (params.name == '太原市') { that.showChartLTipDouble('太原市') } }) tools.loopShowTooltip(this.mapChart, option, { interval: 2000, loopSeries: false, }); this.mapChart.setOption(option) }, initChinaChart () { var data = [] /*获取地图数据*/ this.mapChart = echarts.init(this.$refs['echarts-map']) echarts.registerMap('china', china) var mapFeatures = echarts.getMap('china').geoJson.features mapFeatures.forEach(v => { // 地区名称 var name = v.properties.name // 地区经纬度 // this.geoCoordMap[name] = v.properties.centroid this.geoCoordMap[name] = v.properties.cp data.push({ name: v.properties.name, value1: v.properties.cp[0], value2: v.properties.cp[1] }) }) //

当前阶段:可论证阶段

//

时间节点:2021.10-2022.10

let option = { geo: { show: true, map: 'china', layoutCenter: ['50%', '50%'], //地图位置 layoutSize: '65%', zoom: 1.5, label: { normal: { show: false, }, emphasis: { show: false, }, }, roam: false, itemStyle: { normal: { areaColor: '#70b0ea', shadowColor: '#1946a8', borderWidth: 1, //设置外层边框 borderColor: '#1946a8', shadowOffsetX: 2, shadowOffsetY: 1, shadowBlur: 2, }, emphasis: { areaColor: '#1946a8', borderColor: '#d4bc1d', borderWidth: 2, //设置外层边框 }, }, }, series: [ { name: '散点', type: 'scatter', coordinateSystem: 'geo', data: this.convertData(data), symbolSize: function (val) { return 10 }, label: { normal: { formatter: '{b}', position: [10, 10], fontSize: 20, fontWeight: 600, // fontStyle: 'italic', color: '#fff', show: true, }, emphasis: { show: true, }, }, itemStyle: { normal: { color: 'rgba(0,0,0,0)', borderWidth: 2, borderColor: '#fff', }, }, }, ], } let that = this this.mapChart.on('click', function (params) { if (params.name == '山西') { that.backShow = true setTimeout(() => { that.initProvinceChart() }) } }) tools.loopShowTooltip(this.mapChart, option, { interval: 2000, loopSeries: true, }) this.mapChart.setOption(option) }, initChartC3 () { let myChart = echarts.init(this.$refs['echartC3']) let option = { tooltip: { trigger: 'axis', formatter: '{a0}:{c0}' + '亿元', //+ '
'+ '{a1}:{c1}' + '%', axisPointer: { type: 'cross', }, textStyle: { color: '#FFF', // 文字的颜色 fontSize: '20', // 文字字体大小 }, }, grid: { top: '8%', right: '3%', left: '7%', bottom: '10%', }, // legend: { // top: '1', // textStyle: { // color: 'rgba(250,250,250,0.6)', // }, // }, xAxis: { data: center6.map(item => item.name), axisLine: { show: true, //隐藏X轴轴线 lineStyle: { color: '#005094', width: 1, }, }, axisTick: { show: false, //隐藏X轴刻度 }, axisLabel: { show: true, rotate: 20, textStyle: { color: '#fff',//'rgba(255,255,255,0.6)', //X轴文字颜色 fontSize: '15' }, }, }, yAxis: [ { type: 'value', name: '亿元', nameTextStyle: { color: 'rgba(255,255,255,0.6)', fontSize: '15' }, splitLine: { show: true, lineStyle: { color: '#68b4dd66', type: 'dashed', }, }, axisLine: { show: true, lineStyle: { color: '#3D7495', }, }, axisLabel: { show: true, textStyle: { color: '#fff', fontSize: '15' }, }, nameTextStyle: { color: '#fff', fontSize: 15, }, }, { type: 'value', axisLine: { show: false, }, splitLine: { show: false, }, axisLabel: { show: true, formatter: '{value} %', textStyle: { color: 'rgba(250,250,250,0.6)', }, }, }, ], series: [ { type: 'bar', name: '投资金额', barWidth: 15, itemStyle: { normal: { color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ { offset: 0, color: '#69c0ff', }, { offset: 1, color: '#082550', }, ]), }, }, data: center6.map(item => item.value), }, ], } myChart.on('click', function (param) { window.location.href = './investHomeChild.html?type=2' }) myChart.setOption(option) tools.loopShowTooltip(myChart, option, { nterval: 2000, loopSeries: true, }) }, initChartC4 () { var chartData = [] var timer = null; var timer2 = null; var i = 0; center7.forEach((item, index) => { let obj = { name: item.name, y: item.value2, num: item.value, sliced: false, selected: false, color: index == 0 ? '#43ede3' : '#8ba2ff' } chartData.push(obj) }) let that = this var chart = Highcharts.chart('echartC4', { chart: { type: 'pie', backgroundColor: 'rgba(0,0,0,0)', options3d: { enabled: true, alpha: 45, //beta: 0 }, events: { // load,图表加载完成时触发 load: function () { var chart = this; var points = chart.series[0].points; var len = points.length; timer && clearInterval(timer); timer = setInterval(function () { autoTooltip(points[i]); chartData.forEach((item, index) => { item.sliced = false item.selected = false if (index == i) { item.sliced = true item.selected = true } }) chart.update({ series: [{ type: 'pie', name: '占比', point: { events: { click: function (e) { that.showChartLTipDouble(e.point.name) } } }, data: chartData }] }) i++; if (i === len) { i = 0; chartData.forEach((item, index) => { item.sliced = false item.selected = false }) chart.update({ series: [{ type: 'pie', name: '占比', point: { events: { click: function (e) { that.showChartLTipDouble(e.point.name) } } }, data: chartData }] }) } }, 2000); }, legendItemClick: function (event) { console.log(event); return true; } } }, credits: { enabled: false //去掉hightchats水印 }, title: { text: null }, tooltip: { crosshairs: true, backgroundColor: 'rgba(0,0,0,0.5)', // positioner: function(e){ // console.log(e, this) // }, useHTML: false, //开启html模式 style: { color: '#fff', fontSize: '20' }, formatter: function (e) { //console.log(this) let num = chartData[this.colorIndex].num this.percentage = Math.round(this.percentage) return `${this.key}:${this.percentage}%
投资完成额:${this.y}亿
投资数量:${num}个` }, //pointFormat: }, legend: { layout: 'vertical', align: 'right', verticalAlign: 'bottom', itemStyle: { fontSize: '20px', color: '#fff', x: 20 } }, plotOptions: { pie: { allowPointSelect: true, showInLegend: true, // 图例 cursor: 'pointer', size: 500, innerSize: 300, //环形图中间空白,0为饼图 depth: 28, //立体高度 slicedOffset: 23, //动画距离 dataLabels: { enabled: false, // 是否展示指示线 format: '{point.name}: {point.percentage}' } }, }, series: [{ type: 'pie', name: '占比', center: ['60%', '50%'], point: { events: { click: function (e) { //点击事件 that.showChartLTipDouble(e.point.name) }, mouseOver: function (e) { //鼠标移入停止轮播并且找到移入的当前数据设为选中 //console.log(e) chartData.forEach((item, index) => { item.sliced = false item.selected = false }) chartData[e.target.index].sliced = true chartData[e.target.index].selected = true chart.update({ series: [{ type: 'pie', name: '占比', point: { events: { click: function (e) { that.showChartLTipDouble(e.point.name) } } }, data: chartData }] }) timer && clearInterval(timer); }, mouseOut: function () { // 鼠标移出后需要继续执行轮播 var points = chart.series[0].points; var len = points.length; timer && clearInterval(timer); timer = setInterval(function () { autoTooltip(points[i]); chartData.forEach((item, index) => { item.sliced = false item.selected = false if (index == i) { item.sliced = true item.selected = true } }) chart.update({ series: [{ type: 'pie', name: '占比', point: { events: { click: function (e) { that.showChartLTipDouble(e.point.name) } } }, data: chartData }] }) i++; if (i === len) { i = 0; chartData.forEach((item, index) => { item.sliced = false item.selected = false }) chart.update({ series: [{ type: 'pie', name: '占比', point: { events: { click: function (e) { that.showChartLTipDouble(e.point.name) } } }, data: chartData }] }) } }, 2000); } } }, data: chartData }] }); function autoTooltip (point) { chart.tooltip.refresh(point); } }, initProjectList () { let dataList = [] center8.map(item => { dataList.push([item.office, item.name, item.value + '亿']) }) this.storageRecordConfig2.data = dataList this.storageRecordConfig2 = { ...this.storageRecordConfig2 } }, // 大屏三 initChartR1 () { let that = this let myChart = echarts.init(this.$refs['echartR1']) myChart.on('showTip', (params) => { // 如果是7或者15并且满足防抖则切换 if ((params.dataIndex == 5 || params.dataIndex == 11) && that.echartR1Fd) { that.echartR1Fd = false setTimeout(() => { option.dataZoom[0].endValue = option.dataZoom[0].endValue + 6 option.dataZoom[0].startValue = option.dataZoom[0].startValue + 6 myChart.setOption(option); // 防止勿刷新做的防抖 setTimeout(() => { that.echartR1Fd = true }, 2000) }, 1900); // 如果是17表示到了最后一个,那么重新来一遍 } else if (params.dataIndex == 17 && that.echartR1Fd) { that.echartR1Fd = false setTimeout(() => { option.dataZoom[0].endValue = 0 option.dataZoom[0].startValue = 5 myChart.setOption(option); // 防止勿刷新做的防抖 setTimeout(() => { that.echartR1Fd = true }, 2000) }, 1900) } }) let option = { tooltip: { formatter: data => { return `${data[0].name}
${data[0].seriesName}:${data[0].value}亿
${data[1].seriesName}:${data[1].value}亿
${data[2].seriesName}:${data[2].value}亿
${data[3].seriesName}:${data[3].value}亿
${data[4].seriesName}:${data[4].value}亿` }, textStyle: { color: '#FFF', // 文字的颜色 fontSize: '20', // 文字字体大小 }, trigger: 'axis', axisPointer: { type: 'cross', }, }, dataZoom: [ { // start: 9,//默认为@ // end: 100,//黑认认为1@0 type: "slider", show: false, // xAxisIndex: [0] handlesize: 0,//滑动条的 左右2个滑动条的大小 startValue: 5,// 初始显示值 endValue: 0,// 结束显示值 height: 10,//组件高度 left: "5%", right: "4%",//右边的距离 bottom: "25%",//底边的距离 borderColor: "#939", fillerColor: "#269cdb", borderRadius: 5, backgroundColor: "#33384b",//两边未选中的滑动条区域的额色 showDataShadow: false,//是否显示数据阴影 showDetail: false,//即拖拽时候是否显示详细数值信息 truerealtime: true,//是否实时更新 filterMode: "filter" }, { type: 'inside', show: true, start: 1, end: 100, zoomOnMouseWheel: false, //滚轮是否触发缩放 moveOnMouseMove: false, //鼠标滚轮触发滚动 } ], grid: { top: '10%', right: '3%', left: '5%', bottom: '5%', }, legend: { data: ["预算额", "已签合同额", '产值认定额', '结算额', '付款额'], x: 'center', y: '20px', textStyle: { color: '#fff', fontSize: "20", }, }, xAxis: { data: right4.map(item => item.name), axisLine: { show: true, //隐藏X轴轴线 lineStyle: { color: '#005094', width: 1, }, }, axisTick: { show: false, //隐藏X轴刻度 }, axisLabel: { show: true, // rotate: 40, textStyle: { color: '#fff',//'rgba(255,255,255,0.6)', //X轴文字颜色 fontSize: "15", }, }, }, yAxis: [ { type: 'value', name: '亿元', nameTextStyle: { color: 'rgba(255,255,255,0.6)', }, splitLine: { show: true, lineStyle: { color: '#68b4dd66', type: 'dashed', }, }, axisLine: { show: true, lineStyle: { color: '#3D7495', }, }, axisLabel: { show: true, textStyle: { color: '#fff', fontSize: "15", }, }, nameTextStyle: { color: '#fff', fontSize: 15, }, }, ], series: [ { name: '预算额', type: 'bar', barWidth: 10, itemStyle: { normal: { color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ { offset: 0, color: '#71D5FF', }, { offset: 1, color: '#082550', }, ]), }, }, data: right4.map(item => item.value), }, { name: '已签合同额', type: 'bar', barWidth: 10, itemStyle: { normal: { color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ { offset: 0, color: '#4D6FF6', }, { offset: 1, color: '#082550', }, ]), }, }, data: right4.map(item => item.value2), }, { name: '产值认定额', type: 'bar', barWidth: 10, itemStyle: { normal: { color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ { offset: 0, color: '#877CFC', }, { offset: 1, color: '#082550', }, ]), }, }, data: right4.map(item => item.value), }, { name: '结算额', type: 'bar', barWidth: 10, itemStyle: { normal: { color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ { offset: 0, color: '#52BF80', }, { offset: 1, color: '#082550', }, ]), }, }, data: right4.map(item => item.value2), }, { name: '付款额', type: 'bar', barWidth: 10, itemStyle: { normal: { color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ { offset: 0, color: '#CADD62', }, { offset: 1, color: '#082550', }, ]), }, }, data: right4.map(item => item.value), }, ], } myChart.on('click', function (param) { window.location.href = './investHomeChild.html?type=2' }) myChart.setOption(option) tools.loopShowTooltip(myChart, option, { interval: 2000, loopSeries: true, }) }, initChartR2 () { let that = this const itemStyle = { // opacity: 0.8, shadowBlur: 10, shadowOffsetX: 0, shadowOffsetY: 0, shadowColor: 'rgba(0,0,0,0.3)' }; let myChart = echarts.init(this.$refs['echartR2']) myChart.on('showTip', (params) => { // 如果是7或者15并且满足防抖则切换 if ((params.dataIndex == 5 || params.dataIndex == 11) && that.echartR2Fd) { that.echartR2Fd = false setTimeout(() => { option.dataZoom[0].endValue = option.dataZoom[0].endValue + 6 option.dataZoom[0].startValue = option.dataZoom[0].startValue + 6 myChart.setOption(option); // 防止勿刷新做的防抖 setTimeout(() => { that.echartR2Fd = true }, 2000) }, 1900); // 如果是17表示到了最后一个,那么重新来一遍 } else if (params.dataIndex == 17 && that.echartR2Fd) { that.echartR2Fd = false setTimeout(() => { option.dataZoom[0].endValue = 0 option.dataZoom[0].startValue = 5 myChart.setOption(option); // 防止勿刷新做的防抖 setTimeout(() => { that.echartR2Fd = true }, 2000) }, 1900) } }) let option = { color: ['#80F1BE', '#fec42c', '#dd4444'], title: { textStyle: { color: '#69C0FF', fontSize: 16, fontWeight: 500 }, top: '10', left: '10' }, 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' } }, textStyle: { color: '#fff', }, tooltip: { show: true, trigger: "axis", textStyle: { color: '#FFF', // 文字的颜色 fontSize: '20', // 文字字体大小 }, 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', }, // axisPointer: { // lineStyle: { // type: 'dashed', // width: 2, // color: 'rgba(255,255,255,0.6)' // }, // animation: true // } }, 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: '15' }, }, nameTextStyle: { color: '#fff', fontSize: 15, }, }, 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: 15, }, }, }, 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) }) myChart.setOption(option) tools.loopShowTooltip(myChart, option, { interval: 2000, loopSeries: true, }) }, initChartR3 () { let that = this let myChart = echarts.init(this.$refs['echartR3']) myChart.on('showTip', (params) => { // 如果是7或者15并且满足防抖则切换 if ((params.dataIndex == 5 || params.dataIndex == 11) && that.echartR3Fd) { that.echartR3Fd = false setTimeout(() => { option.dataZoom[0].endValue = option.dataZoom[0].endValue + 6 option.dataZoom[0].startValue = option.dataZoom[0].startValue + 6 myChart.setOption(option); // 防止勿刷新做的防抖 setTimeout(() => { that.echartR3Fd = true }, 2000) }, 7900); // 如果是17表示到了最后一个,那么重新来一遍 } else if (params.dataIndex == 17 && that.echartR3Fd) { that.echartR3Fd = false setTimeout(() => { option.dataZoom[0].endValue = 0 option.dataZoom[0].startValue = 5 myChart.setOption(option); // 防止勿刷新做的防抖 setTimeout(() => { that.echartR3Fd = true }, 2000) }, 7900) } }) let option = { tooltip: { formatter: data => { return `${data[0].name}
${data[0].seriesName}:${data[0].value}亿
${data[1].seriesName}:${data[1].value}亿
${data[2].seriesName}:${data[2].value}亿` }, trigger: 'axis', axisPointer: { type: 'cross', }, position: (params) => { return [params[0] + 10, 60] }, textStyle: { color: '#FFF', // 文字的颜色 fontSize: '20', // 文字字体大小 }, confine: true }, dataZoom: [ { // start: 9,//默认为@ // end: 100,//黑认认为1@0 type: "slider", show: false, // xAxisIndex: [0] handlesize: 0,//滑动条的 左右2个滑动条的大小 startValue: 5,// 初始显示值 endValue: 0,// 结束显示值 height: 10,//组件高度 left: "5%", right: "4%",//右边的距离 bottom: "25%",//底边的距离 borderColor: "#939", fillerColor: "#269cdb", borderRadius: 5, backgroundColor: "#33384b",//两边未选中的滑动条区域的额色 showDataShadow: false,//是否显示数据阴影 showDetail: false,//即拖拽时候是否显示详细数值信息 truerealtime: true,//是否实时更新 filterMode: "filter" }, { type: 'inside', show: true, start: 1, end: 100, zoomOnMouseWheel: false, //滚轮是否触发缩放 moveOnMouseMove: false, //鼠标滚轮触发滚动 } ], grid: { top: '25%', right: '3%', left: '10%', bottom: '15%', }, legend: { data: ["高风险", "中风险", '低风险'], x: 'center', y: '15px', textStyle: { // color: 'rgba(250,250,250,0.6)', color: '#fff', fontSize: "20", }, }, xAxis: { data: right4.map(item => item.name), axisLine: { show: true, //隐藏X轴轴线 lineStyle: { color: '#005094', width: 1, }, }, axisTick: { show: false, //隐藏X轴刻度 }, axisLabel: { show: true, rotate: 40, textStyle: { color: '#fff',//'rgba(255,255,255,0.6)', //X轴文字颜色 fontSize: '15' }, }, }, yAxis: [ { type: 'value', name: '亿元', nameTextStyle: { color: 'rgba(255,255,255,0.6)', }, splitLine: { show: true, lineStyle: { color: '#68b4dd66', type: 'dashed', }, }, axisLine: { show: true, lineStyle: { color: '#3D7495', }, }, axisLabel: { show: true, textStyle: { color: '#fff', fontSize: '15' }, }, nameTextStyle: { color: '#fff', fontSize: 15, }, }, ], series: [ { name: '高风险', type: 'bar', stack: 'Ad', barWidth: 10, itemStyle: { normal: { color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ { offset: 0, color: '#CADD62', }, { offset: 1, color: '#082550', }, ]), }, }, data: right6.map(item => item.value), }, { name: '中风险', type: 'bar', stack: 'Ad', barWidth: 10, itemStyle: { normal: { color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ { offset: 0, color: '#4D6FF6', }, { offset: 1, color: '#082550', }, ]), }, }, data: right6.map(item => item.value2), }, { name: '低风险', type: 'bar', stack: 'Ad', barWidth: 10, itemStyle: { normal: { color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ { offset: 0, color: '#52BF80', }, { offset: 1, color: '#082550', }, ]), }, }, data: right6.map(item => item.value3), }, ], } myChart.setOption(option) tools.loopShowTooltip(myChart, option, { interval: 8000, loopSeries: true, }) }, initChartR4 () { let myChart = echarts.init(this.$refs['echartR4']) option = { title: { text: '' }, // legend: { // data: ['安全风险', '付款风险', '合同风险', '结算风险', '进度风险', '质量风险'], // textStyle: { // color: '#9DB9EB', // }, // top: 'center', // right:'50', // orient: 'vertical', // vertical 竖着 // }, radar: { // shape: 'circle', center: ['50%', '50%'], radius: 135, indicator: [ { name: '安全风险', max: 100000 }, { name: '付款风险', max: 100000 }, { name: '合同风险', max: 100000 }, { name: '结算风险', max: 100000 }, { name: '进度风险', max: 100000 }, { name: '质量风险', max: 100000 }, ], axisLine: { // 设置雷达图中间射线的颜色 lineStyle: { color: '#887d33', }, }, splitLine: { //网格颜色设置 show: true, lineStyle: { width: 1, color: ['#871b1a', '#638f41', '#d29e35', '#b6802b'] // color: '#000', // color:(color)=>{ // } }, }, name: { //修改indicator文字的颜色 textStyle: { color: "#fff", fontSize: '20' } }, splitNumber: 4, //有几个圈 splitArea: { //设置图表颜色,show的值为true show: true, areaStyle: { // color:"#c1ddf8", //一般设置方式 //设置渐变背景色 new echarts.graphic.LinearGradient(a,b,c,d,arr) //a ,b,c,d值可为0,1 a:1表示arr中的颜色右到左;c:1 arr中的颜色左到右 //b:1表示arr中的颜色下到上;d:1表示arr中的颜色上到下 // color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [ // { offset: 0, color: '#887D33' }, // 0% 处的颜色 // { offset: 0.75, color: '#7D4216' }, // 0% 处的颜色 // { offset: 1, color: '#430705' }// 100% 处的颜色 // ], false) color: ['#638f41', '#887d33', '#7d4216', '#430705'], } } }, series: [ { name: '', type: 'radar', symbol: 'circle', // 单个数值点的样式,还可以取值'rect','angle'等 symbolSize: 0, // 数值点的大小 data: [ { value: right7[0], name: '安全风险', itemStyle: { //该数值区域样式设置 normal: { color: 'rgb(44,198,255,0.8)', //背景颜色,还需设置areaStyle lineStyle: { color: 'rgb(44,198,255,0.8)', //边框颜色 }, }, }, label: { //显示value中具体的数值 normal: { show: false, textStyle: { //更改数值样式 color: '#43EDE3' } }, }, areaStyle: { //设置区域背景颜色透明度 normal: { width: 1, opacity: 0.8, }, }, } ] } ] }; // tools.loopShowTooltip(myChart, option, { // interval: 2000, // loopSeries: true, // }); myChart.setOption(option) }, initChartR5 () { let myChart = echarts.init(this.$refs['echartR5']) let option = { tooltip: { formatter: data => { return `${data[0].name}
${data[0].seriesName}:${data[0].value}亿
${data[1].seriesName}:${data[1].value}亿
${data[2].seriesName}:${data[2].value}亿
${data[3].seriesName}:${data[3].value}亿` }, trigger: 'axis', axisPointer: { type: 'cross', }, textStyle: { color: '#FFF', // 文字的颜色 fontSize: '20', // 文字字体大小 }, }, grid: { top: '15%', right: '3%', left: '5%', bottom: '35', }, legend: { data: ["预算额", "合同额", "结算额", "支付额"], x: 'center', y: '10px', textStyle: { // color: 'rgba(250,250,250,0.6)', color: '#fff', fontSize: "20", }, }, xAxis: { data: ['设备费', '设计费', '施工费', '材料费'], axisLine: { show: true, //隐藏X轴轴线 lineStyle: { color: '#005094', width: 1, }, }, axisTick: { show: false, //隐藏X轴刻度 }, axisLabel: { show: true, // rotate: 40, textStyle: { color: '#fff',//'rgba(255,255,255,0.6)', //X轴文字颜色 fontSize: '15', // 文字字体大小 }, }, }, yAxis: [ { type: 'value', name: '亿元', nameTextStyle: { color: 'rgba(255,255,255,0.6)', }, splitLine: { show: true, lineStyle: { color: '#68b4dd66', type: 'dashed', }, }, axisLine: { show: true, lineStyle: { color: '#3D7495', }, }, axisLabel: { show: true, textStyle: { color: '#fff', fontSize: '15', // 文字字体大小 }, }, nameTextStyle: { color: '#fff', fontSize: 15, }, }, ], series: [ { name: '预算额', type: 'bar', barWidth: 10, itemStyle: { normal: { color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ { offset: 0, color: '#71D5FF', }, { offset: 1, color: '#082550', }, ]), }, }, data: right8.map(item => item.value), }, { name: '合同额', type: 'bar', barWidth: 10, itemStyle: { normal: { color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ { offset: 0, color: '#4D6FF6', }, { offset: 1, color: '#082550', }, ]), }, }, data: right8.map(item => item.value2), }, { name: '结算额', type: 'bar', barWidth: 10, itemStyle: { normal: { color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ { offset: 0, color: '#877CFC', }, { offset: 1, color: '#082550', }, ]), }, }, data: right8.map(item => item.value3), }, { name: '支付额', type: 'bar', barWidth: 10, itemStyle: { normal: { color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ { offset: 0, color: '#52BF80', }, { offset: 1, color: '#082550', }, ]), }, }, data: right8.map(item => item.value4), }, ], } myChart.setOption(option) tools.loopShowTooltip(myChart, option, { interval: 2000, loopSeries: true, }) }, }, })