金价

package.json

@@ -9,7 +9,7 @@
   "module": "dist/index.esm.js",
   "unpkg": "dist/index.umd.js",
   "types": "dist/index.d.ts",
-  "packageManager":"yarn@1.22.22",
+  "packageManager": "yarn@1.22.22",
   "files": [
     "dist"
   ],
@@ -34,6 +34,7 @@
     "browserslist": "^4.24.2",
     "chinese-workday": "^1.10.0",
     "colorofchina": "^1.0.6",
+    "echarts": "^5.5.1",
     "gsap": "^3.12.2",
     "less": "^4.1.3",
     "naive-ui": "^2.40.1",

src/api/mix/index.js

@@ -50,3 +50,10 @@ export function hydict(params) {
     params:{word:params}
   });
 }
+// goldPrice
+export function goldPrice() {
+  return request({
+    url: '/why/gold',
+    method: 'get',
+  })
+}

src/views/widget/component/gold.js

@@ -0,0 +1,147 @@
+
+export function goldOp(x, y) {
+  console.log(x, y);
+
+  let option = {
+    // backgroundColor: '#0e202d',
+    "title": {
+      show: false,
+    },
+    "grid": {
+      "top": 50,
+      "bottom": 60
+    },
+    "tooltip": {},
+    "xAxis": {
+      "data": x,
+      "axisTick": {
+        "show": false
+      },
+      "axisLine": {
+        "show": false
+      },
+      "axisLabel": {
+        interval: 0,
+        textStyle: {
+          color: '#beceff',
+          fontSize: 13,
+        },
+        margin: 30, //刻度标签与轴线之间的距离。
+      }
+    },
+    "yAxis": {
+      "splitLine": {
+        "show": false
+      },
+      "axisTick": {
+        "show": false
+      },
+      "axisLine": {
+        "show": false
+      },
+      "axisLabel": {
+        "show": false
+      }
+    },
+    "series": [
+      {
+
+        "type": "bar",
+        // "silent": true,
+        "barWidth": 20,
+        "barGap": "-100%",
+        "label": {
+          "normal": {
+            "show": true,
+            "position": "top",
+            "distance": 20,
+            "textStyle": {
+              "color": "#b9b7ff", //柱子对应数值颜色
+              "fontSize": 18,
+            }
+          }
+        },
+        "itemStyle": {
+          "normal": {
+            "color": {
+              "x": 0,
+              "y": 0,
+              "x2": 0,
+              "y2": 1,
+              "type": "linear",
+              "global": false,
+              "colorStops": [{
+                "offset": 0,
+                "color": "rgba(185,183,255,0.5)"
+              }, {
+                "offset": 1,
+                "color": "#e9a5ff" //底部渐变颜色
+              }]
+            }
+          }
+        },
+        data: y
+      },
+      {
+        "name": "",
+        "type": "pictorialBar",
+        "symbolSize": [20, 10],
+        "symbolOffset": [0, -5],
+        "z": 12,
+        "symbolPosition": "end",
+        "itemStyle": {
+          "normal": {
+            "color": "#b9b7ff" //圆柱顶部颜色
+          }
+        },
+        data: y
+      },
+      {
+        "name": "",
+        "type": "pictorialBar",
+        "symbolSize": [20, 10],
+        "symbolOffset": [0, 5],
+        "z": 12,
+        "itemStyle": {
+          "normal": {
+            "color": "#e9a5ff" //圆柱底部颜色
+          }
+        },
+        data: y
+      },
+      {
+        "name": "",
+        "type": "pictorialBar",
+        "symbolSize": [30, 15],
+        "symbolOffset": [0, 10],
+        "z": 11,
+        "itemStyle": {
+          "normal": {
+            "color": "transparent",
+            "borderColor": "#e9a5ff", //底部内圆圈颜色
+            "borderWidth": 5
+          }
+        },
+        data: y
+      },
+      {
+        "name": "",
+        "type": "pictorialBar",
+        "symbolSize": [60, 30],
+        "symbolOffset": [0, 18],
+        "z": 10,
+        "itemStyle": {
+          "normal": {
+            "color": "transparent",
+            "borderColor": "#e9a5ff", //底部外圆圈颜色
+            "borderType": "dashed",
+            "borderWidth": 5
+          }
+        },
+        data: y
+      },
+      
+    ]
+  }
+  return option
+}

src/views/widget/component/gold.vue

