From 7c1e4502fe4431cc43755afc42935bbadf1464cd Mon Sep 17 00:00:00 2001 From: luxiaotao1123 <t1341870251@163.com> Date: 星期二, 01 八月 2023 11:01:28 +0800 Subject: [PATCH] # --- src/components/datav/cards.vue | 28 +++++++++++++++++----------- 1 files changed, 17 insertions(+), 11 deletions(-) diff --git a/src/components/datav/cards.vue b/src/components/datav/cards.vue index 9d3c8c3..961bdad 100644 --- a/src/components/datav/cards.vue +++ b/src/components/datav/cards.vue @@ -2,7 +2,7 @@ <div id="cards"> <div class="chart-name"> 璁惧鏁呴殰鏈堣秼鍔� - <dv-decoration-3 style="width:200px;height:20px;" /> + <dv-decoration-3 style="width:200px;height:30px;" /> </div> <dv-charts :option="option" /> </div> @@ -16,15 +16,15 @@ data() { return { option: { - legend: { // 灏忔爣绛� + legend: { // 鍥炬爣 data: [ { name: '绯诲垪A', - color: '#333' + color: '#37a2da' }, { name: '绯诲垪B', - color: '#fff' + color: '#32c5e9' } ], textStyle: { @@ -32,10 +32,13 @@ }, left: 0, top: '50%', - orient: 'vertical' + orient: 'vertical', + iconWidth: 40, // 瀹� + iconHeight: 15, // 楂� + itemGap: 15 // 闂磋窛 }, xAxis: { - name: '绗竴鍛�', + // name: '绗竴鍛�', data: ['鍛ㄤ竴', '鍛ㄤ簩', '鍛ㄤ笁', '鍛ㄥ洓', '鍛ㄤ簲', '鍛ㄥ叚', '鍛ㄦ棩'], nameTextStyle: { // 杞存爣棰� fill: '#fff', @@ -55,10 +58,11 @@ }, yAxis: { name: '閿�鍞', + position: 'right', data: 'value', nameTextStyle: { // 杞存爣棰� fill: '#fff', - fontSize: 15 + fontSize: 15, }, axisLine: { // 杞寸嚎 style: { @@ -78,7 +82,7 @@ data: [1200, 2230, 1900, 2100, 3500, 4200, 3985], type: 'bar', gradient: { - color: ['#333'] + color: ['#37a2da'] } }, { @@ -86,7 +90,7 @@ data: [1200, 2230, 1900, 2100, 3500, 4200, 3985], type: 'bar', gradient: { - color: ['#fff'] + color: ['#32c5e9'] } } ] @@ -120,12 +124,14 @@ border-top: 2px solid rgba(1, 153, 209, .5); box-shadow: 0 0 3px blue; box-sizing: border-box; - padding: 0px 30px; + padding: 5px 0 0 50px; // 绉诲姩鍥炬爣 position: relative; .chart-name { + display: flex; align-items: center; gap: 20px; // 鍔ㄧ敾鍦ㄥ彸渚� + font-weight: bold; position: absolute; - right: 70px; + left: 20px; text-align: right; font-size: 20px; top: 10px; -- Gitblit v1.9.1