微信小程序通过npm引入组件库uCharts并使用

uCharts

在项目根目录执行以下命令

npm i @qiun/wx-ucharts

会在根目录出现node_modules目录

image.png

构建npm

点击顶部菜单【工具】--->【构建npm】，构建完成后会在项目根目录生成miniprogram_npm文件夹和package.json文件，如下图：

image.png
image.png
image.png

在需要页面的json文件引入需要的组件(package.json中dependencies相对应)

image.png

在对应的wxml页面就可以使用了，示例

<view class="charts-box">
  <qiun-wx-ucharts 
    type="gauge"
    opts="{{opts}}"
    chartData="{{chartData}}"
  />
</view>

// pags/map/index.js
Page({
  data: {
    chartData: {},
    //您可以通过修改 config-ucharts.js 文件中下标为 ['gauge'] 的节点来配置全局默认参数，如都是默认参数，此处可以不传 opts 。实际应用过程中 opts 只需传入与全局默认参数中不一致的【某一个属性】即可实现同类型的图表显示不同的样式，达到页面简洁的需求。
    opts: {
      color: ["#1890FF", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4", "#ea7ccc"],
      padding: undefined,
      title: {
        name: "50Km/H",
        fontSize: 25,
        color: "#2fc25b",
        offsetY: 50
      },
      subtitle: {
        name: "实时速度",
        fontSize: 15,
        color: "#666666",
        offsetY: -50
      },
      extra: {
        gauge: {
          type: "default",
          width: 30,
          labelColor: "#666666",
          startAngle: 0.75,
          endAngle: 0.25,
          startNumber: 0,
          endNumber: 100,
          labelFormat: "",
          splitLine: {
            fixRadius: 0,
            splitNumber: 10,
            width: 30,
            color: "#FFFFFF",
            childNumber: 5,
            childWidth: 12
          },
          pointer: {
            width: 24,
            color: "auto"
          }
        }
      }
    }
  },
  onLoad(options) {

  },
  onShow() {
    this.getServerData();
  },
  getServerData() {
    //模拟从服务器获取数据时的延时
    setTimeout(() => {
      //模拟服务器返回数据，如果数据格式和标准格式不同，需自行按下面的格式拼接
      let res = {
        categories: [{
          "value": 0.25,
          "color": "#1890ff"
        }, {
          "value": 0.5,
          "color": "#2fc25b"
        }, {
          "value": 0.75,
          "color": "#FFCA28"
        },  {
          "value": 1,
          "color": "#f04864"
        }],
        series: [{
          name: "完成率",
          data: 0.5
        }]
      };
      this.setData({
        chartData: JSON.parse(JSON.stringify(res))
      });
    }, 500);
  },


})

效果图

image.png