ucharts组件的导入和使用

目录

ucharts相关链接

前言

一、导入方式

1.使用comment（复制文件方式）

2.nmp引用方式

二、具体使用示例

1.js文件

2.json文件

3.wxml文件

4.wxss文件 

5.显示结果 

总结

---

ucharts相关链接

[ucharts官网]uCharts跨平台图表库

[ucharts组件库git下载]uCharts: 高性能跨平台图表库，支持H5、APP、小程序（微信小程序、支付宝小程序、钉钉小程序、百度小程序、头条小程序、QQ小程序、快手小程序、360小程序）、Vue、Taro等更多支持canvas的框架平台，支持饼图、圆环图、线图、柱状图、山峰图、区域图、雷达图、圆弧进度图、仪表盘、K线图、条状图、混合图、玫瑰图、漏斗图、词云图、时序图、散点图、气泡图、地图等常见图表。

[微信小程序文档之自定义组件]自定义组件 | 微信开放文档

---

前言

具体针对微信小程序ucharts组件库的导入和使用提供了方式和步骤

---

一、导入方式

1.使用comment（复制文件方式）

①将下载好的qiun-wx-ucharts直接导入到comment

②打开ucharts官网中演示部分并选取需要的图例，点击查看代码，点击微信，点击组件复制js、json、wxml、wxss的代码

③其中json文件的操作步骤为打开pages中index（具体编写ucharts的页面）页面，打开json文件，并写入

{
  "usingComponents": {
    "qiun-wx-ucharts": "/components/qiun-wx-ucharts/index"
  }
}

④阅读文档，并修改相应的属性值

        

2.nmp引用方式

①将下载好的qiun-wx-ucharts更改命名为@qiun，将下一级的src文件更改命名为wx-ucharts

②打开ucharts官网中演示部分并选取需要的图例，点击查看代码，点击微信，点击组件复制js、json、wxml、wxss的代码

③其中json文件的操作步骤为打开pages中index（具体编写ucharts的页面）页面，打开json文件，并写入

{
  "usingComponents": {
    "qiun-wx-ucharts": "@qiun/wx-ucharts"
  }
}

④阅读文档，并修改相应的属性值 

二、具体使用示例

1.js文件

Page({
  data: {
    chartData: {
    },
    opts: {
        // 通过这个修改主题颜色
        color: ["#32CD99"], 
      //   画布填充边距[上,右,下,左]，Array格式
        padding:[30,30,30,15],
      //dataLabel	是否显示图表区域内数据点上方的数据文案
        dataLabel:false,
      //   图形标识点显示类型 hollow 空心
        dataPointShapeType:"hollow",
      //   legend设置扩展属性
        legend: {
          show: false,
        },
        // 通过这个修改uchart的CSS样式
        yAxis: {
          gridType: "solid",
          dashLength: 2,
          disabled: false,
          disableGrid: false,
          splitNumber: 5,
          gridColor: "#CCCCCC",
          padding: 10,
          showTitle: false,
          data: [
            {
              type: "value",
              position: "left",
              disabled: false,
              axisLine: false,
              axisLineColor: "#CCCCCC",
              calibration: false,
              fontColor: "#666666",
              fontSize: 13,
              textAlign: "right",
              min: 0,
              max: 2000,
              tofix: null,
              unit: "",
              format: ""
            }
          ]
        },
  
      },
  },
  onReady() {
    this.getServerData();
  },
  getServerData() {
    //模拟从服务器获取数据时的延时
    setTimeout(() => {
      //模拟服务器返回数据，如果数据格式和标准格式不同，需自行按下面的格式拼接
      let chartData = {
            categories:["5月", "6月", "7月", "8月", "9月"],
            series: [
              {
                name: "目标值",
                data: [1500, 1800,1400, 1600, 1800]
              }

            ]
          };
      this.setData({ chartData });
    }, 500);
  },
  complete(e){
    console.log(e);
  }
})

2.json文件

{
  "usingComponents": {
    "qiun-wx-ucharts": "@qiun/wx-ucharts"
  }
}

3.wxml文件

每月零花钱

  

4.wxss文件 

.charts-box{
  width: 750rpx;
  height: 500rpx;
}

5.显示结果 

---

总结

以上就是今天要讲的内容，本文简单介绍了ucharts组件在微信小程序中的导入和使用方式