微信小程序 使用 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的功能 也能满足一些小需求 并且是小程序上面的