let app = new Vue({ el: '#app', data () { return { time: '', timer: '', totleLimit: '1363.88', showTip2: false, showTip3: false, list:'', count: 0, countType: 0, storageRecordConfig: { // waitTime: '30000', hoverPause: false, header: ['企业集团', '项目名 ', '投资总额'], // headerBGC: '#05507b33', // oddRowBGC: '#05507b33', // evenRowBGC: '#05507b33', headerHeight:50, headerBGC: '#05507b33', oddRowBGC: '#05183c', evenRowBGC: '#05507b00', rowNum: 5, // columnWidth: [100, 550,100], align: ['center', 'center', 'center'], data: [ ['国际能源', '娄烦县120MW智慧光伏发电项目+10%储能', "6.78亿元"], ['国际能源', '平朔矿区150MW农光储氢一体化项目', "7.84亿元"], ['汾酒集团', '汾酒2030技改原酒产储能扩建项目(一期)', "91.02亿元"], ['大地控股', '山西大地控股忻州新店矿业有限公司投资建设年产800万吨精品砂石骨料项目', "8.67亿元"], ['潞安化工', '分布式光伏发电项目', "2.01亿元"], ['太重集团', '设立太重(大同)新能源产业投资公司', "0.30亿元"], ['大地控股', '山西大地宏翔环保科技有限公司电厂固废资源化综合利用建设项目', "3.60亿元"], ['大地控股', '山西大地海科环保科技有限公司电厂固废资源化综合利用建设项目', "3.11亿元"], ['汾酒集团', '保健酒园区新增原酒产能项目', "4.98亿元"], ['汾酒集团', '白玉酒厂改扩建项目', "4.96亿元"], ['华阳新材', '5GW高效光伏组件制造项目', "4.82亿元"], ['华新燃气', '吉县—延长输气管道项目(一期工程)', "3.54亿元"], ['太重集团', '建设液压挖掘机配套油缸项目', "2.60亿元"], ['华远陆港', '物产集团参股设立项目公司投资建设山西物产万科(太原)综合物流产业园项目', "6.60亿元"], ['太重集团', '设立昔阳县晶能新能源有限公司', "0.50亿元"], ['山西建投', '设立山西低碳环保产业集团有限公司', "30.00亿元"], ['山西建投', '设立山西省太忻经济一体化发展投资集团有限公司', "30.00亿元"], ['华新燃气', '设立山西华新液化天然气集团有限公司', "3.00亿元"], ['交控集团', '设立山西交控新能源发展有限公司', "3.00亿元"] ], }, } }, created () { this.time = formatDate() this.timer = setInterval(() => { this.time = formatDate() }, 1000) }, beforeDestroy () { if (this.timer) { clearInterval(this.timer); } }, mounted () { setTimeout(() => { this.initChartL1() this.initChartL2() this.initChartL3() this.initChartL4() this.initChartL5() this.initChartL6() this.initChartL7() this.initChartL8() this.initChartL9() this.initChartL10() this.initChartL11() this.changeTopColor() }) }, methods: { 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 } this.list = document.getElementsByClassName('row-item') 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.initChartL9() }, initChartL1 () { let myChart = echarts.init(this.$refs['echartL1']) 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) }, initChartL2 () { var chartData = [ { name: '辅业', y: 76.38, num: 84, sliced: false, selected: false, }, { name: '主业', y: 1287.50, num: 713, sliced: false, selected: false, } ] 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.showTip3 = true that.echartTitle = '主辅业计划占比' setTimeout(() => { // that.initChartT1(chartData) }) } } }, 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', }, 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.showTip3 = true that.echartTitle = '主辅业计划占比' setTimeout(() => { // that.initChartT1(chartData) }) }, 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.showTip3 = true that.echartTitle = '主辅业计划占比' setTimeout(() => { // that.initChartT1(chartData) }) } } }, 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.showTip3 = true that.echartTitle = '主辅业计划占比' setTimeout(() => { // that.initChartT1(chartData) }) } } }, 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.echartTitle = '主辅业计划占比' setTimeout(() => { // that.initChartT1(chartData) }) } } }, data: chartData }] }) } }, 2000); } } }, data: chartData }] } var chart = Highcharts.chart('echartL2', option); function autoTooltip (point) { chart.tooltip.refresh(point); } }, initChartL3 () { var chartData = [ { name: '特别监管类', y: 635.84, num: 168, sliced: false, selected: false, }, { name: '备案类', y: 728.04, num: 465, sliced: false, selected: false, } ] 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.showTip3 = true that.echartTitle = '项目管理类型' setTimeout(() => { that.initChartT1(chartData) }) } } }, 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); that.showTip3 = true that.echartTitle = '项目管理类型' setTimeout(() => { that.initChartT1(chartData) }) 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', }, 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.showTip3 = true that.echartTitle = '项目管理类型' setTimeout(() => { that.initChartT1(chartData) }) }, 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.showTip3 = true that.echartTitle = '项目管理类型' setTimeout(() => { that.initChartT1(chartData) }) } } }, 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.showTip3 = true that.echartTitle = '项目管理类型' setTimeout(() => { that.initChartT1(chartData) }) } } }, 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: 35, right: 0, left: 60, bottom: 50, }, tooltip: { show: true, trigger: "axis", axisPointer: { // 坐标轴指示器,坐标轴触发有效 type: "shadow", // 默认为直线,可选为:'line' | 'shadow' }, }, xAxis: { data: ["山西焦煤", "晋能控股", "华阳新材", "潞安化工", "华新燃气", "太重集团", "国际能源", "华远陆港", "水控集团", "文旅集团", "交控集团", '航产集团', '山西建投', '汾酒集团', '大地控股', '云时代', '华舰体育', '神农科技'], axisTick: { show: false, }, // x轴的字体颜色 axisLabel: { rotate: 40, textStyle: { color: "white", }, }, //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", }, }, 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: "10", }, right: 'center', y:5, icon: "roundRect", // 小图标的宽高 itemHeight: 5, }, }; tools.loopShowTooltip(myChart, option, { nterval: 2000, loopSeries: true, }) let that = this myChart.on('click', function (param) { if (param.name == '晋能控股') { that.showTip2 = true setTimeout(() => { // that.initChartR4() // that.initChartR5() that.initChartL2b() }) } }) myChart.setOption(option); }, initChartL5 () { var chartData = [ { name: '煤炭', y: 294.61, num: 95, sliced: false, selected: false, }, { name: '火电', y: 39.24, num: 1, sliced: false, selected: false, }, { name: '冶金', y: 38.85, num: 6, sliced: false, selected: false, }, { name: '焦化', y: 16.49, num: 4, sliced: false, selected: false, }, { name: '其他传统产业', y: 14.19, num: 5, sliced: false, selected: false, } ] 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.showTip3 = true that.echartTitle = '传统产业分析' setTimeout(() => { that.initChartT1(chartData) }) } } }, 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', }, 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.showTip3 = true that.echartTitle = '传统产业分析' setTimeout(() => { that.initChartT1(chartData) }) }, 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.showTip3 = true that.echartTitle = '传统产业分析' setTimeout(() => { that.initChartT1(chartData) }) } } }, 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.showTip3 = true that.echartTitle = '传统产业分析' setTimeout(() => { that.initChartT1(chartData) }) } } }, 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 = [ { name: '新一代信息技术', y: 29.26, num: 75, //x: 75, sliced: false, selected: false, }, { name: '高端装备制造', y: 100.41, num: 28, sliced: false, selected: false, }, { name: '新材料', y: 6.72, num: 4, sliced: false, selected: false, }, { name: '生物', y: 3.60, num: 58, sliced: false, selected: false, }, { name: '新能源', y: 170.03, num: 58, sliced: false, selected: false, }, { name: '节能环保', y: 26.30, num: 24, sliced: false, selected: false, }, { name: '相关服务业', y: 5.10, num: 2, sliced: false, selected: false, } ] 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.showTip3 = true that.echartTitle = '战略性新兴产业' setTimeout(() => { that.initChartT1(chartData) }) } } }, 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', }, 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.showTip3 = true that.echartTitle = '战略性新兴产业' setTimeout(() => { that.initChartT1(chartData) }) }, 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.showTip3 = true that.echartTitle = '战略性新兴产业' setTimeout(() => { that.initChartT1(chartData) }) } } }, 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.showTip3 = true that.echartTitle = '战略性新兴产业' setTimeout(() => { that.initChartT1(chartData) }) } } }, 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 = [ { name: '化工', y: 43.86, num: 32, sliced: false, selected: false, }, { name: '煤层气', y: 29.49, num: 16, sliced: false, selected: false, }, { name: '文旅康养', y: 0.07, num: 1, sliced: false, selected: false, }, { name: '体育', y: 2.57, num: 5, sliced: false, selected: false, }, { name: '酿造', y: 15.83, num: 4, sliced: false, selected: false, }, { name: '建筑房地产', y: 120.81, num: 96, sliced: false, selected: false, }, { name: '农业', y: 15.47, num: 10, sliced: false, selected: false, } ] 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.showTip3 = true that.echartTitle = '特色优势产业' setTimeout(() => { that.initChartT1(chartData) }) } } }, 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', }, 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.showTip3 = true that.echartTitle = '特色优势产业' setTimeout(() => { that.initChartT1(chartData) }) }, 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.showTip3 = true that.echartTitle = '特色优势产业' setTimeout(() => { that.initChartT1(chartData) }) } } }, 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.showTip3 = true that.echartTitle = '特色优势产业' setTimeout(() => { that.initChartT1(chartData) }) } } }, 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 = [ { name: '交通运输业', y: 264.70, num: 38, sliced: false, selected: false, }, { name: '煤气层管网', y: 14.39, num: 14, sliced: false, selected: false, }, { name: '物流贸易', y: 18.07, num: 18, sliced: false, selected: false, }, { name: '水务', y: 69.73, num: 34, sliced: false, selected: false, }, { name: '其他', y: 3.64, num: 5, sliced: false, selected: false, } ] 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.showTip3 = true that.echartTitle = '公共基础等产业' setTimeout(() => { that.initChartT1(chartData) }) } } }, 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', }, 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.showTip3 = true that.echartTitle = '公共基础等产业' setTimeout(() => { that.initChartT1(chartData) }) }, 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.showTip3 = true that.echartTitle = '公共基础等产业' setTimeout(() => { that.initChartT1(chartData) }) } } }, 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.showTip3 = true that.echartTitle = '公共基础等产业' setTimeout(() => { that.initChartT1(chartData) }) } } }, 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 () { let myChart = 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: '6%', }, xAxis: { // data: ['总投资收益率', '销售利润率', '成本费用利润率', '总资产周转率', '财务内部收益率'], data: dataType[this.countType], axisLine: { show: true, //隐藏X轴轴线 lineStyle: { color: '#005094', width: 1, }, }, axisTick: { show: true, //隐藏X轴刻度 }, axisLabel: { show: true, rotate: 15, textStyle: { color: 'rgba(255,255,255,0.6)', //X轴文字颜色 fontSize: 12, }, }, }, yAxis: [ { type: 'value', splitLine: { show: true, lineStyle: { color: '#68b4dd66', type: 'dashed', }, }, axisLine: { show: false }, axisLabel: { show: true, formatter: '{value}', textStyle: { color: 'rgba(250,250,250,0.6)', }, }, 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: dataList[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: dataList[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: dataList[this.count + 1][0] }, ], } myChart.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: 20, 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 }, 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: 'rgba(250,250,250,0.6)', fontSize: 16, }, }, 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: 'rgba(255,255,255,0.6)', //X轴文字颜色 fontSize: 14, }, }, }, 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: [ ['项目储备', '特别监管', 14, 12.05], ['项目立项', '特别监管', 2, 1.25], ['可研论证', '特别监管', 10, 32.69], ['投资决策', '特别监管', 15, 28.53], ] }, { 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: [ ['项目储备', '备案', 27, 23.86], ['项目立项', '备案', 1, 1.05], ['可研论证', '备案', 14, 18.46], ['投资决策', '备案', 40, 38.86], ] }, ] } 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: 20, 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 }, 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: 'rgba(250,250,250,0.6)', fontSize: 16, }, }, 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: 'rgba(255,255,255,0.6)', //X轴文字颜色 fontSize: 14, }, }, }, 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: [ ['项目储备', '特别监管', 9, 6.49], ['项目立项', '特别监管', 0, 0.00], ['可研论证', '特别监管', 2, 0.10], ['投资决策', '特别监管', 27, 15.52], ] }, { 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: [ ['项目储备', '备案', 39, 8.08], ['项目立项', '备案', 7, 1.83], ['可研论证', '备案', 19, 1.01], ['投资决策', '备案', 73, 17.65], ] }, ] } myChart.setOption(option) tools.loopShowTooltip(myChart, option, { nterval: 2000, loopSeries: true, }) }, }, })