From 139ef6463d877eac4faf8feafd7a804be6aee0d6 Mon Sep 17 00:00:00 2001
From: whycwx <1272078254@qq.com>
Date: 星期三, 24 三月 2021 09:32:20 +0800
Subject: [PATCH] 首页传参修改
---
src/components/charts/histogramAlternating.vue | 382 +++++++++++++++++++++++++++++------------------------
1 files changed, 208 insertions(+), 174 deletions(-)
diff --git a/src/components/charts/histogramAlternating.vue b/src/components/charts/histogramAlternating.vue
index 1092816..0fba1c0 100644
--- a/src/components/charts/histogramAlternating.vue
+++ b/src/components/charts/histogramAlternating.vue
@@ -4,8 +4,8 @@
</div>
<div class="titleShow">
- <span><i></i><span class="textTitle">鍛婅鏈烘埧鎬绘暟:</span><span class="textValue">150</span></span><br>
- <span><i></i><span class="textTitle">鍛婅鏈烘埧鏁版瘮渚�:</span><span class="textValue">50</span></span>
+ <span><i></i><span class="textTitle">鍛婅鏈烘埧鎬绘暟:</span><span class="textValue">{{ gjjfzs }}</span></span><br>
+ <span><i></i><span class="textTitle">鍛婅鏈烘埧鏁版瘮渚�:</span><span class="textValue">{{ gjjfsbl }}</span></span>
</div>
</div>
</template>
@@ -16,6 +16,7 @@
export default {
name: "histogramAlternating",
chart: "",
+ chartData:{},
props: {
id: {
require: true,
@@ -41,18 +42,46 @@
},
data() {
return {
- opt:null
+ gjjfzs:0,
+ gjjfsbl:0
}
},
methods: {
setOption(opt) {
- console.log(opt)
this.$options.chart.setOption(opt);
},
setData(data) {
let self = this;
if(data){
- self.opt = data;
+ self.$options.chartData = data;
+ self.gjjfzs = data.gjjfzs;
+ self.gjjfsbl = data.gjjfsbl;
+ self.optionSet(self.$options.chartData);
+ }else{
+ self.$axios({
+ method:"get",
+ url:"/powerAlarm/acABC",
+ params:{
+ userId:"1001"
+ }
+ }).then(res=>{
+ if(res.data.code == 1){
+ let result = res.data.data[0];
+ let zsObj = res.data.data[1];
+ let dataList = [];
+ let dataName = [];
+ for (const key in result) {
+ dataName.push(key);
+ dataList.push(result[key]);
+ }
+ self.$options.chartData.dataList = dataList;
+ self.$options.chartData.dataName = dataName;
+ self.gjjfzs = zsObj.鍛婅鏈烘埧鎬绘暟;
+ self.gjjfsbl = zsObj.鍛婅鏈烘埧鏁版瘮渚� + "%";
+ self.optionSet(self.$options.chartData);
+ console.log(res)
+ }
+ })
}
/*
// 缁熻鏁版嵁
@@ -63,185 +92,189 @@
*/
// const sideData = data.dataList.map(item => item + 1);//鍙宠竟鐨勯潰绋嶉珮涓�鐐�
console.log(this.$refs.echartsAlternating.offsetHeight);
- let domHeight = this.$refs.echartsAlternating.offsetHeight;
- // 璋冭瘯鍙充晶鏌卞瓙楂樺害
- let floatNumber = 2.5;
- if(domHeight<176){
- floatNumber = 4.5
- }
- if(domHeight>175 && domHeight<326){
- floatNumber = 2.5
- }
- if(domHeight>326 && domHeight<426){
- floatNumber = 1.8
- }
- if(domHeight>425){
- floatNumber = 1.2;
- }
- let option = {
- // backgroundColor: "#ffffff",
- tooltip: {
- trigger: 'axis',
- formatter: "{b} : {c}",
- axisPointer: { // 鍧愭爣杞存寚绀哄櫒锛屽潗鏍囪酱瑙﹀彂鏈夋晥
- type: 'shadow' // 榛樿涓虹洿绾匡紝鍙�変负锛�'line' | 'shadow'
- }
- },
- grid: {
- left: '10%',
- right: '5%',
- bottom: '10%',
- top: '17%',
- z: 22
- },
- xAxis: {
- data: self.opt.dataName,
- //鍧愭爣杞�
- axisLine: {
- lineStyle: {
- color: '#ccc'
- }
- },
- //鍧愭爣鍊兼爣娉�
- axisLabel: {
- show: true,
- textStyle: {
- color: '#fff',
- }
- }
- },
- yAxis: {
- //鍧愭爣杞�
- axisLine: {
- show: true,
- lineStyle: {
- color: '#ccc'
- }
- },
- //鍧愭爣鍊兼爣娉�
- axisLabel: {
- show: true,
- textStyle: {
- color: '#fff',
- }
- },
- //鍒嗘牸绾�
- splitLine: {
- show:false,
- lineStyle: {
- color: '#000'
- }
- }
- },
- series: [{
- name: '浜ゆ祦ABC',
+
+ },
+ optionSet(data){
+ // let domHeight = this.$refs.echartsAlternating.offsetHeight;
+ // 璋冭瘯鍙充晶鏌卞瓙楂樺害
+ // let floatNumber = domHeight * 0.001;
+ // if(domHeight<176){
+ // floatNumber = 4.5
+ // }
+ // if(domHeight>175 && domHeight<326){
+ // floatNumber = 2.5
+ // }
+ // if(domHeight>326 && domHeight<426){
+ // floatNumber = 1.8
+ // }
+ // if(domHeight>425){
+ // floatNumber = 1.2;
+ // }
+ let option = {
+ // backgroundColor: "#ffffff",
tooltip: {
- show: true,
- position: 'top'
+ trigger: 'axis',
+ formatter: "{b} : {c}",
+ axisPointer: { // 鍧愭爣杞存寚绀哄櫒锛屽潗鏍囪酱瑙﹀彂鏈夋晥
+ type: 'shadow' // 榛樿涓虹洿绾匡紝鍙�変负锛�'line' | 'shadow'
+ }
},
- type: 'bar',
- barWidth: 24.5,
- markPoint: {
- itemStyle:{
- color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
- offset: 0,
- color: "#0077EA" // 0% 澶勭殑棰滆壊
- }, {
- offset: 1,
- color: "#451DD3" // 100% 澶勭殑棰滆壊
- }], false),
- borderColor:new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
- offset: 0,
- color: "rgba(190,215,253,0.4)", // 0% 澶勭殑棰滆壊 BED7FD
- }, {
- offset: 1,
- color: "rgba(90,100,248,0.4)", // 100% 澶勭殑棰滆壊 5A64F8
- }], false),
- },
- // data: [
- // { value: 32, xAxis: 0, yAxis: 34},
- // { value: 43, xAxis: 1, yAxis: 45},
- // { value: 17, xAxis: 2, yAxis: 19},
- // { value: 27, xAxis: 3, yAxis: 29},
- // ]
- data:function(){
- let thisArr = self.opt.dataList.map((item,index)=>{
- let opt = {
- value:item,
- xAxis:index,
- yAxis:item + 2 //妞渾鐨勫潗鏍�
- }
- return opt;
- })
- return thisArr;
- }()
+ grid: {
+ left: '10%',
+ right: '5%',
+ bottom: '10%',
+ top: '17%',
+ z: 22
+ },
+ xAxis: {
+ data: data.dataName,
+ //鍧愭爣杞�
+ axisLine: {
+ lineStyle: {
+ color: '#ccc'
+ }
},
- itemStyle: {
- normal: {
- color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
- offset: 0,
- color: "#451DD3" // 0% 澶勭殑棰滆壊
- }, {
- offset: 1,
- color: "#0077EA" // 100% 澶勭殑棰滆壊
- }], false)
+ //鍧愭爣鍊兼爣娉�
+ axisLabel: {
+ show: true,
+ textStyle: {
+ color: '#fff',
+ }
}
},
- data: self.opt.dataList,
- barGap: 0
- }, {//渚у彸杈归厤缃�
- type: 'bar',
- barWidth: 6.5,
- itemStyle: {
- normal: {
- color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
- offset: 0,
- color: "#2663DA" // 0% 澶勭殑棰滆壊
- }, {
- offset: 1,
- color: "#69CCF6" // 100% 澶勭殑棰滆壊
- }], false)
+ yAxis: {
+ //鍧愭爣杞�
+ axisLine: {
+ show: true,
+ lineStyle: {
+ color: '#ccc'
+ }
+ },
+ //鍧愭爣鍊兼爣娉�
+ axisLabel: {
+ show: true,
+ textStyle: {
+ color: '#fff',
+ }
+ },
+ //鍒嗘牸绾�
+ splitLine: {
+ show:false,
+ lineStyle: {
+ color: '#000'
+ }
}
},
- barGap: 0,
- data: function(){
- const sideData = self.opt.dataList.map(item =>{
- item = item + floatNumber;
- return item;
- });//鍙宠竟鐨勯潰绋嶉珮涓�鐐�
- return sideData;
- }()
- },
- {//鐩栧瓙鐨勯厤缃�
- name: 'b',
- tooltip: {
- show: false
- },
- type: 'pictorialBar',
- itemStyle: {
- borderWidth: 1,
- borderColor: '#00B6EE',
- color: '#00B6EE'
- },
- // symbol: 'rect',
- // symbolOffset: [0, '-45%'],
- // symbolSize: [barWidth, barWidth],
- symbol: 'path://M 0,0 l 120,0 l -30,60 l -120,0 z',
- symbolSize: ['30', '12'],
- symbolOffset: ['0', '-12'],
- // symbolRotate: -45,
- symbolPosition: 'end',
- data: self.opt.dataList,
- z: 3
- }
- ]
- };
- this.setOption(option);
+ series: [{
+ name: '浜ゆ祦ABC',
+ tooltip: {
+ show: true,
+ position: 'top'
+ },
+ type: 'bar',
+ barWidth: 24.5,
+ markPoint: {
+ itemStyle:{
+ color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
+ offset: 0,
+ color: "#0077EA" // 0% 澶勭殑棰滆壊
+ }, {
+ offset: 1,
+ color: "#451DD3" // 100% 澶勭殑棰滆壊
+ }], false),
+ borderColor:new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
+ offset: 0,
+ color: "rgba(190,215,253,0.4)", // 0% 澶勭殑棰滆壊 BED7FD
+ }, {
+ offset: 1,
+ color: "rgba(90,100,248,0.4)", // 100% 澶勭殑棰滆壊 5A64F8
+ }], false),
+ },
+ // data: [
+ // { value: 32, xAxis: 0, yAxis: 34},
+ // { value: 43, xAxis: 1, yAxis: 45},
+ // { value: 17, xAxis: 2, yAxis: 19},
+ // { value: 27, xAxis: 3, yAxis: 29},
+ // ]
+ data:function(){
+ let thisArr = data.dataList.map((item,index)=>{
+ let opt = {
+ value:item,
+ xAxis:index,
+ yAxis:item// !=0?item + 2 : item//妞渾鐨勫潗鏍�
+ }
+ return opt;
+ })
+ return thisArr;
+ }()
+ },
+ itemStyle: {
+ normal: {
+ color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
+ offset: 0,
+ color: "#451DD3" // 0% 澶勭殑棰滆壊
+ }, {
+ offset: 1,
+ color: "#0077EA" // 100% 澶勭殑棰滆壊
+ }], false)
+ }
+ },
+ data: data.dataList,
+ barGap: 0
+ }, {//渚у彸杈归厤缃�
+ type: 'bar',
+ barWidth: 6.5,
+ itemStyle: {
+ normal: {
+ color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
+ offset: 0,
+ color: "#2663DA" // 0% 澶勭殑棰滆壊
+ }, {
+ offset: 1,
+ color: "#69CCF6" // 100% 澶勭殑棰滆壊
+ }], false)
+ }
+ },
+ barGap: 0,
+ data: function(){
+ const sideData = data.dataList.map(item =>{
+ let list = item// !=0?item + floatNumber:item;
+ return list;
+ });//鍙宠竟鐨勯潰绋嶉珮涓�鐐�
+ return sideData;
+ }()
+ },
+ {//鐩栧瓙鐨勯厤缃�
+ name: 'b',
+ tooltip: {
+ show: false
+ },
+ type: 'pictorialBar',
+ itemStyle: {
+ // borderWidth: 1,
+ // borderColor: '#00B6EE',
+ color: '#00B6EE'
+ },
+ // symbol: 'rect',
+ // symbolOffset: [0, '-45%'],
+ // symbolSize: [barWidth, barWidth],
+ symbol: 'path://M 0,0 l 120,0 l -30,60 l -120,0 z',
+ symbolSize: ['30', '12'],
+ symbolOffset: ['0', '0'],
+ // symbolRotate: -45,
+ symbolPosition: 'end',
+ data: data.dataList,
+ z: 3
+ }
+ ]
+ };
+ this.setOption(option);
},
resize() {
+ let self = this;
setTimeout(() => {
this.$options.chart.resize();
- this.setData(null);
+ this.setData(self.$options.chartData);
}, 300)
}
},
@@ -266,6 +299,7 @@
top: 0;
right: 0;
text-align: right;
+ padding-right: 5%;
overflow: hidden;
}
@@ -280,7 +314,7 @@
}
.titleShow .textTitle{
display: inline-block;
- width: 120px;
+ width: 9rem;
text-align: right;
font-size: 12px;
color: rgb(0,178,224);
--
Gitblit v1.9.1