let app = new Vue({
el: '#app',
data () {
return {
time: '',
timer: '',
config5: {
waitTime: 2000,
header: ["风险类型", "风险说明", '提出人', '时间', '风险等级'],
data: [
["风险等级", "WBS:012工程", "杨志宇", "2022.9.12", '一级'],
["风险等级", "WBS:012工程", "杨志宇", "2022.9.12", '二级'],
["风险等级", "WBS:012工程", "杨志宇", "2022.9.12", '三级'],
["风险等级", "WBS:012工程", "杨志宇", "2022.9.12", '一级'],
["风险等级", "WBS:012工程", "杨志宇", "2022.9.12", '二级'],
["风险等级", "WBS:012工程", "杨志宇", "2022.9.12", '三级']
],
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: 5,
left: '40',
// itemHeight: 10,
// itemWidth: 10,
textStyle: {
color: '#9DB9EB',
},
},
// graphic: {
// elements: [{
// type: "text",
// left: "center",
// top: "70%",
// style: {
// text: "投资类别",
// textAlign: "center",
// fill: "#fff",
// fontSize: 15,
// fontWeight: 500
// }
// }]
// },
series: [
{
center: ['50%', '32%'],
radius: ['45%', '60%'],
name: '',
type: 'pie',
labelLine: {
normal: {
lineStyle: {
width: 1,
},
},
},
label: {
show: false,
position: 'center'
},
data: [
{ value: 1169.91, name: '固定资产投资' },
{ value: 154.17, name: '股权投资' }
],
},
],
}
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: 40,
textStyle: {
color: '#9DB9EB',
},
},
// graphic: {
// elements: [{
// type: "text",
// left: "center",
// top: "77%",
// style: {
// text: "投资阶段",
// textAlign: "center",
// fill: "#fff",
// fontSize: 15,
// fontWeight: 500
// }
// }]
// },
series: [
{
center: ['50%', '32%'],
radius: ['45%', '60%'],
name: '',
type: 'pie',
labelLine: {
normal: {
lineStyle: {
width: 1,
},
},
},
label: {
show: false,
position: 'center'
},
data: [
{ value: 345.53, name: '新建项目' },
{ value: 978.55, name: '续建项目' }
],
},
],
}
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: 40,
textStyle: {
color: '#9DB9EB',
},
},
// graphic: {
// elements: [{
// type: "text",
// left: "center",
// top: "77%",
// style: {
// text: "管理类别",
// textAlign: "center",
// fill: "#fff",
// fontSize: 15,
// fontWeight: 500
// }
// }]
// },
series: [
{
center: ['50%', '32%'],
radius: ['45%', '60%'],
name: '',
type: 'pie',
labelLine: {
normal: {
lineStyle: {
width: 1,
},
},
},
label: {
show: false,
position: 'center'
},
data: [
{ value: 242, name: '特别监管类' },
{ value: 165, name: '备案类' },
{ value: 35, name: '其他类' }
],
},
],
}
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: '30',
textStyle: {
color: '#9DB9EB',
},
},
// graphic: {
// elements: [{
// type: "text",
// left: "center",
// top: "77%",
// style: {
// text: "投资领域",
// textAlign: "center",
// fill: "#fff",
// fontSize: 15,
// fontWeight: 500
// }
// }]
// },
series: [
{
center: ['50%', '32%'],
radius: ['45%', '60%'],
name: '',
type: 'pie',
labelLine: {
normal: {
lineStyle: {
width: 1,
},
},
},
label: {
show: false,
position: 'center'
},
data: [
{ value: 405.29, name: '传统产业投资' },
{ value: 196.44, name: '战略新兴产业投资' },
{ value: 722.34, name: '基础产业投资' }
],
},
],
}
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: ['进度', '质量', '预算', '证照', '合同'],
bottom: 0,
left: 'center',
textStyle: {
color: '#9DB9EB',
},
},
splitArea: { // 坐标轴在 grid 区域中的分隔区域，默认不显示。
show: true,
areaStyle: { // 分隔区域的样式设置。
color: ['yellow'],
// 分隔区域颜色。分隔区域会按数组中颜色的顺序依次循环设置颜色。默认是一个深浅的间隔色。
}
},
radar: {
// shape: 'circle',
center: ['50%', '50%'],
radius: 60,
indicator: [
{ name: '进度', max: 100000 },
{ name: '质量', max: 100000 },
{ name: '预算', max: 100000 },
{ name: '证照', max: 100000 },
{ name: '合同', 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: [1],
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],
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: [{
type: 'value',
name: '亿元',
nameTextStyle: {//y轴上方单位的颜色
color: '#fff',
},
axisTick: {
lineStyle: {
color: "#18416F",
},
},
// y轴的字体颜色
axisLabel: {
// formatter: '{value} %',
textStyle: {
color: "white",
},
},
splitLine: {
show: false,
lineStyle: {
color: "#204561",
width: 1,
type: "dotted",
},
},
},
{
type: 'value',
nameTextStyle: {//y轴上方单位的颜色
color: '#fff',
},
axisTick: {
lineStyle: {
color: "#18416F",
},
},
// y轴的字体颜色
axisLabel: {
formatter: '{value} %',
textStyle: {
color: "white",
},
},
splitLine: {
show: false,
lineStyle: {
color: "#204561",
width: 1,
type: "dotted",
},
},
},
],
series: [
{
name: "",
type: "bar",
data: [46.99, 218.35, 31.83, 64.20, 14.03, 47.05, 385.25, 97.57, 189.07, 106.84, 82.95, 80.01, 26.79, 41.09, 5.33, 14.76, 63.45, 346.36],
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: [50.89, 143.84, 25.20, 12.19, 7.69, 23.93, 224.89, 112.67, 121.59, 59.93, 71.34, 42.46, 9.64, 42.67, 0.80, 5.84, 32.60, 335.91,],
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",
},
]),
},
},
{
name: "",
type: "line",
yAxisIndex: 1,
data: [1.08, 0.66, 0.79, 0.19, 0.55, 0.51, 0.58, 1.15, 0.64, 0.56, 0.86, 0.53, 0.36, 1.04, 0.15, 0.4, 0.51, 0.97],
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: "blue",
},
]),
},
},
],
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,
});
}
},
})