柱状图

pages/index/performance/modules/histogram/chart.js

@@ -0,0 +1,37 @@
+import {
+	Chart,
+	Interval,
+	Axis
+} from '@antv/f2';
+
+import {
+	jsx as _jsx
+} from "@antv/f2/jsx-runtime";
+import {
+	jsxs as _jsxs
+} from "@antv/f2/jsx-runtime";
+
+export default (({
+	data
+}) => {
+	return _jsxs(Chart, {
+		data,
+		children: [
+			_jsx(Axis, {
+				field: "month"
+			}),
+			_jsx(Axis, {
+				field: "value"
+			}),
+			_jsx(Interval, {
+				x: "month",
+				y: "value",
+				color: "name",
+				adjust: {
+					type: 'dodge',
+					marginRatio: 0.05, // 设置分组间柱子的间距
+				},
+			})
+		]
+	});
+});

pages/index/performance/modules/histogram/index.js

@@ -0,0 +1,72 @@
+import {
+  createElement
+} from '@antv/f2';
+import Chart from './chart';
+import {
+  jsx as _jsx
+} from "@antv/f2/jsx-runtime";
+const _Http = getApp().globalData.http;
+Component({
+  data: {
+    onRenderChart: () => {},
+    show: true,
+    hidden: true
+  },
+  lifetimes: {
+    attached: function () {
+      // this.render()
+    },
+  },
+  methods: {
+    render() {
+      console.log('render')
+      _Http.basic({
+        id: "20230729142603",
+        "content": {
+          "datatype": "订货额",
+          date: Date.now()
+        },
+      }).then(res => {
+        console.log("柱状图数据", res)
+        if (res.msg != '成功' || res.data.length == 0) return;
+        this.setData({
+          hidden: false
+        })
+        let data = [];
+        ['01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12'].forEach(v => {
+          let list2 = res.data.filter(s => s.month == v);
+          let lastYear = list2[0].year > list2[1].year ? list2[1] : list2[0],
+            thisYear = list2[0].year > list2[1].year ? list2[0] : list2[1];
+          lastYear.name = 'London';
+          thisYear.name = 'Berlin';
+          data.push(lastYear)
+          data.push(thisYear)
+        })
+        this.setData({
+          onRenderChart: () => {
+            return this.renderChart(data.map(v => {
+              v.month = v.month
+              return v
+            }));
+          }
+        });
+
+        setTimeout(() => {
+          this.setData({
+            show: false
+          })
+          setTimeout(() => {
+            this.setData({
+              show: true
+            })
+          }, 100);
+        }, 100);
+      })
+    },
+    renderChart(data) {
+      return createElement(Chart, {
+        data
+      });
+    },
+  }
+})

pages/index/performance/modules/histogram/index.json

@@ -0,0 +1,6 @@
+{
+  "component": true,
+  "usingComponents": {
+      "f2": "@antv/f2-wx"
+  }
+}

pages/index/performance/modules/histogram/index.scss

@@ -0,0 +1,26 @@
+.container {
+	position: relative;
+	z-index: 99;
+	width: 100vw;
+	height: 500rpx;
+	background-color: #fff;
+}
+
+.label {
+	display: flex;
+	align-items: center;
+	height: 80rpx;
+	padding: 0 20rpx;
+	font-weight: bold;
+	font-size: 26rpx;
+	color: #666;
+	background-color: #fff;
+
+	.text {
+		display: inline-block;
+		width: 14rpx;
+		height: 26rpx;
+		background: #31A7FF;
+		margin-right: 14rpx;
+	}
+}

pages/index/performance/modules/histogram/index.wxml

@@ -0,0 +1,9 @@
+<view hidden="{{hidden}}">
+  <view class="label">
+    <text class="text" />
+    业绩明细
+  </view>
+  <view class="container" wx:if="{{show}}">
+    <f2 onRender="{{onRenderChart}}" />
+  </view>
+</view>