小程序使用ucharts踩过的坑，实例代码分析

最新推荐文章于 2025-04-02 17:37:47 发布

扒财

最新推荐文章于 2025-04-02 17:37:47 发布

阅读量1.1k

点赞数

文章标签：小程序 vue.js echarts 前端

本文链接：https://blog.youkuaiyun.com/dalaojiyun/article/details/133065407

版权

如题：

#在微信小程序端使用 ucharts 遇到的问题、踩过的坑，以下作为记录，谨以此希望后续自己及需要的人不再踩坑，丝滑顺畅#

uniapp开发的小程序，echarts.min.js已经压缩到了500kb，但是还是觉的很大，其实也不小。所以就搜到了ucharts，u-charts.min.js仅有142kb（官网有原生工具和组件工具，网络上充斥着很多组件工具的使用案例，我使用的是原生工具）

uCharts跨平台图表库

上代码-区域图（仅用次为例）：

<template>
  <view>
    <canvas :canvas2d="true" type="2d" :canvas-id="canvasId" :id="canvasId" class="charts" :ontouch="true"
      @touchstart="touchstart($event, canvasId)" @touchmove="touchmove($event, canvasId)"
      @touchend="touchend($event, canvasId)" />
  </view>
</template>

<script>
import uCharts from './u-charts.min.js';
var uChartsInstance = {};
export default {
  props: {
    canvasId: {
      type: String,
      default: 'ec-canvas'
    },
    tuData: {
      type: Object,
      default: {}
    }
  },
  data () {
    return {
      cWidth: 750,
      cHeight: 500,
      pixelRatio: 2,
      textList: []
    };
  },
  onReady () {
    const canvasId = this.canvasId;
    //这里的 750 对应 css .charts 的 width
    this.cWidth = uni.upx2px(750);
    //这里的 500 对应 css .charts 的 height
    this.cHeight = uni.upx2px(500);
    this.getServerData();
  },
  methods: {
    getServerData () {
      //模拟从服务器获取数据时的延时
      setTimeout(() => {
        //模拟服务器返回数据，如果数据格式和标准格式不同，需自行按下面的格式拼接
        let res = {
          series: [
            {
              name: "",
              data: this.tuData.series // [135, 140, 125, 260, 120, 160]
            }
          ],
          categories: this.tuData.xData // ["2012", "2013", "2014", "2015", "2016", "2017"],
        };
        this.drawCharts(this.canvasId, res);
      }, 500);
    },
    drawCharts (id, data) {
      const query = uni.createSelectorQuery().in(this);
      query.select('#' + id).fields({ node: true, size: true }).exec(res => {
        if (res[0]) {
          const canvas = res[0].node;
          const ctx = canvas.getContext('2d');
          canvas.width = res[0].width * this.pixelRatio;
          canvas.height = res[0].height * this.pixelRatio;
          uChartsInstance[id] = new uCharts({
            type: "area",
            canvas2d: true, //开启canvas2d
            context: ctx,
            width: this.cWidth * this.pixelRatio,
            height: this.cHeight * this.pixelRatio,
            categories: data.categories,
            series: data.series,
            pixelRatio: this.pixelRatio,
            animation: true,
            timing: "easeOut",
            duration: 1000,
            rotate: false,
            rotateLock: false,
            background: "#FFFFFF",
            color: ["#ff8545"],
            padding: [15, 15, 0, 15],
            fontSize: 13,
            fontColor: "#666666",
            dataLabel: true,
            dataPointShape: true,
            dataPointShapeType: "solid",
            touchMoveLimit: 60,
            enableScroll: true, // 图表数据过多时可拖拽拉伸
            disableScroll: false, // 在图表上滑动时禁止页面滚动。开启后，触摸图表时将会禁止屏幕滚动以及下拉刷新
            scrollAlign: 'left',// 图表滚动条起始位置
            legend: {
              show: false, // 隐藏 yAxis 的 name
            },
            xAxis: {
              disableGrid: true,
              disabled: false,
              axisLine: true,
              axisLineColor: "#CCCCCC",
              calibration: false,
              fontColor: "#666666",
              fontSize: 13,
              lineHeight: 10,
              marginTop: 12,
              rotateLabel: true,
              rotateAngle: 45,
              itemCount: 5, //x轴单屏显示数据的数量，默认为5个
              boundaryGap: "center",// 折线图、区域图起画点结束点方法: center 为单元格中间起画, justify 为0点起画即两端对齐
              splitNumber: 5,
              gridColor: "#CCCCCC",
              gridType: "solid",
              dashLength: 4,
              gridEval: 1,
              title: "",
              titleFontSize: 13,
              titleOffsetY: 0,
              titleOffsetX: 0,
              titleFontColor: "#666666",
              scrollShow: false, //新增是否显示滚动条，默认false
              // 配合拖拽滚动使用（即仅在启用enableScroll时有效）
              scrollAlign: "right", //滚动条初始位置,left为数据整体左对齐
              scrollColor: "#A6A6A6",   //默认为 #A6A6A6
              scrollBackgroundColor: "#EFEBEF", //默认为 #EFEBEF
            },
            yAxis: {
              gridType: "dash",
              dashLength: 2,
              disabled: false,
              disableGrid: false,
              splitNumber: 5,
              gridColor: "#CCCCCC",
              padding: 10,
              showTitle: false,
              data: [
                {
                  min: this.tuData.highvalue === this.tuData.lowvalue ? 0 : this.tuData.lowvalue,
                  max: this.tuData.highvalue
                }
              ]
            },
            extra: {
              area: {
                type: "curve", // 区域图类型
                opacity: 0.2,
                addLine: true,
                width: 2,
                gradient: false,
                activeType: "hollow"
              },
              tooltip: {
                showBox: true,
                showArrow: true, // 是否显示旁边的小三角箭头
                showCategory: false,
                borderWidth: 0,
                borderRadius: 0,
                borderColor: "#000000",
                borderOpacity: 0.7,
                bgColor: "#000000",
                bgOpacity: 0.7,
                gridType: "solid",
                dashLength: 4,
                gridColor: "#CCCCCC",
                boxPadding: 3,
                fontSize: 12,
                lineHeight: 16,
                fontColor: "#FFFFFF",
                legendShow: false, // 是否显示左侧图例
                legendShape: "auto",
                splitLine: true,
                horizentalLine: false,
                xAxisLabel: false,
                yAxisLabel: false,
                labelBgColor: "#FFFFFF",
                labelBgOpacity: 0.7,
                labelFontColor: "#666666"
              },
              // 标记线
              // markLine: {
              //   type: "solid",
              //   dashLength: 4,
              //   data: []
              // }
            }
          });
        } else {
          console.error("[uCharts]: 未获取到 context");
        }
      });
    },
    touchstart (e, id) {
      uChartsInstance[id].scrollStart(e);
    },
    touchmove (e, id) {
      uChartsInstance[id].scroll(e);
    },
    touchend (e, id) {
      uChartsInstance[id].scrollEnd(e);
      uChartsInstance[id].touchLegend(e);
      //下面是toolTip事件，如果滚动后不需要显示，可不填写
      uChartsInstance[id].showToolTip(e, {
        formatter: (item, category, index, opts) => {
          let obj = this.tuData.list.find(ele => ele.scrq === category)
          var htmlStr = [];
          obj.lineList.forEach(i => {
            htmlStr.push({ text: i.time + '--' + i.value + '     ', color: null })
          })
          this.textList = htmlStr
        }
      });
      uChartsInstance[id].showToolTip(e, {
        textList: this.textList
      });
    }
  }
};
</script>

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

