3 changed files with 311 additions and 1 deletions
@ -0,0 +1,162 @@ |
|||
/* 数据 */ |
|||
let nameList = [ |
|||
"1月", |
|||
"2月", |
|||
"3月", |
|||
"4月", |
|||
"5月", |
|||
"6月", |
|||
"7月", |
|||
"8月", |
|||
"9月", |
|||
"10月", |
|||
"11月", |
|||
"12月", |
|||
]; // 类别
|
|||
let valueList = [ |
|||
800, 520, 650, 950, 420, 600, 450, 720, 303, 503, 203, 703, 903, |
|||
]; // 人数
|
|||
// var yList = ["1000", "800", "轻度拥堵", "基本畅通", "畅通"]
|
|||
/* 数据整合 */ |
|||
let dataList = []; |
|||
nameList.map((item, index) => { |
|||
if (index === 4) { |
|||
dataList.push({ |
|||
name: item, |
|||
value: valueList[index], |
|||
itemStyle: { |
|||
color: { |
|||
type: "linear", |
|||
x: 0, |
|||
y: 0, |
|||
x2: 0, |
|||
y2: 1, |
|||
colorStops: [ |
|||
{ |
|||
offset: 0, |
|||
color: "#FFB904", // 0% 处的颜色
|
|||
}, |
|||
{ |
|||
offset: 1, |
|||
color: "#FF6969", // 100% 处的颜色
|
|||
}, |
|||
], |
|||
global: false, // 缺省为 false
|
|||
}, |
|||
borderRadius: 6, |
|||
}, |
|||
label: { show: false }, |
|||
}); |
|||
} else { |
|||
dataList.push({ |
|||
name: item, |
|||
value: valueList[index], |
|||
itemStyle: { |
|||
borderRadius: 6, |
|||
}, |
|||
}); |
|||
} |
|||
}); |
|||
|
|||
var options = { |
|||
grid: { |
|||
top: "15%", //上边距
|
|||
right: "5px", //右边距
|
|||
left: "30px", //左边距
|
|||
bottom: "2%", //下边距
|
|||
containLabel: true, |
|||
}, |
|||
tooltip: { |
|||
valueFormatter: function (value) { |
|||
return value + " %"; |
|||
}, |
|||
}, |
|||
xAxis: { |
|||
type: "category", |
|||
data: nameList, |
|||
axisTick: { |
|||
show: false, //隐藏X轴刻度
|
|||
}, |
|||
axisLine: { |
|||
lineStyle: { |
|||
color: "rgba(49, 217, 255, 0.8)", |
|||
}, |
|||
}, |
|||
axisLabel: { |
|||
show: true, |
|||
color: "#fff", |
|||
fontSize: "10px", |
|||
fontFamily: "Source Han Sans CN-Regular", |
|||
interval: 0, |
|||
rotate: 20, |
|||
}, |
|||
}, |
|||
yAxis: [ |
|||
{ |
|||
type: "value", |
|||
name: "（%）", |
|||
splitNumber: 5, |
|||
nameTextStyle: { |
|||
color: "#fff", |
|||
fontSize: 10, |
|||
align: "right", |
|||
// fontFamily: "Source Han Sans CN-Regular",
|
|||
// align: "left",
|
|||
// verticalAlign: "center",
|
|||
}, |
|||
axisLabel: { |
|||
fontSize: "10px", |
|||
color: "#fff", |
|||
fontFamily: "HarmonyOS Sans-Regular", |
|||
// formatter:function(value,index){
|
|||
// return yList[index]
|
|||
// }
|
|||
}, |
|||
axisLine: { |
|||
show: false, |
|||
}, |
|||
axisTick: { |
|||
show: false, |
|||
}, |
|||
splitLine: { |
|||
lineStyle: { |
|||
color: "rgba(49, 217, 255, 0.5)", |
|||
}, |
|||
}, |
|||
}, |
|||
], |
|||
series: [ |
|||
{ |
|||
type: "bar", |
|||
data: [10, 20, 10, 30, 25, 11, 20], |
|||
z: 4, |
|||
itemStyle: { |
|||
color: { |
|||
type: "linear", |
|||
x: 0, |
|||
y: 0, |
|||
x2: 0, |
|||
y2: 1, |
|||
colorStops: [ |
|||
{ |
|||
offset: 0, |
|||
color: "#06D7B1", // 0% 处的颜色
|
|||
}, |
|||
{ |
|||
offset: 1, |
|||
color: "#80F1BB", // 100% 处的颜色
|
|||
}, |
|||
], |
|||
global: false, // 缺省为 false
|
|||
}, |
|||
borderRadius: [4, 4, 0, 0], |
|||
}, |
|||
barWidth: 10, |
|||
label: { |
|||
show: false, |
|||
}, |
|||
}, |
|||
], |
|||
}; |
|||
|
|||
export default options; |
|||
@ -0,0 +1,144 @@ |
|||
<template> |
|||
<div class="congestion"> |
|||
<WgtTitle title="设备在线率柱状图"></WgtTitle> |
|||
<div class="board" ref="box"> |
|||
<Empty v-if="isEmpty" text="暂无数据..."></Empty> |
|||
<div ref="barCharts" v-else style="width: 100%; height: 100%"></div> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import WgtTitle from "../../../../perception/widgets/title"; |
|||
import * as echarts from "echarts"; |
|||
import chartOptions from "./assets/barCharts"; |
|||
|
|||
export default { |
|||
name: "OnLineBarCharts", |
|||
components: { |
|||
WgtTitle, |
|||
}, |
|||
data() { |
|||
return { |
|||
isEmpty: true, |
|||
}; |
|||
}, |
|||
props: { |
|||
dataList: { |
|||
type: Array, |
|||
default: () => [], |
|||
}, |
|||
}, |
|||
created() {}, |
|||
methods: {}, |
|||
watch: { |
|||
dataList: { |
|||
handler(newD, oldD) { |
|||
if (!newD || newD.length <= 0) { |
|||
this.isEmpty = true; |
|||
return; |
|||
} |
|||
let xData = []; |
|||
let valueData = []; |
|||
console.log("newD", newD); |
|||
newD.forEach((element) => { |
|||
xData.push(element.title); |
|||
valueData.push(+element.pctOnl.replace("%", "")); |
|||
}); |
|||
// newD.forEach((element) => { |
|||
// value.push(+element.pctOnl.replace("%", "")); |
|||
// indicator.push({ name: element.title, max: 100 }); |
|||
// toolTip += `<div style="display:flex; justify-content:space-between; line-height:2;"> |
|||
// <p>${element.title}</p> |
|||
// <p style="font-weight:bold; margin-left:30px">${element.pctOnl}</p> |
|||
// </div>`; |
|||
// }); |
|||
// chartsStatistics.radar.indicator = indicator; |
|||
// chartsStatistics.series[0].data = [ |
|||
// { |
|||
// value: value, |
|||
// name: "设备在线率", |
|||
// }, |
|||
// ]; |
|||
// chartsStatistics.tooltip.formatter = (params) => { |
|||
// return toolTip; |
|||
// }; |
|||
this.isEmpty = false; |
|||
chartOptions.xAxis.data = xData; |
|||
chartOptions.series[0].data = valueData; |
|||
this.$nextTick(() => { |
|||
var myChart = echarts.init(this.$refs["barCharts"]); |
|||
myChart.setOption(chartOptions); |
|||
chartOptions.counterReset(); |
|||
}); |
|||
}, |
|||
deep: true, |
|||
immediate: true, |
|||
}, |
|||
}, |
|||
mounted() {}, |
|||
}; |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
.congestion { |
|||
width: 100%; |
|||
display: flex; |
|||
flex-direction: column; |
|||
|
|||
.board { |
|||
position: relative; |
|||
height: 510px; |
|||
width: 100%; |
|||
padding: 0px 20px; |
|||
background: linear-gradient( |
|||
180deg, |
|||
rgba(6, 66, 88, 0) 0%, |
|||
rgba(6, 66, 88, 0.4) 100% |
|||
); |
|||
// border-radius: 5px 5px 5px 5px; |
|||
opacity: 1; |
|||
// border: 1px solid; |
|||
// border-image: linear-gradient(360deg, rgba(55, 231, 255, 0.3), rgba(55, 231, 255, 0)) 1 1; |
|||
display: flex; |
|||
justify-content: space-between; |
|||
align-items: center; |
|||
flex-direction: column; |
|||
|
|||
.ball { |
|||
position: absolute; |
|||
} |
|||
|
|||
.ballAnimation { |
|||
transform: translate(0px, -10px); |
|||
animation: mymove 2s infinite ease-in-out alternate; |
|||
|
|||
&.level_0 { |
|||
animation-delay: 0s; |
|||
} |
|||
|
|||
&.level_1 { |
|||
animation-delay: 0.6s; |
|||
} |
|||
|
|||
&.level_2 { |
|||
animation-delay: 1.4s; |
|||
} |
|||
|
|||
&.level_3 { |
|||
animation-delay: 1.8s; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
|||
@keyframes mymove { |
|||
0% { |
|||
transform: translate(0px, -10px); |
|||
} |
|||
|
|||
100% { |
|||
transform: translate(0px, 10px); |
|||
} |
|||
} |
|||
</style> |
|||
Loading…
Reference in new issue