From be139ef4e8c2e8062912d737e1d645ffecf5aa31 Mon Sep 17 00:00:00 2001
From: whycwx <1272078254@qq.com>
Date: 星期四, 04 三月 2021 15:41:50 +0800
Subject: [PATCH] 优化3d图表
---
src/components/charts/histogramAlternating.vue | 52 ++++++++++++++++++++++++++++++++++++++++++++++------
1 files changed, 46 insertions(+), 6 deletions(-)
diff --git a/src/components/charts/histogramAlternating.vue b/src/components/charts/histogramAlternating.vue
index e3ad426..76b75e1 100644
--- a/src/components/charts/histogramAlternating.vue
+++ b/src/components/charts/histogramAlternating.vue
@@ -1,7 +1,11 @@
<template>
- <div class="echarts-wrapper">
+ <div class="echarts-wrapper echartsAlternating">
<div class="echarts-content" ref="alternating">
+ </div>
+ <div class="titleShow">
+ <p><i></i><span class="textTitle">鍛婅鏈烘埧鎬绘暟:</span><span class="textValue">150</span></p>
+ <p><i></i><span class="textTitle">鍛婅鏈烘埧鏁版瘮渚�:</span><span class="textValue">50</span></p>
</div>
</div>
</template>
@@ -53,7 +57,7 @@
}
*/
- const sideData = data.dataList.map(item => item + 1.5);//鍙宠竟鐨勯潰绋嶉珮涓�鐐�
+ const sideData = data.dataList.map(item => item + 1);//鍙宠竟鐨勯潰绋嶉珮涓�鐐�
let option = {
// backgroundColor: "#ffffff",
@@ -69,27 +73,30 @@
//鍧愭爣杞�
axisLine: {
lineStyle: {
- color: '#000000'
+ color: '#ccc'
}
},
//鍧愭爣鍊兼爣娉�
axisLabel: {
show: true,
textStyle: {
- color: '#000',
+ color: '#fff',
}
}
},
yAxis: {
//鍧愭爣杞�
axisLine: {
- show: true
+ show: true,
+ lineStyle: {
+ color: '#ccc'
+ }
},
//鍧愭爣鍊兼爣娉�
axisLabel: {
show: true,
textStyle: {
- color: '#000',
+ color: '#fff',
}
},
//鍒嗘牸绾�
@@ -200,5 +207,38 @@
</script>
<style scoped>
+ .echartsAlternating{
+ position:relative;
+ }
+ .titleShow{
+ width: 100%;
+ height: 100px;
+ position: absolute;
+ top: 3%;
+ right: 10%;
+ text-align: right;
+ }
+ .titleShow i{
+ display: inline-block;
+ width: 5px;
+ height: 5px;
+ border-radius: 50%;
+ background: rgb(246,127,33);
+ margin-right: 5px;
+ margin-bottom: 3px;
+ }
+ .titleShow .textTitle{
+ display: inline-block;
+ width: 120px;
+ text-align: right;
+ color: rgb(0,178,224);
+ }
+ .titleShow .textValue{
+ display: inline-block;
+ width: 80px;
+ /* text-align: left; */
+ text-align: left;
+ color: rgb(246,127,33);
+ }
</style>
\ No newline at end of file
--
Gitblit v1.9.1