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' ENV = 'production'
# 科研生产展示平台/生产环境 # 科研生产展示平台/生产环境
VUE_APP_BASE_API = 'http://120.26.107.74:1818' #VUE_APP_BASE_API = 'http://120.26.107.74:1818'
#VUE_APP_BASE_API = 'http://127.0.0.1:1818' VUE_APP_BASE_API = '/api'

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

@ -27,6 +27,20 @@ export default {
chart: null, chart: null,
option: { 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: { grid: {
top: '5%', top: '5%',
left: '3%', left: '3%',
@ -74,8 +88,16 @@ export default {
stack: 'total', stack: 'total',
data: [120, 132, 101, 134, 90, 230, 210], data: [120, 132, 101, 134, 90, 230, 210],
itemStyle: { itemStyle: {
color: 'rgb(116,212,184)' color: 'rgb(116,212,184)',
}, },
// label: {
// show : true,
// position : 'top',
// formatter : "{c}",
// textStyle : {
// color: '#fff'
// }
// }
}, },
{ {
name: '收入', name: '收入',
@ -96,89 +118,241 @@ export default {
color: 'rgb(245,217,126)' 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, // hoverAnimation: false,
length: -40, // type: 'pie',
length2: 160, // radius: ['55%', '65%'],
// minTurnAngle: 90, // center: ['75%', '50%'],
// maxSurfaceAngle: 90 // 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', type: 'pie',
radius: ['40%', '50%'], hoverAnimation: false,
radius: ['55%', '65%'],
center: ['75%', '50%'], center: ['75%', '50%'],
roseType: 'area', labelLine: {
length: 30
},
label: {
formatter: '{b}：{c}',
borderWidth: 1,
borderRadius: 4,
alignTo: 'edge',
margin: '10'
},
itemStyle: { itemStyle: {
borderRadius: 5, borderRadius: 5,
color: 'rgb(116,212,184)' color: 'rgb(116,212,184)'
}, },
data: [ data: [
{ value: 30, name: '利润' }, { value: 10, name: '利润' },
], {
//画剩余的刻度圆环
name: "",
value: 100 - 80,
clockwise: false,
itemStyle: {
color: "rgba(255,255,255,0)"
},
label: {
show: false
},
labelLine: { labelLine: {
showAbove: true, show: false
length: -80, },
length2: 160, emphasis: {
// minTurnAngle: 90, labelLine: {
// maxSurfaceAngle: 90 show: false
},
itemStyle: {
color: "rgba(255,255,255,0)"
} }
// label: { }
// fontSize: 14, }
// position: 'outer', ],
// alignTo: 'edge',
// margin: 10,
// },
// labelLine: {
// showAbove: true,
// }
}, },
{ {
hoverAnimation: false, name: '目标',
type: 'pie', type: 'pie',
radius: ['55%', '65%'], hoverAnimation: false,
radius: ['40%', '50%'],
center: ['75%', '50%'], center: ['75%', '50%'],
roseType: 'area', labelLine: {
length: 30
},
label: {
formatter: '{b}：{c}',
borderWidth: 1,
borderRadius: 4,
alignTo: 'edge',
margin: '10'
},
itemStyle: { itemStyle: {
borderRadius: 5, borderRadius: 5,
color: 'rgb(245,217,126)', color: 'rgb(245,217,126)'
}, },
data: [ data: [
{ value: 30, name: '目标' }, { value: 80, name: '目标' },
], {
labelLine: { //画剩余的刻度圆环
showAbove: true, name: "",
length: -60, value: 100 - 80,
length2: 145, clockwise: false,
} itemStyle: {
// label: { color: "rgba(255,255,255,0)"
// fontSize: 14,
// position: 'outer',
// alignTo: 'edge',
// margin: 10,
// },
// labelLine: {
// showAbove: true,
// }
}, },
label: {
show: false
},
labelLine: {
show: false
},
emphasis: {
labelLine: {
show: false
},
itemStyle: {
color: "rgba(255,255,255,0)"
}
}
}
],
},
{
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)"
}
}
}
],
}
] ]
} }
} }