From c58faef08795d83d4e284f3bc8acfed5df33f028 Mon Sep 17 00:00:00 2001
From: haoxuan <haoxuan>
Date: 星期五, 01 十二月 2023 16:23:06 +0800
Subject: [PATCH] 设备负荷组件
---
src/views/cockpitPage/components/BarChart.vue | 173 +++++++++++++++++++++++++++++++++++++++++++++++----------
1 files changed, 143 insertions(+), 30 deletions(-)
diff --git a/src/views/cockpitPage/components/BarChart.vue b/src/views/cockpitPage/components/BarChart.vue
index cb22b0b..1d090ae 100644
--- a/src/views/cockpitPage/components/BarChart.vue
+++ b/src/views/cockpitPage/components/BarChart.vue
@@ -2,6 +2,14 @@
<div class="bar-chart">
<ChartTitle name="杞﹂棿姝ｅ搧鐜�"></ChartTitle>
<div class="bar-contents">
+ <div class="bar-total">
+ <div class="bar-item">
+ 褰撴棩鍚堣鐢熶骇锛歿{ chartData.total }}
+ </div>
+ <div class="bar-item">
+ 姝ｅ搧鐜囷細{{ chartData.rate }}
+ </div>
+ </div>
<div class="chart" ref="chart"></div>
</div>
</div>
@@ -18,15 +26,17 @@
props: {},
data() {
return {
-
+ chartData:{
+ total:1000,
+ rate:'99%',
+ datax:['绗竴杞﹂棿', '绗簩杞﹂棿', '绗笁杞﹂棿', '绗洓杞﹂棿','绗簲杞﹂棿','绗叚杞﹂棿',],
+ datay:[120, 200, 150, 180, 170, 150, 130,180, 140],
+ datay2:[20, 30, 50, 40, 70, 50, 30,80,40],
+ }
};
},
mounted() {
- let chartData={
- datax:['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
- datay:[120, 200, 150, 80, 70, 110, 130]
- }
- this.pieChart('chart',chartData)
+ this.pieChart('chart',this.chartData)
},
watch: {},
methods: {
@@ -35,18 +45,50 @@
let chartDom = this.$refs[chartName]
let myChart = echarts.init(chartDom);
let option;
+ let lineColor='#35ddc74d'
if(data){
option = {
- color:['#618DF8'],
+ color:['#dcb018','#00FFFF'],
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'none'
+ },
+ textStyle:{
+ color:'#00FFFF',
+ },
+ borderColor:'#00FFFF',
+ backgroundColor:'rbga(1,247,253,0.6)',
+ formatter:function(a){
+ let list=[]
+ let listItem=''
+ let firstString='<span style=width:70px;display:inline-block">'+
+ '鐢熶骇鎬绘暟'+
+ '</span> '+
+ data.total
+ list.push(firstString)
+ for(let i in a){
+ let str='<span style=width:70px;display:inline-block">'+
+ a[i].seriesName+
+ '</span> '+
+ a[i].value
+
+ list.push(str)
+ }
+ let lastString='<span style=width:70px;display:inline-block">'+
+ '姝ｅ搧鐜�'+
+ '</span> '+
+ data.rate
+ list.push(lastString)
+ listItem=list.join('<br>')
+ return '<div class="showBox">'+listItem+'</div>'
}
},
grid: {
- right: "11%",
- bottom:'21%',
+ right: "10px",
+ bottom:'60px',
+ left:'10px',
+ top:'10px',
},
dataZoom: [
{
@@ -72,15 +114,27 @@
},
],
legend: {
- itemWidth: 12,
- itemHeight: 12,
+ itemWidth: 8,
+ itemHeight: 8,
itemGap: 35,//闂磋窛
- // data:data.legend?[
- // {
- // name:data.legend.data[0],
- // icon: 'roundRect',
- // },
- // ]:[]
+ bottom:'5px',
+ left:'center',
+ data:[
+ {
+ name:'姝ｅ搧鏁伴噺',
+ icon:'circle',
+ textStyle:{
+ color:'#dcb018'
+ }
+ },
+ {
+ name:'娆″搧鏁伴噺',
+ icon:'circle',
+ textStyle:{
+ color:'#00FFFF'
+ }
+ },
+ ],
},
xAxis: [
{
@@ -91,15 +145,15 @@
axisLine: {
show: true,
lineStyle: {
- color:'#EAEAEA',
+ color:lineColor,
}
},
axisLabel:{
- rotate:45,
- margin: 12,
+ // rotate:45,
+ margin: 10,
show: true,
textStyle: {
- color: '#9B9B9B'
+ color: '#00FFFF'
},
},
data: data.datax?data.datax:[],
@@ -108,7 +162,7 @@
yAxis: [
{
type: '',
- name: 'yyy',
+ name: '',
// min: data.yAxis[0].min?data.yAxis.min:0,
minInterval: 1,//鍧愭爣杞存槸鏁存暟
max:Math.ceil(eval(`Math.max(${data.datay})`)/5)*5,//鏁版嵁鏈�澶у�煎姞3
@@ -117,17 +171,51 @@
axisLine: {
show: true,
lineStyle: {
- color:'#EAEAEA',
+ color:lineColor,
}
},
nameTextStyle:{
- color:"#9B9B9B",
+ color:"#00FFFF",
},
splitLine: {
show: true,
lineStyle: {
// 浣跨敤娣辨祬鐨勯棿闅旇壊
- color: '#EAEAEA',
+ color: lineColor,
+ }
+ },
+ axisTick: {
+ show: false
+ },
+ axisLabel: {
+ textStyle: {
+ color: '#9B9B9B'
+ },
+ formatter: ''
+ }
+ },
+ {
+ type: '',
+ name: '',
+ // min: data.yAxis[0].min?data.yAxis.min:0,
+ minInterval: 1,//鍧愭爣杞存槸鏁存暟
+ max:Math.ceil(eval(`Math.max(${data.datay2})`)/5)*5,//鏁版嵁鏈�澶у�煎姞3
+ interval: Math.ceil(eval( `Math.max(${data.datay2})`)/5)*5 / 5,
+ position: 'right',
+ axisLine: {
+ show: true,
+ lineStyle: {
+ color:lineColor,
+ }
+ },
+ nameTextStyle:{
+ color:"#00FFFF",
+ },
+ splitLine: {
+ show: true,
+ lineStyle: {
+ // 浣跨敤娣辨祬鐨勯棿闅旇壊
+ color:lineColor,
}
},
axisTick: {
@@ -143,8 +231,8 @@
],
series:[
{
- type: '',
- name: 'y',
+ type: 'bar',
+ name: '姝ｅ搧鏁伴噺',
barWidth: '20%',
itemStyle: {
normal: {
@@ -153,6 +241,18 @@
}
},
data: data.datay,
+ },
+ {
+ type: 'bar',
+ name: '娆″搧鏁伴噺',
+ barWidth: '20%',
+ itemStyle: {
+ normal: {
+ //鏌卞舰鍥惧渾瑙掞紝鍒濆鍖栨晥鏋�
+ barBorderRadius:[4, 4, 0, 0],
+ }
+ },
+ data: data.datay2,
}
]
};
@@ -170,16 +270,29 @@
<style scoped lang="scss">
.bar-chart{
width:100%;
- height:calc(100% - 10px);
- padding:10px 0 0;
+ height:calc(100% - 20px);
+ padding:20px 0 0;
.bar-contents{
width:100%;
height:calc(100% - 60px);
border:1px solid #00FFFF;
box-sizing: border-box;
+ .bar-total{
+ width:100%;
+ height:30px;
+ line-height:30px;
+ color:#dcb018;
+ font-size:14px;
+ margin-top:10px;
+ .bar-item{
+ width:50%;
+ text-align:center;
+ float:left;
+ }
+ }
.chart{
width: 100%;
- height:100%;
+ height:calc(100% - 40px);
}
}
}
--
Gitblit v1.8.0