Skip to content

bdc / bdcjg-web

Go to a project
Toggle navigation
Toggle navigation pinning
06f63028 by xiaomiao
Options

样式调整

1 parent c3afa824
Inline Side-by-side
Showing 6 changed files with 37 additions and 28 deletions
...@@ -4,14 +4,13 @@ ...@@ -4,14 +4,13 @@
4 :options="options" 4 :options="options"
5 id="bottomLeftChart" 5 id="bottomLeftChart"
6 height="100%" 6 height="100%"
7 width="100%" 7 width="100%"></Echart>
8 ></Echart>
9 </template> 8 </template>
10 9
11 <script> 10 <script>
12 import Echart from "@/common/echart"; 11 import Echart from "@/common/echart";
13 export default { 12 export default {
14 data() { 13 data () {
15 return { 14 return {
16 options: {}, 15 options: {},
17 }; 16 };
...@@ -27,7 +26,7 @@ export default { ...@@ -27,7 +26,7 @@ export default {
27 }, 26 },
28 watch: { 27 watch: {
29 cdata: { 28 cdata: {
30 handler(newData) { 29 handler (newData) {
31 this.options = { 30 this.options = {
32 tooltip: { 31 tooltip: {
33 trigger: "axis", 32 trigger: "axis",
...@@ -124,5 +123,5 @@ export default { ...@@ -124,5 +123,5 @@ export default {
124 deep: true, 123 deep: true,
125 }, 124 },
126 }, 125 },
127 }; 126 };
128 </script> 127 </script>
......
1 <template> 1 <template>
2 <!--登记类型总量柱状图 --> 2 <!--登记类型总量柱状图 -->
3 <Echart :options="options" id="bottomLeftChart" height="100%" width="100%" class="" ></Echart> 3 <Echart :options="options" id="bottomLeftChart" height="100%" width="100%" class=""></Echart>
4 </template> 4 </template>
5 5
6 <script> 6 <script>
7 import Echart from "@/common/echart"; 7 import Echart from "@/common/echart";
8 export default { 8 export default {
9 data () { 9 data () {
10 return { 10 return {
11 options: {}, 11 options: {},
...@@ -27,7 +27,7 @@ export default { ...@@ -27,7 +27,7 @@ export default {
27 grid: { 27 grid: {
28 // 让图表占满容器 28 // 让图表占满容器
29 top: "20%", 29 top: "20%",
30 left: "10%", 30 left: "12%",
31 right: "5%", 31 right: "5%",
32 bottom: "16%", 32 bottom: "16%",
33 }, 33 },
...@@ -127,5 +127,5 @@ export default { ...@@ -127,5 +127,5 @@ export default {
127 deep: true, 127 deep: true,
128 }, 128 },
129 }, 129 },
130 }; 130 };
131 </script> 131 </script>
......
...@@ -4,16 +4,15 @@ ...@@ -4,16 +4,15 @@
4 id="centreLeft1Chart" 4 id="centreLeft1Chart"
5 :key="key" 5 :key="key"
6 height="1.0417rem" 6 height="1.0417rem"
7 width="80%" 7 width="80%"></Echart>
8 ></Echart>
9 </template> 8 </template>
10 <script> 9 <script>
11 import Echart from "@/common/echart"; 10 import Echart from "@/common/echart";
12 export default { 11 export default {
13 components: { 12 components: {
14 Echart, 13 Echart,
15 }, 14 },
16 data() { 15 data () {
17 return { 16 return {
18 key: 0, 17 key: 0,
19 }; 18 };
...@@ -26,7 +25,7 @@ export default { ...@@ -26,7 +25,7 @@ export default {
26 }, 25 },
27 watch: { 26 watch: {
28 cdata: { 27 cdata: {
29 handler(newData) { 28 handler (newData) {
30 29
31 this.options = { 30 this.options = {
32 color: [ 31 color: [
...@@ -49,8 +48,11 @@ export default { ...@@ -49,8 +48,11 @@ export default {
49 label: { 48 label: {
50 formatter: (params) => { 49 formatter: (params) => {
51 // console.log(params) 50 // console.log(params)
52 return `${params.name}(${params.value}`; 51 return `${params.name}\n（${params.value}）`;
53 }, 52 },
53 position: "outer",
54 alignTo: "edge",
55 margin: 5
54 }, 56 },
55 labelLine: { 57 labelLine: {
56 lineStyle: { 58 lineStyle: {
...@@ -67,12 +69,12 @@ export default { ...@@ -67,12 +69,12 @@ export default {
67 deep: true, 69 deep: true,
68 }, 70 },
69 }, 71 },
70 }; 72 };
71 </script> 73 </script>
72 74
73 <style lang="scss" scoped> 75 <style lang="scss" scoped>
74 #centreLeft1Chart { 76 #centreLeft1Chart {
75 margin-bottom: 0.0521rem; 77 margin-bottom: 0.0521rem;
76 margin-left: .3125rem; 78 margin-left: 0.3125rem;
77 } 79 }
78 </style> 80 </style>
......
...@@ -409,3 +409,10 @@ aside { ...@@ -409,3 +409,10 @@ aside {
409 background: #FF7962; 409 background: #FF7962;
410 color: #FF7962; 410 color: #FF7962;
411 } 411 }
412 // 引入字体
413 @font-face {
414 font-family:AliBold;
415 src:url('../image/font/Alibaba_PuHuiTi_2.0_55_Regular_85_Bold.ttf')
416 }
417
418
......
1 <template> 1 <template>
2 <div class="rightcard"> 2 <div class="rightcard">
3 <div class="card2 cardCon mt-10">
4 <div class="cardhead">登记业务量</div>
5 <Rose />
6 </div>
3 <div class="card1 cardCon d-center"> 7 <div class="card1 cardCon d-center">
4 <div class="cardhead">新建国有房屋信息</div> 8 <div class="cardhead">新建国有房屋信息</div>
5 <div class="cardcontent" style="margin-top: .3646rem"> 9 <div class="cardcontent" style="margin-top: .3646rem">
6 <dv-scroll-board v-if="config.data.length > 0" :config="config" class="board" /> 10 <dv-scroll-board v-if="config.data.length > 0" :config="config" class="board" />
7 <div v-else="config.data.length==0" class="nodata">暂无数据</div> 11 <div v-else class="nodata">暂无数据</div>
8 </div> 12 </div>
9 </div> 13 </div>
10 <div class="card2 cardCon mt-10"> 14
11 <div class="cardhead">登记业务量</div>
12 <Rose />
13 </div>
14 <div class="card3 cardCon mt-10"> 15 <div class="card3 cardCon mt-10">
15 <div class="cardhead">登记类型总量</div> 16 <div class="cardhead">登记类型总量</div>
16 <columnarsmat /> 17 <columnarsmat />
......