@@ -0,0 +1,74 @@
+<template>
+  <n-scrollbar>
+    <div class="w-full h-64" id="gold"></div>
+    <n-descriptions class="mt-20 text-center" label-placement="left" label-align="center" bordered :column="4">
+      <n-descriptions-item label="品种名称" :span="2">
+        {{ active.typename }}
+      </n-descriptions-item>
+      <n-descriptions-item label="品种代号">
+        {{ active.type }}
+      </n-descriptions-item>
+      <n-descriptions-item label="总成交量">
+        {{ active.tradeamount }}
+      </n-descriptions-item>
+      <n-descriptions-item label="最新价">
+        {{ active.price }}
+      </n-descriptions-item>
+      <n-descriptions-item label="开盘价">
+        {{ active.openingprice }}
+      </n-descriptions-item>
+      <n-descriptions-item label="最高价">
+        {{ active.maxprice }}
+      </n-descriptions-item>
+      <n-descriptions-item label="最低价">
+        {{ active.minprice }}
+      </n-descriptions-item>
+      <n-descriptions-item label="涨跌幅">
+        {{ active.changepercent }}
+      </n-descriptions-item>
+      <n-descriptions-item label="昨日收盘价">
+        {{ active.lastclosingprice }}
+      </n-descriptions-item>
+      <n-descriptions-item label="更新时间" :span="2">
+        {{ active.updatetime }}
+      </n-descriptions-item>
+    </n-descriptions>
+  </n-scrollbar>
+</template>
+
+<script setup>
+import * as echarts from 'echarts';
+import { goldOp } from './gold.js';
+
+//mark import
+
+//mark data
+const gold = ref([]);
+const active = ref({});
+
+//mark method
+//mark 周期、内置函数等
+onMounted(async () => {
+  const res = await $http.mix.goldPrice()
+  console.log(res.result);
+  gold.value = res.result;
+  active.value = gold.value[0]
+  const x = [];
+  const y = [];
+  gold.value.forEach((item) => {
+    x.push(item.typename);
+    y.push(item.price);
+  });
+  const mc = echarts.init(document.getElementById('gold'));
+  const op = goldOp(x, y)
+  mc.setOption(op)
+  mc.on('click', function (params) {
+    // 控制台打印数据的名称
+    console.log(params.name);
+    active.value = res.result.filter((item) => item.typename == params.name)[0];
+  });
+});
+
+</script>
+
+<style scoped></style>

src/views/widget/index.vue

@@ -5,7 +5,8 @@
         <div class="text-xl text-center">小工具</div>
       </template>
       <div class=" flex justify-around flex-wrap">
-        <n-card v-show="i.show" class="w-[45%] mt-4 h-20 bg-[#f3f4f5]" hoverable size="small" @click="handdleWidget(i)" v-for="i in widgets">
+        <n-card v-show="i.show" class="w-[45%] mt-4 h-20 bg-[#f3f4f5]" hoverable size="small" @click="handdleWidget(i)"
+          v-for="i in widgets">
           <template #header>
             <div class="text-pp-500 text-center">{{ i.title }}</div>
           </template>
@@ -29,37 +30,41 @@
 <script setup>
 //mark import
 import dict from './component/dict.vue';
+import gold from './component/gold.vue';
 import phone2qq from './component/phone2qq.vue';
 import qq2phone from './component/qq2phone.vue';
+
 //mark data
-const comp = ref(markRaw(qq2phone),);
-const title = ref('QQ号查手机号');
-const widgets = ref([{
-  name: 'qq2phone',
-  comp: markRaw(qq2phone),
-  title: 'QQ号查手机号',
-  desc: "请勿乱用，打扰别人生活！",
-  show: true
-}, {
-  name: 'phone2qq',
-  comp: markRaw(phone2qq),
-  title: '手机号查QQ号',
-  desc: "请勿乱用，打扰别人生活！",
-  show: true
-}, {
-  name: 'dict',
-  comp: markRaw(dict),
-  title: '汉语字典',
-  desc: "汉语字典，初级版，期待升级。。。",
-  show: true
-},
-{
-  name: 'test',
-  comp: null,
-  title: '',
-  desc: "",
-  show: true
-}
+const comp = ref(markRaw(gold),);
+const title = ref('金价');
+const widgets = ref([
+  {
+    name: 'gild',
+    comp: markRaw(gold),
+    title: '金价',
+    desc: "今日金价分析。。。",
+    show: true
+  }, {
+    name: 'dict',
+    comp: markRaw(dict),
+    title: '汉语字典',
+    desc: "汉语字典，初级版，期待升级。。。",
+    show: true
+  },
+  {
+    name: 'qq2phone',
+    comp: markRaw(qq2phone),
+    title: 'QQ号查手机号',
+    desc: "请勿乱用，打扰别人生活！",
+    show: true
+  }, {
+    name: 'phone2qq',
+    comp: markRaw(phone2qq),
+    title: '手机号查QQ号',
+    desc: "请勿乱用，打扰别人生活！",
+    show: true
+  },
+
 ]);
 
 

vite.config.js

@@ -57,3 +57,4 @@ export default defineConfig({
     allowJs: true,
   },
 });
+