williamet/vis389
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

init3

Browse Source
This commit is contained in:
hh
2021-12-03 09:43:39 +08:00
parent dc0f6752bc
commit fa1b1afb30
3 changed files with 274 additions and 100 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
.env.production
View File

@ -5,5 +5,5 @@ VUE_APP_TITLE = 科研生产展示平台
ENV = 'production'
# 科研生产展示平台/生产环境
VUE_APP_BASE_API = 'http://120.26.107.74:1818'
#VUE_APP_BASE_API = 'http://127.0.0.1:1818'
#VUE_APP_BASE_API = 'http://120.26.107.74:1818'
VUE_APP_BASE_API = '/api'

304
src/views/bigScreen/drivingCabin/bottom1.vue
View File

@ -25,8 +25,22 @@ export default {
return {
dateRange: [],
chart: null,
option: {
tooltip: {
trigger: 'axis',
axisPointer: { // 坐标轴指示器，坐标轴触发有效
type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
},
formatter: function (params, ticket, callback) {
console.log(params)
var res = params[0].name;
for (var i = 0, l = params.length; i < l; i++) {
res += '<br/>' + params[i].seriesName + ' : ' + Math.abs(params[i].value);
}
return res;
}
},
grid: {
top: '5%',
left: '3%',
@ -74,8 +88,16 @@ export default {
stack: 'total',
data: [120, 132, 101, 134, 90, 230, 210],
itemStyle: {
color: 'rgb(116,212,184)'
color: 'rgb(116,212,184)',
},
// label: {
// show : true,
// position : 'top',
// formatter : "{c}",
// textStyle : {
// color: '#fff'
// }
// }
},
{
name: '收入',
@ -96,89 +118,241 @@ export default {
color: 'rgb(245,217,126)'
},
},
{
hoverAnimation: false,
type: 'pie',
radius: ['70%', '80%'],
center: ['75%', '50%'],
roseType: 'area',
itemStyle: {
borderRadius: 5,
color: 'rgb(170,202,253)'
},
data: [
{ value: 30, name: '收入' },
],
label: {
},
labelLine: {
showAbove: true,
length: -40,
length2: 160,
// minTurnAngle: 90,
// maxSurfaceAngle: 90
}
},
// {
// hoverAnimation: false,
// type: 'pie',
// radius: ['55%', '65%'],
// center: ['75%', '50%'],
// roseType: 'area',
// itemStyle: {
// borderRadius: 5,
// color: 'rgb(245,217,126)',
// },
// data: [
// { value: 30, name: '目标' },
// ],
// label: {
// formatter: '{b}：{c}',
// },
// labelLine: {
// showAbove: true,
// length: -60,
// length2: 145,
// }
// // label: {
// // fontSize: 14,
// // position: 'outer',
// // alignTo: 'edge',
// // margin: 10,
// // },
// // labelLine: {
// // showAbove: true,
// // }
// },
//进度线
// {
// type: "pie",
// radius: ['55%', '65%'],
// center: ['75%', '50%'],
// itemStyle: {
// borderRadius: 5,
// color: 'rgb(245,217,126)',
// },
// hoverAnimation: false,
// clockwise: false,
// data: [
// {
// name: "",
// value: 80, //进度
// labelLine: {
// show: false
// },
// emphasis: {
// labelLine: {
// show: false
// },
// itemStyle: {
// // color: "#5886f0"
// }
// }
// },
// {
// //画剩余的刻度圆环
// name: "",
// value: 100 - 80,
// clockwise: false,
// itemStyle: {
// color: "rgba(255,255,255,0)"
// },
// label: {
// show: false
// },
// labelLine: {
// show: false
// },
// emphasis: {
// labelLine: {
// show: false
// },
// itemStyle: {
// color: "rgba(255,255,255,0)"
// }
// }
// }
// ],
// label: {
// formatter: '{b}：{c}',
// },
// labelLine: {
// showAbove: true,
// length: -60,
// length2: 145,
// }
// },
{
hoverAnimation: false,
name: '利润',
type: 'pie',
radius: ['40%', '50%'],
hoverAnimation: false,
radius: ['55%', '65%'],
center: ['75%', '50%'],
roseType: 'area',
labelLine: {
length: 30
},
label: {
formatter: '{b}：{c}',
borderWidth: 1,
borderRadius: 4,
alignTo: 'edge',
margin: '10'
},
itemStyle: {
borderRadius: 5,
color: 'rgb(116,212,184)'
},
data: [
{ value: 30, name: '利润' },
{ value: 10, name: '利润' },
{
//画剩余的刻度圆环
name: "",
value: 100 - 80,
clockwise: false,
itemStyle: {
color: "rgba(255,255,255,0)"
},
label: {
show: false
},
labelLine: {
show: false
},
emphasis: {
labelLine: {
show: false
},
itemStyle: {
color: "rgba(255,255,255,0)"
}
}
}
],
labelLine: {
showAbove: true,
length: -80,
length2: 160,
// minTurnAngle: 90,
// maxSurfaceAngle: 90
}
// label: {
// fontSize: 14,
// position: 'outer',
// alignTo: 'edge',
// margin: 10,
// },
// labelLine: {
// showAbove: true,
// }
},
{
hoverAnimation: false,
name: '目标',
type: 'pie',
radius: ['55%', '65%'],
hoverAnimation: false,
radius: ['40%', '50%'],
center: ['75%', '50%'],
roseType: 'area',
labelLine: {
length: 30
},
label: {
formatter: '{b}：{c}',
borderWidth: 1,
borderRadius: 4,
alignTo: 'edge',
margin: '10'
},
itemStyle: {
borderRadius: 5,
color: 'rgb(245,217,126)',
color: 'rgb(245,217,126)'
},
data: [
{ value: 30, name: '目标' },
{ value: 80, name: '目标' },
{
//画剩余的刻度圆环
name: "",
value: 100 - 80,
clockwise: false,
itemStyle: {
color: "rgba(255,255,255,0)"
},
label: {
show: false
},
labelLine: {
show: false
},
emphasis: {
labelLine: {
show: false
},
itemStyle: {
color: "rgba(255,255,255,0)"
}
}
}
],
labelLine: {
showAbove: true,
length: -60,
length2: 145,
}
// label: {
// fontSize: 14,
// position: 'outer',
// alignTo: 'edge',
// margin: 10,
// },
// labelLine: {
// showAbove: true,
// }
},
{
name: '收入',
type: 'pie',
hoverAnimation: false,
radius: ['70%', '80%'],
center: ['75%', '50%'],
labelLine: {
length: 30
},
label: {
formatter: '{b}：{c}',
borderWidth: 1,
borderRadius: 4,
alignTo: 'edge',
margin: '10'
},
itemStyle: {
borderRadius: 5,
color: 'rgb(170,202,253)'
},
data: [
{ value: 60, name: '收入' },
{
//画剩余的刻度圆环
name: "",
value: 60,
clockwise: false,
itemStyle: {
color: "rgba(255,255,255,0)"
},
label: {
show: false
},
labelLine: {
show: false
},
emphasis: {
labelLine: {
show: false
},
itemStyle: {
color: "rgba(255,255,255,0)"
}
}
}
],
}
]
}
}

66
src/views/bigScreen/drivingCabin/bottom2.vue
View File

@ -94,7 +94,7 @@ export default {
},
}
],
title: {
title: {
text: `${80}%`,
left: "80%",
top: "40%",
@ -148,47 +148,47 @@ export default {
center: ['50%', '50%'],
amplitude: 20,
color: {
type: 'linear',
x: 0,
y: 0,
x2: 1,
y2: 1,
colorStops: [
{
offset:0,
color: '#324791',
},
{
offset: 1,
color: '#449090',
},
],
globalCoord: false,
type: 'linear',
x: 0,
y: 0,
x2: 1,
y2: 1,
colorStops: [
{
offset: 0,
color: '#324791',
},
{
offset: 1,
color: '#449090',
},
],
globalCoord: false,
},
data: [
0.4,
{
value: 0.4,
direction: 'left',
},
0.4,
{
value: 0.4,
direction: 'left',
},
],
backgroundStyle: {
borderWidth: 1,
color: 'transparent',
borderWidth: 1,
color: 'transparent',
},
label: {
normal: {
formatter: '',
},
normal: {
formatter: '',
},
},
outline: {
show: true,
itemStyle: {
borderWidth: 0,
},
borderDistance: 0,
show: true,
itemStyle: {
borderWidth: 0,
},
borderDistance: 0,
},
},
},
{
type: "liquidFill", // 图表类型