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 285 additions and 276 deletions
1 <template> 1 <template>
2 <!--上报统计柱状图 --> 2 <!--上报统计柱状图 -->
3 <Echart 3 <Echart
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 };
18 },
19 components: {
20 Echart,
21 },
22 props: {
23 cdata: {
24 type: Object,
25 default: () => ({}),
26 }, 17 },
27 }, 18 components: {
28 watch: { 19 Echart,
29 cdata: { 20 },
30 handler(newData) { 21 props: {
31 this.options = { 22 cdata: {
32 tooltip: { 23 type: Object,
33 trigger: "axis", 24 default: () => ({}),
34 axisPointer: { 25 },
35 type: "shadow", 26 },
36 }, 27 watch: {
37 }, 28 cdata: {
38 grid: { 29 handler (newData) {
39 left: "5%", 30 this.options = {
40 right: "8%", 31 tooltip: {
41 bottom: "5%", 32 trigger: "axis",
42 containLabel: true, 33 axisPointer: {
43 }, 34 type: "shadow",
44 xAxis: {
45 type: "value",
46 splitLine: { show: false },
47 axisTick: { show: false },
48 axisLine: {
49 show: true,
50 lineStyle: {
51 color: "#01F3F5",
52 },
53 },
54 axisLabel: {
55 show: true,
56 textStyle: {
57 color: "#01F3F5",
58 fontSize: 12,
59 }, 35 },
60 }, 36 },
61 }, 37 grid: {
62 yAxis: { 38 left: "5%",
63 type: "category", 39 right: "8%",
64 data: newData.category, 40 bottom: "5%",
65 axisLine: { 41 containLabel: true,
66 show: true,
67 lineStyle: {
68 color: "#01F3F5",
69 },
70 }, 42 },
71 }, 43 xAxis: {
72 series: [ 44 type: "value",
73 { 45 splitLine: { show: false },
74 name: "成功", 46 axisTick: { show: false },
75 type: "bar", 47 axisLine: {
76 stack: "总量",
77 barWidth: 18,
78 label: {
79 show: true, 48 show: true,
80 formatter: function (params) { 49 lineStyle: {
81 if (params.value > 0) { 50 color: "#01F3F5",
82 return params.value; 51 },
83 } else {
84 return '';
85 }
86 }
87 }, 52 },
88 itemStyle: { 53 axisLabel: {
89 normal: { 54 show: true,
90 color: "#5fba7d", 55 textStyle: {
56 color: "#01F3F5",
57 fontSize: 12,
91 }, 58 },
92 }, 59 },
93 data: newData.barData,
94
95 }, 60 },
96 { 61 yAxis: {
97 name: "失败", 62 type: "category",
98 type: "bar", 63 data: newData.category,
99 stack: "总量", 64 axisLine: {
100 label: {
101 show: true, 65 show: true,
102 formatter: function (params) { 66 lineStyle: {
103 if (params.value > 0) { 67 color: "#01F3F5",
104 return params.value; 68 },
105 } else { 69 },
106 return ''; 70 },
107 } 71 series: [
108 } 72 {
109 73 name: "成功",
74 type: "bar",
75 stack: "总量",
76 barWidth: 18,
77 label: {
78 show: true,
79 formatter: function (params) {
80 if (params.value > 0) {
81 return params.value;
82 } else {
83 return '';
84 }
85 }
86 },
87 itemStyle: {
88 normal: {
89 color: "#5fba7d",
90 },
91 },
92 data: newData.barData,
110 93
111 }, 94 },
112 itemStyle: { 95 {
113 normal: { 96 name: "失败",
114 // 这里设置圆角 97 type: "bar",
115 color: "#c97168", 98 stack: "总量",
99 label: {
100 show: true,
101 formatter: function (params) {
102 if (params.value > 0) {
103 return params.value;
104 } else {
105 return '';
106 }
107 }
108
109
116 }, 110 },
111 itemStyle: {
112 normal: {
113 // 这里设置圆角
114 color: "#c97168",
115 },
116 },
117 data: newData.lineData,
117 }, 118 },
118 data: newData.lineData, 119 ],
119 }, 120 };
120 ], 121 },
121 }; 122 immediate: true,
123 deep: true,
122 }, 124 },
123 immediate: true,
124 deep: true,
125 }, 125 },
126 }, 126 };
127 };
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: {},
12 }; 12 };
13 },
14 components: {
15 Echart,
16 },
17 props: {
18 cdata: {
19 type: Object,
20 default: () => ({}),
21 }, 13 },
22 }, 14 components: {
23 watch: { 15 Echart,
24 cdata: { 16 },
25 handler (newData) { 17 props: {
26 this.options = { 18 cdata: {
27 grid: { 19 type: Object,
28 // 让图表占满容器 20 default: () => ({}),
29 top: "20%", 21 },
30 left: "10%", 22 },
31 right: "5%", 23 watch: {
32 bottom: "16%", 24 cdata: {
33 }, 25 handler (newData) {
34 xAxis: { 26 this.options = {
35 data: newData.category, 27 grid: {
36 axisLabel: { 28 // 让图表占满容器
37 show: true, 29 top: "20%",
38 color: "#ffff", 30 left: "12%",
31 right: "5%",
32 bottom: "16%",
33 },
34 xAxis: {
35 data: newData.category,
36 axisLabel: {
37 show: true,
38 color: "#ffff",
39 textStyle: { 39 textStyle: {
40 fontWeight: "normal", 40 fontWeight: "normal",
41 fontSize: "8", 41 fontSize: "8",
42 }, 42 },
43 },
44 axisTick: {
45 show: false,
46 },
47 axisLine: {
48 show: true,
49 lineStyle: {
50 color: "rgba(95, 180, 237, 0.32)",
51 }, 43 },
52 } 44 axisTick: {
53 }, 45 show: false,
54 yAxis: {
55 splitLine: {
56 show: false,
57 },
58 axisLine: {
59 show: true,
60 lineStyle: {
61 color: "rgba(95, 180, 237, 0.32)",
62 }, 46 },
47 axisLine: {
48 show: true,
49 lineStyle: {
50 color: "rgba(95, 180, 237, 0.32)",
51 },
52 }
63 }, 53 },
64 axisTick: { 54 yAxis: {
65 show: false, 55 splitLine: {
66 }, 56 show: false,
67 axisLabel: {
68 color: "#ffff",
69 },
70 },
71 series: [
72 {
73 // 顶部圆片
74 type: "pictorialBar",
75 animation: false,
76 itemStyle: {
77 color: "rgba(115, 240, 252, 1)",
78 }, 57 },
79 symbolRepeat: false, 58 axisLine: {
80 symbolSize: [15, 8], 59 show: true,
81 symbolMargin: 1, 60 lineStyle: {
82 z: 10, 61 color: "rgba(95, 180, 237, 0.32)",
83 data: newData.lineData, 62 },
84 symbolPosition: "end", 63 },
85 symbolOffset: [0, -4], 64 axisTick: {
86 }, 65 show: false,
87 { 66 },
88 // 底部圆片 67 axisLabel: {
89 type: "pictorialBar", 68 color: "#ffff",
90 animation: false,
91
92 itemStyle: {
93 color: "rgba(50, 96, 225, 0.8)",
94 }, 69 },
95 symbolRepeat: false,
96 symbolSize: [15, 8],
97 symbolMargin: 1,
98 z: 10,
99 data: newData.lineData,
100 symbolPosition: "start",
101 symbolOffset: [0, 3],
102 }, 70 },
103 { 71 series: [
104 barWidth: 15, 72 {
105 animation: false, 73 // 顶部圆片
74 type: "pictorialBar",
75 animation: false,
76 itemStyle: {
77 color: "rgba(115, 240, 252, 1)",
78 },
79 symbolRepeat: false,
80 symbolSize: [15, 8],
81 symbolMargin: 1,
82 z: 10,
83 data: newData.lineData,
84 symbolPosition: "end",
85 symbolOffset: [0, -4],
86 },
87 {
88 // 底部圆片
89 type: "pictorialBar",
90 animation: false,
106 91
107 type: "bar", 92 itemStyle: {
108 label: { 93 color: "rgba(50, 96, 225, 0.8)",
109 show: true,
110 position: "top",
111 textStyle: {
112 color: "#ffff",
113 }, 94 },
95 symbolRepeat: false,
96 symbolSize: [15, 8],
97 symbolMargin: 1,
98 z: 10,
99 data: newData.lineData,
100 symbolPosition: "start",
101 symbolOffset: [0, 3],
114 }, 102 },
115 itemStyle: { 103 {
116 color: this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [ 104 barWidth: 15,
117 { offset: 1, color: "rgba(82, 180, 249, 0.35)" }, 105 animation: false,
118 { offset: 0, color: "rgba(82, 180, 249, 1)" }, 106
119 ]), 107 type: "bar",
108 label: {
109 show: true,
110 position: "top",
111 textStyle: {
112 color: "#ffff",
113 },
114 },
115 itemStyle: {
116 color: this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
117 { offset: 1, color: "rgba(82, 180, 249, 0.35)" },
118 { offset: 0, color: "rgba(82, 180, 249, 1)" },
119 ]),
120 },
121 data: newData.lineData,
120 }, 122 },
121 data: newData.lineData, 123 ],
122 }, 124 }
123 ], 125 },
124 } 126 immediate: true,
127 deep: true,
125 }, 128 },
126 immediate: true,
127 deep: true,
128 }, 129 },
129 }, 130 };
130 };
131 </script> 131 </script>
......
...@@ -4,75 +4,77 @@ ...@@ -4,75 +4,77 @@
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 },
16 data() {
17 return {
18 key: 0,
19 };
20 },
21 props: {
22 cdata: {
23 type: Object,
24 default: () => ({}),
25 }, 14 },
26 }, 15 data () {
27 watch: { 16 return {
28 cdata: { 17 key: 0,
29 handler(newData) { 18 };
19 },
20 props: {
21 cdata: {
22 type: Object,
23 default: () => ({}),
24 },
25 },
26 watch: {
27 cdata: {
28 handler (newData) {
30 29
31 this.options = { 30 this.options = {
32 color: [ 31 color: [
33 "#37a2da", 32 "#37a2da",
34 "#32c5e9", 33 "#32c5e9",
35 "#9fe6b8", 34 "#9fe6b8",
36 "#ffdb5c", 35 "#ffdb5c",
37 "#ff9f7f", 36 "#ff9f7f",
38 "#8378ea", 37 "#8378ea",
39 "#fb7293", 38 "#fb7293",
40 "#e7bcf3", 39 "#e7bcf3",
41 40
42 ], 41 ],
43 series: [ 42 series: [
44 { 43 {
45 name: "Access From", 44 name: "Access From",
46 type: "pie", 45 type: "pie",
47 radius: ["54%", "70%"], 46 radius: ["54%", "70%"],
48 avoidLabelOverlap: true, 47 avoidLabelOverlap: true,
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}）`;
52 },
53 position: "outer",
54 alignTo: "edge",
55 margin: 5
53 }, 56 },
54 }, 57 labelLine: {
55 labelLine: { 58 lineStyle: {
56 lineStyle: { 59 width: 3,
57 width: 3, 60 },
58 }, 61 },
59 }, 62 data: newData.seriesData,
60 data: newData.seriesData, 63 }
61 } 64 ],
62 ], 65 };
63 }; 66 this.key++;
64 this.key++; 67 },
68 immediate: true,
69 deep: true,
65 }, 70 },
66 immediate: true,
67 deep: true,
68 }, 71 },
69 }, 72 };
70 };
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>
......
...@@ -408,4 +408,11 @@ aside { ...@@ -408,4 +408,11 @@ aside {
408 top: 2px; 408 top: 2px;
409 background: #FF7962; 409 background: #FF7962;
410 color: #FF7962; 410 color: #FF7962;
411 }
...\ No newline at end of file ...\ No newline at end of file
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 />
......