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,
})
},
},
})