bigDataApp/pages/deviceDetails/weatherStation/charts.vue

<template>
  <view>
    <canvas
      canvas-id="orIfOOkumJYtFcnuJkjxcySENqRtXceW"
      id="orIfOOkumJYtFcnuJkjxcySENqRtXceW"
      class="charts"
      @touchstart="touchstart"
      @touchmove="touchmove"
      @touchend="touchend"
    />
  </view>
</template>

<script>
import uCharts from "../../../components/js_sdk/u-charts/u-charts/u-charts.js";
var uChartsInstance = {};
export default {
  data() {
    return {
      cWidth: 320,
      cHeight: 200,
    };
  },
  onReady() {
    //这里的 750 对应 css .charts 的 width
    // this.cWidth = uni.upx2px(340);
    //这里的 500 对应 css .charts 的 height
    // this.cHeight = uni.upx2px(200);
    this.getServerData();
  },
  methods: {
    getServerData() {
      //模拟从服务器获取数据时的延时
      setTimeout(() => {
        //模拟服务器返回数据，如果数据格式和标准格式不同，需自行按下面的格式拼接
        let res = {
          categories: ["2018", "2019", "2020", "2021", "2022", "2023"],
          series: [
            {
              name: "成交量A",
              linearColor: [
                [0, "#1890FF"],
                [0.25, "#00B5FF"],
                [0.5, "#00D1ED"],
                [0.75, "#00E6BB"],
                [1, "#90F489"],
              ],
              data: [35, 8, 25, 37, 4, 20],
            },
          ],
        };
        this.drawCharts("orIfOOkumJYtFcnuJkjxcySENqRtXceW", res);
      }, 500);
    },
    drawCharts(id, data) {
      const ctx = uni.createCanvasContext(id, this);
      uChartsInstance[id] = new uCharts({
        type: "line",
        context: ctx,
        width: this.cWidth,
        height: this.cHeight,
        categories: data.categories,
        series: data.series,
        animation: true,
        background: "#FFFFFF",
        color: [
          "#1890FF",
          "#91CB74",
          "#FAC858",
          "#EE6666",
          "#73C0DE",
          "#3CA272",
          "#FC8452",
          "#9A60B4",
          "#ea7ccc",
        ],
        padding: [10, 10, 10, 10],
        enableScroll: true,
        legend: {
          position: "top",
        },
        xAxis: {
          disableGrid: true,
          scrollShow: true,
          itemCount: 4,
        },
        yAxis: {
          gridType: "dash",
          dashLength: 2,
        },
        dataLabel: false,
        extra: {
          line: {
            type: "curve",
            width: 2,
            activeType: "hollow",
          },
        },
      });
    },
    touchstart(e) {
      uChartsInstance[e.target.id].scrollStart(e);
    },
    touchmove(e) {
      uChartsInstance[e.target.id].scroll(e);
    },
    touchend(e) {
      uChartsInstance[e.target.id].scrollEnd(e);
      uChartsInstance[e.target.id].touchLegend(e);
      uChartsInstance[e.target.id].showToolTip(e);
    },
  },
};
</script>

<style scoped>
.charts {
  width: 750rpx;
  height: 500rpx;
}
</style>