jdt-user/src/components/Ucharts.vue

<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>