let app = new Vue({
el: '#app',
data () {
return {
time: '',
timer: '',
config5: {
waitTime: 2000,
header: ["风险类型", "风险说明", '提出人', '时间', '风险等级'],
data: [
["风险等级", "WBS:012工程", "杨志宇", "2022.9.12", '<span class="lightOut"><span class="blue">一级</span></span>'],
["风险等级", "WBS:012工程", "杨志宇", "2022.9.12", '<span class="lightOut"><span class="yellow">二级</span></span>'],
["风险等级", "WBS:012工程", "杨志宇", "2022.9.12", '<span class="lightOut"><span class="pink">三级</span></span>'],
["风险等级", "WBS:012工程", "杨志宇", "2022.9.12", '<span class="lightOut"><span class="blue">一级</span></span>'],
["风险等级", "WBS:012工程", "杨志宇", "2022.9.12", '<span class="lightOut"><span class="yellow">二级</span></span>'],
["风险等级", "WBS:012工程", "杨志宇", "2022.9.12", '<span class="lightOut"><span class="pink">三级</span></span>']
],
align: ["center", "center", "center", "center", "center"],
headerBGC: "#1C537D",
oddRowBGC: "#09335C"
},
}
},
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.aiQualityECharts();
this.aiQualityECharts2();
})
},
methods: {
initChartL1 () {
let myChart = echarts.init(this.$refs['tl1'])
let option = {
grid: {
top: 0,
right: 0,
left: 0,
bottom: 0,
},
tooltip: {
trigger: 'item',
},
color: ['#6682f5', '#40A9FF'],
legend: {
// icon: 'circle',
bottom: 0,
left: 'center',
// itemHeight: 10,
// itemWidth: 10,
textStyle: {
color: '#9DB9EB',
},
},
graphic: {
elements: [{
type: "text",
left: "center",
top: "77%",
style: {
text: "投资类别",
textAlign: "center",
fill: "#fff",
fontSize: 15,
fontWeight: 500
}
}]
},
series: [
{
center: ['50%', '40%'],
radius: ['45%', '60%'],
name: '',
type: 'pie',
labelLine: {
normal: {
lineStyle: {
width: 1,
},
},
},
label: {
show: false,
position: 'center'
},
data: [
{ value: 1048, name: '数据1' },
{ value: 735, name: '数据2' }
],
},
],
}
tools.loopShowTooltip(myChart, option, {
interval: 2000,
loopSeries: true,
});
myChart.setOption(option)
},
initChartL2 () {
let myChart = echarts.init(this.$refs['tl2'])
let option = {
grid: {
top: 0,
right: 0,
left: 0,
bottom: 0,
},
tooltip: {
trigger: 'item',
},
color: ['#40A9FF', '#45DAD1'],
legend: {
bottom: 0,
left: 'center',
textStyle: {
color: '#9DB9EB',
},
},
graphic: {
elements: [{
type: "text",
left: "center",
top: "77%",
style: {
text: "投资阶段",
textAlign: "center",
fill: "#fff",
fontSize: 15,
fontWeight: 500
}
}]
},
series: [
{
center: ['50%', '40%'],
radius: ['45%', '60%'],
name: '',
type: 'pie',
labelLine: {
normal: {
lineStyle: {
width: 1,
},
},
},
label: {
show: false,
position: 'center'
},
data: [
{ value: 1048, name: '数据1' },
{ value: 735, name: '数据2' }
],
},
],
}
tools.loopShowTooltip(myChart, option, {
interval: 2500,
loopSeries: true,
});
myChart.setOption(option)
},
initChartL3 () {
let myChart = echarts.init(this.$refs['tl3'])
let option = {
grid: {
top: 0,
right: 0,
left: 0,
bottom: 0,
},
tooltip: {
trigger: 'item',
},
color: ['#40A9FF', '#8BA2FF'],
legend: {
bottom: 0,
left: 'center',
textStyle: {
color: '#9DB9EB',
},
},
graphic: {
elements: [{
type: "text",
left: "center",
top: "77%",
style: {
text: "管理类别",
textAlign: "center",
fill: "#fff",
fontSize: 15,
fontWeight: 500
}
}]
},
series: [
{
center: ['50%', '40%'],
radius: ['45%', '60%'],
name: '',
type: 'pie',
labelLine: {
normal: {
lineStyle: {
width: 1,
},
},
},
label: {
show: false,
position: 'center'
},
data: [
{ value: 1048, name: '数据1' },
{ value: 735, name: '数据2' }
],
},
],
}
tools.loopShowTooltip(myChart, option, {
interval: 3000,
loopSeries: true,
});
myChart.setOption(option)
},
initChartL4 () {
let myChart = echarts.init(this.$refs['tl4'])
let option = {
grid: {
top: 0,
right: 0,
left: 0,
bottom: 0,
},
tooltip: {
trigger: 'item',
},
color: ['#45DAD1', '#40A9FF'],
legend: {
bottom: 0,
left: 'center',
textStyle: {
color: '#9DB9EB',
},
},
graphic: {
elements: [{
type: "text",
left: "center",
top: "77%",
style: {
text: "投资领域",
textAlign: "center",
fill: "#fff",
fontSize: 15,
fontWeight: 500
}
}]
},
series: [
{
center: ['50%', '40%'],
radius: ['45%', '60%'],
name: '',
type: 'pie',
labelLine: {
normal: {
lineStyle: {
width: 1,
},
},
},
label: {
show: false,
position: 'center'
},
data: [
{ value: 1048, name: '数据1' },
{ value: 735, name: '数据2' }
],
},
],
}
tools.loopShowTooltip(myChart, option, {
interval: 3500,
loopSeries: true,
});
myChart.setOption(option)
},
initChartL5 () {
let myChart = echarts.init(this.$refs['cl1'])
let option = {
grid: {
top: 0,
right: 0,
left: 0,
bottom: 0,
},
tooltip: {
trigger: 'item',
},
color: ['#45DAD1', '#40A9FF'],
legend: {
bottom: 0,
left: 'center',
textStyle: {
color: '#9DB9EB',
},
},
graphic: {
elements: [{
type: "text",
left: "center",
top: "77%",
style: {
text: "投资情况",
textAlign: "center",
fill: "#fff",
fontSize: 15,
fontWeight: 500
}
}]
},
series: [
{
center: ['50%', '40%'],
radius: ['45%', '60%'],
name: '',
type: 'pie',
labelLine: {
normal: {
lineStyle: {
width: 1,
},
},
},
label: {
show: false,
position: 'center'
},
data: [
{ value: 1048, name: '数据1' },
{ value: 735, name: '数据2' }
],
},
],
}
tools.loopShowTooltip(myChart, option, {
interval: 4000,
loopSeries: true,
});
myChart.setOption(option)
},
initChartL6 () {
let myChart = echarts.init(this.$refs['cr1'])
option = {
title: {
text: ''
},
legend: {
data: ['类型1', '类型2', '类型3', '类型4', '类型5'],
bottom: 0,
left: 'center',
textStyle: {
color: '#9DB9EB',
},
},
splitArea: { // 坐标轴在 grid 区域中的分隔区域，默认不显示。
show: true,
areaStyle: { // 分隔区域的样式设置。
color: ['yellow'],
// 分隔区域颜色。分隔区域会按数组中颜色的顺序依次循环设置颜色。默认是一个深浅的间隔色。
}
},
radar: {
// shape: 'circle',
center: ['50%', '50%'],
radius: 60,
indicator: [
{ name: '类型1', max: 100000 },
{ name: '类型2', max: 100000 },
{ name: '类型3', max: 100000 },
{ name: '类型4', max: 100000 },
{ name: '类型5', max: 100000 },
],
axisLine: { // 设置雷达图中间射线的颜色
lineStyle: {
color: '#c0c0c0',
},
},
splitLine: { //网格颜色设置
show: true,
lineStyle: {
width: 1,
color: '#1e83e4',
},
},
splitArea: { //设置图表颜色，show的值为true
show: false,
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: '#c1ddf8' }, // 0% 处的颜色
{ offset: 1, color: '#1e83e4' }// 100% 处的颜色
], false)
}
}
},
series: [
{
name: '',
type: 'radar',
symbol: 'circle', // 单个数值点的样式，还可以取值'rect','angle'等
symbolSize: 0, // 数值点的大小
data: [
{
value: [4200, 3000, 20000, 35000, 50000, 18000],
name: '类型1',
itemStyle: { //该数值区域样式设置
normal: {
color: '#2CC6FF', //背景颜色，还需设置areaStyle
lineStyle: {
color: '#2CC6FF', //边框颜色
},
},
},
label: { //显示value中具体的数值
normal: {
show: false,
textStyle: { //更改数值样式
color: '#43EDE3'
}
},
},
areaStyle: { //设置区域背景颜色透明度
normal: {
width: 1,
opacity: 0.8,
},
},
},
{
value: [8000, 3000, 38000, 76000, 32000, 71000],
name: '类型2',
itemStyle: { //该数值区域样式设置
normal: {
color: '#D87AFF', //背景颜色，还需设置areaStyle
lineStyle: {
color: '#2CC6FF', //边框颜色
},
},
},
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)
},
aiQualityECharts () {
let chart = echarts.init(document.getElementById("aiQuality"));
let option = {
grid: {
top: 35,
right: 40,
left: 60,
bottom: 20,
},
tooltip: {
show: true,
trigger: "axis",
axisPointer: {
// 坐标轴指示器，坐标轴触发有效
type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
},
},
xAxis: {
data: ["集团本部", "晋能控股", "潞安化工", "华阳新材", "山西文旅", "太重集团", "山焦人力", "华远陆港", "汾酒集团", "云时代"],
axisTick: {
show: false,
},
// x轴的字体颜色
axisLabel: {
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: false,
lineStyle: {
color: "#204561",
width: 1,
type: "dotted",
},
},
//y轴线的颜色以及宽度
axisLine: {
show: true,
lineStyle: {
color: "#1E5389",
width: 1,
type: "solid",
},
},
},
series: [
{
name: "计划投资额",
type: "bar",
data: [1200, 680, 562, 268, 717, 843, 987, 126, 723, 569],
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: "#132543",
}, //柱图渐变色
{
offset: 1,
color: "#897DFF",
},
]),
},
},
{
name: "实际投资额",
type: "bar",
data: [658, 1125, 658, 999, 643, 675, 743, 724, 733, 725],
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: "#132543",
}, //柱图渐变色
{
offset: 1,
color: "#FED95B",
},
]),
},
},
],
legend: {
data: ["计划投资额", "实际投资额"],
textStyle: {
// 图列内容样式
color: "#fff", // 字体颜色
// fontSize: "10",
},
right: 30,
icon: "roundRect",
// 小图标的宽高
itemHeight: 5,
},
};
chart.setOption(option);
tools.loopShowTooltip(chart, option, {
interval: 2000,
loopSeries: true,
});
},
aiQualityECharts2 () {
let chart = echarts.init(document.getElementById("aiQuality2"));
let option = {
grid: {
top: 35,
right: 40,
left: 60,
bottom: 20,
},
tooltip: {
show: true,
trigger: "axis",
axisPointer: {
// 坐标轴指示器，坐标轴触发有效
type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
},
},
xAxis: {
data: ["工程费用", "设备费用", "人员费用", "材料费用", "管理费用"],
axisTick: {
show: false,
},
// x轴的字体颜色
axisLabel: {
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: false,
lineStyle: {
color: "#204561",
width: 1,
type: "dotted",
},
},
//y轴线的颜色以及宽度
axisLine: {
show: true,
lineStyle: {
color: "#1E5389",
width: 1,
type: "solid",
},
},
},
series: [
{
name: "预算金额",
type: "bar",
data: [843, 987, 126, 723, 569],
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: "#132543",
}, //柱图渐变色
{
offset: 1,
color: "#40A9FF",
},
]),
},
},
{
name: "实际金额",
type: "bar",
data: [675, 743, 724, 733, 725],
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: "#132543",
}, //柱图渐变色
{
offset: 1,
color: "#45DAD1",
},
]),
},
},
],
legend: {
data: ["预算金额", "实际金额"],
textStyle: {
// 图列内容样式
color: "#fff", // 字体颜色
// fontSize: "10",
},
right: 30,
icon: "roundRect",
// 小图标的宽高
itemHeight: 5,
},
};
chart.setOption(option);
tools.loopShowTooltip(chart, option, {
interval: 2000,
loopSeries: true,
});
}
},
})