{"id":846,"date":"2026-03-06T09:30:44","date_gmt":"2026-03-06T01:30:44","guid":{"rendered":"http:\/\/www.bracku.com\/?p=846"},"modified":"2026-03-24T15:09:40","modified_gmt":"2026-03-24T07:09:40","slug":"uniapp%e6%95%b0%e6%8d%ae%e5%88%86%e6%9e%90%e5%9b%be%e6%80%8e%e4%b9%88%e7%94%bbqiun-data-charts%e5%9b%be%e8%a1%a8%e7%bb%84%e4%bb%b6","status":"publish","type":"post","link":"http:\/\/www.bracku.com\/?p=846","title":{"rendered":"uniapp\u6570\u636e\u5206\u6790\u56fe\u600e\u4e48\u753bqiun-data-charts\u56fe\u8868\u7ec4\u4ef6"},"content":{"rendered":"\n

qiun-data-charts<\/code> \u662f\u4e00\u4e2a\u4e13\u95e8\u4e3a uni-app \u5f00\u53d1\u7684\u56fe\u8868\u7ec4\u4ef6\uff0c\u81f3\u4e8e\u6211\u4e3a\u4ec0\u4e48\u8981\u51fa\u8fd9\u7bc7\u6587\u7ae0\uff0c\u662f\u56e0\u4e3a\u6211\u53bb\u7f51\u4e0a\u641c\u7d22\u7684\u65f6\u5019\u60f3\u7528qiun-data-charts<\/code>\u53bb\u753b\u6570\u636e\u5206\u6790\u56fe\uff0c\u4f46\u662f\u5374\u5f88\u5c11\u6709\u8bf4qiun-data-charts<\/code>\u7684\uff0c\u5927\u591a\u662fecharts,ucharts<\/p>\n\n\n\n

\u57fa\u7840\u6570\u636e\u683c\u5f0f\uff1a<\/strong><\/p>\n\n\n\n

\u65e0\u8bba\u662f\u6298\u7ebf\u56fe\u8fd8\u662f\u67f1\u72b6\u56fe\uff0c\u6570\u636e\u683c\u5f0f\u90fd\u662f\u7edf\u4e00\u7684\uff1a<\/p>\n\n\n\n

chartData: {\n  categories: [\"1\u6708\", \"2\u6708\", \"3\u6708\", \"4\u6708\", \"5\u6708\"],  \/\/ X\u8f74\u5206\u7c7b\n  series: [  \/\/ \u6570\u636e\u7cfb\u5217\uff08\u53ef\u4ee5\u591a\u6761\u7ebf\/\u67f1\uff09\n    {\n      name: \"\u7cfb\u5217\u540d\u79f0\",  \/\/ \u56fe\u4f8b\u540d\u79f0\n      data: [\u6570\u503c1, \u6570\u503c2, \u6570\u503c3, ...]  \/\/ \u5bf9\u5e94\u7684\u6570\u636e\n    }\n  ]\n}<\/code><\/pre>\n\n\n\n
\u6298\u7ebf\u56fe\u5b9e\u73b0<\/strong><\/p>\n\n\n\n
\u57fa\u7840<\/p>\n\n\n\n
<template>\n  <view class=\"charts-box\">\n    <qiun-data-charts \n      type=\"line\"  \/\/ \u5173\u952e\uff1a\u8bbe\u7f6e\u4e3aline\n      :chartData=\"lineData\"\n      :ontouch=\"true\"  \/\/ \u5f00\u542f\u89e6\u6478\u4ea4\u4e92\n      background=\"none\"\n    \/>\n  <\/view>\n<\/template>\n\n<script>\nexport default {\n  data() {\n    return {\n      lineData: {\n        categories: [\"1\u6708\", \"2\u6708\", \"3\u6708\", \"4\u6708\", \"5\u6708\", \"6\u6708\"],\n        series: [\n          {\n            name: \"\u5145\u7535\u91cf\",\n            data: [35, 20, 45, 60, 50, 80]\n          }\n        ]\n      }\n    }\n  }\n}\n<\/script>\n\n<style>\n.charts-box {\n  width: 100%;\n  height: 400rpx;  \/\/ \u5fc5\u987b\u8bbe\u7f6e\u5bbd\u9ad8\n}\n<\/style><\/code><\/pre>\n\n\n\n
\u591a\u6761\u6298\u7ebf\u5bf9\u6bd4\uff1a<\/p>\n\n\n\n
lineData: {\n  categories: [\"1\u6708\", \"2\u6708\", \"3\u6708\", \"4\u6708\", \"5\u6708\", \"6\u6708\"],\n  series: [\n    {\n      name: \"\u5145\u7535\u7ad9A\",\n      data: [35, 20, 45, 60, 50, 80]\n    },\n    {\n      name: \"\u5145\u7535\u7ad9B\", \n      data: [28, 35, 40, 55, 70, 65]\n    },\n    {\n      name: \"\u5145\u7535\u7ad9C\",\n      data: [45, 30, 50, 65, 55, 90]\n    }\n  ]\n}<\/code><\/pre>\n\n\n\n
\u5e26\u6eda\u52a8\u6761\u7684\u6298\u7ebf\u56fe\uff08\u6570\u636e\u8fc7\u591a\u65f6\uff09<\/p>\n\n\n\n
<qiun-data-charts \n  type=\"line\"\n  :chartData=\"lineData\"\n  :opts=\"{\n    enableScroll: true,  \/\/ \u5f00\u542f\u6eda\u52a8\n    xAxis: {\n      scrollShow: true,  \/\/ \u663e\u793a\u6eda\u52a8\u6761\n      itemCount: 5,      \/\/ \u4e00\u5c4f\u663e\u793a\u591a\u5c11\u4e2aX\u8f74\u6807\u7b7e\n      disableGrid: true\n    }\n  }\"\n\/><\/code><\/pre>\n\n\n\n
\n\n\n\n
\u67f1\u72b6\u56fe\u5b9e\u73b0<\/strong><\/p>\n\n\n\n
\u57fa\u7840\u67f1\u72b6\u56fe<\/strong><\/p>\n\n\n\n
<template>\n  <view class=\"charts-box\">\n    <qiun-data-charts \n      type=\"column\"  \/\/ \u5173\u952e\uff1a\u8bbe\u7f6e\u4e3acolumn\n      :chartData=\"columnData\"\n      :ontouch=\"true\"\n    \/>\n  <\/view>\n<\/template>\n\n<script>\nexport default {\n  data() {\n    return {\n      columnData: {\n        categories: [\"\u5145\u7535\u7ad9A\", \"\u5145\u7535\u7ad9B\", \"\u5145\u7535\u7ad9C\", \"\u5145\u7535\u7ad9D\"],\n        series: [\n          {\n            name: \"\u5145\u7535\u91cf(\u5ea6)\",\n            data: [1200, 850, 2100, 1600]\n          }\n        ]\n      }\n    }\n  }\n}\n<\/script><\/code><\/pre>\n\n\n\n
\u5206\u7ec4\u67f1\u72b6\u56fe\uff08\u591a\u7ec4\u5bf9\u6bd4\uff09<\/p>\n\n\n\n
columnData: {\n  categories: [\"1\u6708\", \"2\u6708\", \"3\u6708\", \"4\u6708\"],\n  series: [\n    {\n      name: \"\u5145\u7535\u91cf\",\n      data: [1200, 1350, 1100, 1800]\n    },\n    {\n      name: \"\u6536\u76ca\",\n      data: [2400, 2700, 2200, 3600]\n    }\n  ]\n}<\/code><\/pre>\n\n\n\n
\u81ea\u5b9a\u4e49\u6837\u5f0f\u67f1\u72b6\u56fe<\/p>\n\n\n\n
<qiun-data-charts \n  type=\"column\"\n  :chartData=\"columnData\"\n  :opts=\"{\n    color: ['#15c38e', '#FFAD49'],  \/\/ \u81ea\u5b9a\u4e49\u989c\u8272\n    padding: [25, 15, 20, 5],\n    xAxis: {\n      disableGrid: true,\n      fontSize: 12\n    },\n    yAxis: {\n      gridType: 'dash',  \/\/ \u865a\u7ebf\u7f51\u683c\n      dashLength: 2\n    },\n    extra: {\n      column: {\n        type: 'group',  \/\/ \u5206\u7ec4\u663e\u793a\n        width: 40,      \/\/ \u67f1\u72b6\u5bbd\u5ea6\n        borderRadius: 4 \/\/ \u5706\u89d2\n      }\n    }\n  }\"\n\/><\/code><\/pre>\n\n\n\n
\n\n\n\n
\u5982\u679c\u60f3\u8c03\u7528\u63a5\u53e3\uff1a<\/p>\n\n\n\n
\u52a8\u6001\u6570\u636e\u66f4\u65b0<\/strong><\/p>\n\n\n\n
\u4ece\u63a5\u53e3\u83b7\u53d6\u6570\u636e<\/p>\n\n\n\n
export default {\n  data() {\n    return {\n      chartData: {\n        categories: [],\n        series: [{\n          name: \"\u5145\u7535\u91cf\",\n          data: []\n        }]\n      }\n    }\n  },\n  methods: {\n    async fetchData() {\n      \/\/ \u8c03\u7528\u63a5\u53e3\u83b7\u53d6\u6570\u636e\n      const res = await this.$u.api.getChartData()\n      \n      \/\/ \u5904\u7406\u8fd4\u56de\u7684\u6570\u636e\n      this.chartData = {\n        categories: res.data.map(item => item.date),  \/\/ \u63d0\u53d6X\u8f74\n        series: [{\n          name: \"\u5145\u7535\u91cf\",\n          data: res.data.map(item => item.value)      \/\/ \u63d0\u53d6\u6570\u636e\n        }]\n      }\n      \/\/ \u6ce8\u610f\uff1a\u6570\u636e\u66f4\u65b0\u540e\uff0c\u56fe\u8868\u4f1a\u81ea\u52a8\u91cd\u65b0\u6e32\u67d3\n    }\n  },\n  onShow() {\n    this.fetchData()\n  }\n}<\/code><\/pre>\n\n\n\n
\n\n\n\n
\u5b8c\u6574\u793a\u4f8b\uff1a\u5145\u7535\u7ad9\u6570\u636e\u770b\u677f<\/em><\/strong><\/p>\n\n\n\n
<template>\n  <view>\n    <!-- \u6298\u7ebf\u56fe\uff1a\u5145\u7535\u8d8b\u52bf -->\n    <view class=\"chart-card\">\n      <view class=\"chart-title\">\u8fd17\u5929\u5145\u7535\u8d8b\u52bf<\/view>\n      <qiun-data-charts \n        type=\"line\"\n        :chartData=\"trendData\"\n        :opts=\"lineOpts\"\n      \/>\n    <\/view>\n    \n    <!-- \u67f1\u72b6\u56fe\uff1a\u5145\u7535\u7ad9\u6392\u884c -->\n    <view class=\"chart-card\">\n      <view class=\"chart-title\">\u5145\u7535\u7ad9\u5145\u7535\u91cf\u6392\u884c<\/view>\n      <qiun-data-charts \n        type=\"column\"\n        :chartData=\"rankData\"\n        :opts=\"columnOpts\"\n      \/>\n    <\/view>\n  <\/view>\n<\/template>\n\n<script>\nexport default {\n  data() {\n    return {\n      trendData: {\n        categories: [\"05-01\", \"05-02\", \"05-03\", \"05-04\", \"05-05\", \"05-06\", \"05-07\"],\n        series: [{\n          name: \"\u5145\u7535\u91cf(\u5ea6)\",\n          data: [320, 450, 380, 520, 490, 680, 750]\n        }]\n      },\n      rankData: {\n        categories: [\"\u5145\u7535\u7ad9A\", \"\u5145\u7535\u7ad9B\", \"\u5145\u7535\u7ad9C\", \"\u5145\u7535\u7ad9D\", \"\u5145\u7535\u7ad9E\"],\n        series: [{\n          name: \"\u5145\u7535\u91cf(\u5ea6)\",\n          data: [1250, 980, 1560, 720, 1890]\n        }]\n      },\n      lineOpts: {\n        color: [\"#15c38e\"],\n        extra: {\n          line: {\n            width: 3,\n            smooth: true  \/\/ \u5e73\u6ed1\u66f2\u7ebf\n          }\n        }\n      },\n      columnOpts: {\n        color: [\"#FFAD49\"],\n        extra: {\n          column: {\n            width: 30,\n            borderRadius: 4\n          }\n        }\n      }\n    }\n  }\n}\n<\/script>\n\n<style>\n.chart-card {\n  background: #fff;\n  margin: 20rpx;\n  padding: 20rpx;\n  border-radius: 16rpx;\n  box-shadow: 0 2rpx 10rpx rgba(0,0,0,0.05);\n}\n.chart-title {\n  font-size: 32rpx;\n  font-weight: bold;\n  margin-bottom: 20rpx;\n  padding-left: 20rpx;\n  border-left: 8rpx solid #15c38e;\n}\n<\/style><\/code><\/pre>\n\n\n\n
    \n
  • \"line\"<\/code>\u00a0\u2192 \u6298\u7ebf\u56fe<\/li>\n\n\n\n
  • \"column\"<\/code>\u00a0\u2192 \u67f1\u72b6\u56fe<\/li>\n\n\n\n
  • \"pie\"<\/code>\u00a0\u2192 \u997c\u56fe<\/li>\n\n\n\n
  • \"area\"<\/code>\u00a0\u2192 \u9762\u79ef\u56fe<\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"
    qiun-data-charts \u662f\u4e00\u4e2a\u4e13\u95e8\u4e3a uni-app \u5f00\u53d1\u7684\u56fe\u8868\u7ec4\u4ef6\uff0c\u81f3\u4e8e\u6211\u4e3a\u4ec0\u4e48\u8981\u51fa\u8fd9\u7bc7 […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[6],"tags":[],"class_list":["post-846","post","type-post","status-publish","format-standard","hentry","category-recommend"],"_links":{"self":[{"href":"http:\/\/www.bracku.com\/index.php?rest_route=\/wp\/v2\/posts\/846","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/www.bracku.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/www.bracku.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/www.bracku.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/www.bracku.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=846"}],"version-history":[{"count":3,"href":"http:\/\/www.bracku.com\/index.php?rest_route=\/wp\/v2\/posts\/846\/revisions"}],"predecessor-version":[{"id":1076,"href":"http:\/\/www.bracku.com\/index.php?rest_route=\/wp\/v2\/posts\/846\/revisions\/1076"}],"wp:attachment":[{"href":"http:\/\/www.bracku.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=846"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/www.bracku.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=846"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/www.bracku.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=846"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}