微信小程序 使用 uCharts 图表

前端 图表的插件库 有很多

echarts 跟 uCharts …
echarts 更适合应用于后台管理系统 或者pc 端
当小程序使用echarts 并且引用echarts 他会提示一段话 然后报错
小程序“文件体积超过 500KB,已跳过压缩以及 ES6 转 ES5 的处理,手机端使用过大的js库影响性能。”问题处理
所以 我就换了uCharts
现在记录一下自己的uCharts 在小程序中使用

uCharts链接 https://www.ucharts.cn
下载uCharts https://gitee.com/uCharts/uCharts
在这里插入图片描述

找到微信小程序

在这里插入图片描述

复制 js 文件

在这里插入图片描述

在小程序components 文件夹下面 建立 u-charts文件夹 把你刚刚复制的js文件粘贴进来

在这里插入图片描述

页面使用
  <canvas canvas-id="canvasColumn" id="canvasColumn" class="charts" bindtouchstart="touchColumn"></canvas>
那个文件需要 就在那个文件的js 中引用
import uCharts from '../../components/u-charts/u-charts.min'
import uCharts from '../../components/u-charts/u-charts.min'
var _self;
var canvaColumn = null;
Page({
  /**
   * 页面的初始数据
   */
  data: {
    cWidth: '',
    cHeight: '',
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    _self=this;
    this.cWidth = wx.getSystemInfoSync().windowWidth;
    this.cHeight = 500 / 750 * wx.getSystemInfoSync().windowWidth;
    this.getServerData()
  },
  //   这里 先暂时 应用 ucharts 里面提供的数据 调取他们的接口 
  getServerData: function () {
    wx.request({
      url: 'https://www.ucharts.cn/data.json',
      data: {
      },
      success: function (res) {
        let Column = { categories: [], series: [] };
        Column.categories = res.data.data.ColumnB.categories;
        Column.series = res.data.data.ColumnB.series;
        //自定义标签颜色和字体大小
        Column.series[1].textColor = 'red';
        Column.series[1].textSize = 11;
        _self.showColumn("canvasColumn", Column);
      },
      fail: () => {
        console.log("请点击右上角【详情】,启用不校验合法域名");
      },
    })
  },
  showColumn(canvasId, chartData) {
    canvaColumn = new uCharts({
      $this: _self,
      canvasId: canvasId,
      type: 'line',
      legend: true,
      fontSize: 11,
      background: '#FFFFFF',
      pixelRatio: 1,
      animation: true,
      categories: chartData.categories,
      series: chartData.series,
      xAxis: {
        disableGrid: true,
      },
      yAxis: {  
        //disabled:true
      },
      dataLabel: true,
      width: _self.cWidth ,
      height: _self.cHeight ,
      extra: {
        column: {
          type: 'group',
          width: _self.cWidth * 0.45 / chartData.categories.length
        }
      }
    });
  }
})
css 也一定要写上 不然图表出不来
/**index.wxss**/
.qiun-charts {
  width: 750rpx;
  height: 500rpx;
  background-color: #FFFFFF;
}
.charts {
  width: 750rpx;
  height: 500rpx;
  background-color: #FFFFFF;
}

练习的时候需要把这个打上勾

在这里插入图片描述

然后图标展示出来了

在这里插入图片描述

相关配置 文档会写的很清楚 虽然功能比不上 echars 但uCharts的功能 也能满足一些小需求 并且是小程序上面的

  • 10
    点赞
  • 27
    收藏
    觉得还不错? 一键收藏
  • 5
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 5
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值