以上为ucharts组件的完整代码，拿来即用那种的。

接下来说一下我在本次开发过程中遇到的问题：

Q1：:canvas-id 动态渲染问题

props: {
    canvasId: {
      type: String,
      default: 'ec-canvas'
    }
  }

Q2：组件中多个图表触发问题

:ontouch="true"
      @touchstart="touchstart($event, canvasId)" @touchmove="touchmove($event, canvasId)"
      @touchend="touchend($event, canvasId)"

Q3：渲染清晰度问题

:canvas2d="true" type="2d" 及代码中的 pixelRatio 配合

Q4：拖拽滑动及页面滚动问题

enableScroll: true, // 图表数据过多时可拖拽拉伸

disableScroll: false, // 在图表上滑动时禁止页面滚动。开启后，触摸图表时将会禁止屏幕滚动以及下拉刷新

scrollShow: false, //新增是否显示滚动条，默认false

// 配合拖拽滚动使用（即仅在启用enableScroll时有效）

scrollAlign: "right", //滚动条初始位置,left为数据整体左对齐

scrollColor: "#A6A6A6", //默认为 #A6A6A6

scrollBackgroundColor: "#EFEBEF", //默认为 #EFEBEF

Q5：ToolTip 格式、换行问题

代码如下，首先处理好需要的格式，赋值给data里的textList，再在

uChartsInstance[id].showToolTip(e, {

textList: this.textList

});

中使用就可以了

touchend (e, id) {
      uChartsInstance[id].scrollEnd(e);
      uChartsInstance[id].touchLegend(e);
      //下面是toolTip事件，如果滚动后不需要显示，可不填写
      uChartsInstance[id].showToolTip(e, {
        formatter: (item, category, index, opts) => {
          let obj = this.tuData.list.find(ele => ele.scrq === category)
          var htmlStr = [];
          obj.lineList.forEach(i => {
            htmlStr.push({ text: i.time + '--' + i.value + '     ', color: null })
          })
          this.textList = htmlStr
        }
      });
      uChartsInstance[id].showToolTip(e, {
        textList: this.textList
      });
    }

有点匆忙。。一更到此