小程序进阶-图表库uchart

一、图标库

常用图标库有：echart,wx-chart,ucharts。

• wx-chart：没有维护了；
• echart：更倾向于pc；
• ucharts：专为小程序而生，他是伴随小程序跨端框架uni-app而来的，所以uchart更小程序更具有一种天然的属性。

二、ucharts

官方文档：https://www.ucharts.cn
ucharts是高性能跨平台图表库，支持H5图表、APP图表、小程序图表（微信小程序、支付宝小程序、百度小程序、头条小程序、QQ小程序、360小程序），支持饼图、圆环图、线图、柱状图、区域图、雷达图、圆弧进度图、仪表盘、K线图、条状图、混合图、玫瑰图、漏斗图、词云图、地图等。

（1）获取uCharts

原生 uCharts 您只需获取 u-charts.js 或 u-charts.min.js 单个文件，在页面中引用这个 js 即可开始使用，您可通过以下方式获得 uCharts：

• 通过码云 uCharts 项目开源地址获取 u-charts.js，点击进入码云。
• 通过 npm 命令npm i @qiun/ucharts安装，成功后即可使用 import 或 require 进行引用。
• 通过 uCharts 官网定制功能，定制您的专属 uCharts，体积更小、速度更快！

（2）index.wxml

<view class="charts">
  <canvas canvas-id="column" id="column" class="charts" bindtouchend="tap"/>
view>

（3）index.js

import uCharts from '../../js_sdk/u-charts.js';
var uChartsInstance = {};
Page({
  data: {
    cWidth: 750,
    cHeight: 500
  },
  onReady() {
    //这里的第一个 750 对应 css .charts 的 width
    const cWidth = 750 / 750 * wx.getSystemInfoSync().windowWidth;
    //这里的 500 对应 css .charts 的 height
    const cHeight = 500 / 750 * wx.getSystemInfoSync().windowWidth;
    this.setData({ cWidth, cHeight });
    this.getServerData();
  },
  getServerData() {
    //模拟从服务器获取数据时的延时
    setTimeout(() => {
      //模拟服务器返回数据，如果数据格式和标准格式不同，需自行按下面的格式拼接
      let res = {
            categories: ["2016","2017","2018","2019","2020","2021"],
            series: [
              {
                name: "目标值",
                data: [35,36,31,33,13,34]
              },
              {
                name: "完成量",
                data: [18,27,21,24,6,28]
              }
            ]
          };
      this.drawCharts('column', res);
    }, 500);
  },
  drawCharts(id,data){
    const ctx = wx.createCanvasContext(id, this);
    uChartsInstance[id] = new uCharts({
        type: "column",
        context: ctx,
        width: this.data.cWidth,
        height: this.data.cHeight,
        categories: data.categories,
        series: data.series,
        animation: true,
        background: "#FFFFFF",
        padding: [15,15,0,5],
        xAxis: {
          disableGrid: true
        },
        yAxis: {
          data: [{min: 0}]
        },
        extra: {
          column: {
            type: "group"
          }
        }
      });
  },
  tap(e){
    uChartsInstance[e.target.id].touchLegend(e);
    uChartsInstance[e.target.id].showToolTip(e);
  }
})

（4）index.wxss

/*index.wxss*/
.charts {
  width: 750rpx;
  height: 500rpx;
}

（5)绘制结果