i

src/components/Ucharts.vue

@@ -0,0 +1,178 @@
+<template>
+    <canvas
+        v-if="canvasId"
+        :id="canvasId"
+        :canvasId="canvasId"
+        :style="{
+            // width: (cWidth / cWidth) * sysInfo.windowWidth + 'px',
+            width: cWidth,
+            height: 250 + 'px',
+            transform: 'scale(' + 1 / pixelRatio + ')',
+            marginLeft: (cWidth * (pixelRatio - 1)) / 2 + 'px',
+            marginTop: (cHeight * (pixelRatio - 1)) / 2 + 'px',
+        }"
+        @touchstart="touchStart"
+        @touchmove="touchMove"
+        @touchend="touchEnd"
+        @error="error"
+    >
+    </canvas>
+</template>
+
+<script setup lang="ts" name="ucharts">
+import uCharts from "../utils/js_sdk/u-charts.min.js";
+import Taro from "@tarojs/taro";
+
+const canvases = {};
+
+const props = defineProps({
+    chartType: {
+        required: true,
+        type: String,
+        default: "column",
+    },
+    opts: {
+        required: true,
+        type: Object,
+        default() {
+            return null;
+        },
+    },
+    canvasId: {
+        type: String,
+        default: "u-canvas",
+    },
+    cWidth: {
+        default: 350,
+    },
+    cHeight: {
+        default: 250,
+    },
+    pixelRatio: {
+        type: Number,
+        default: 1,
+    },
+});
+
+Taro.useLoad(() => {
+    init();
+});
+
+const init = () => {
+    switch (props.chartType) {
+        case "column":
+            initColumnChart();
+            break;
+        case "line":
+            initLineChart();
+            break;
+        default:
+            break;
+    }
+};
+
+const initColumnChart = () => {
+    const ctx = Taro.createCanvasContext(props.canvasId);
+    canvases[props.canvasId] = new uCharts({
+        context: ctx,
+        type: "column",
+        fontSize: 11,
+        background: "#FFFFFF",
+        pixelRatio: props.pixelRatio,
+        animation: true,
+        categories: props.opts.categories,
+        series: props.opts.series,
+        enableScroll: true,
+        width: props.cWidth,
+        height: props.cHeight,
+        padding: [15,15,0,5],
+        legend: {},
+        xAxis: {
+            disableGrid: true,
+        },
+        yAxis: {
+            data: [
+                {
+                    min: 0,
+                },
+            ],
+        },
+        extra: {
+            column: {
+                type: "group",
+                width: 30,
+                activeBgColor: "#000000",
+                activeBgOpacity: 0.08,
+            },
+        },
+    });
+};
+
+const initLineChart = () => {
+    const ctx = Taro.createCanvasContext(props.canvasId);
+    canvases[props.canvasId] = new uCharts({
+        context: ctx,
+        type: "line",
+        fontSize: 11,
+        legend: true,
+        dataLabel: false,
+        dataPointShape: true,
+        background: "#FFFFFF",
+        pixelRatio: props.pixelRatio,
+        categories: props.opts.categories,
+        series: props.opts.series,
+        animation: true,
+        enableScroll: true,
+        xAxis: {
+            // type: "grid",
+            // gridColor: "#CCCCCC",
+            // gridType: "dash",
+            // dashLength: 8,
+            // itemCount: 4,
+            scrollShow: true,
+            disableGrid: true,
+        },
+        yAxis: {
+            gridType: "dash",
+            gridColor: "#CCCCCC",
+            dashLength: 8,
+            splitNumber: 5,
+            min: 10,
+            max: 180,
+            format: (val) => {
+                return val.toFixed(0) + "元";
+            },
+        },
+        width: props.cWidth * props.pixelRatio,
+        height: props.cHeight * props.pixelRatio,
+        extra: {
+            line: {
+                type: "straight",
+            },
+        },
+    });
+};
+
+const touchStart = (e: any) => {
+    canvases[props.canvasId].showToolTip(e, {
+        format: function (item: any, category: any) {
+            return category + " " + item.name + ":" + item.data;
+        },
+    });
+    canvases[props.canvasId].scrollStart(e);
+};
+
+const touchMove = (e: any) => {
+    canvases[props.canvasId].scroll(e);
+};
+
+const touchEnd = (e: any) => {
+    canvases[props.canvasId].scrollEnd(e);
+};
+
+const error = (e: any) => {
+    throw e;
+};
+</script>
+
+<style lang="scss"></style>