目錄

ucharts相關(guān)鏈接

前言

一、導(dǎo)入方式

1.使用comment（復(fù)制文件方式）

2.nmp引用方式

二、具體使用示例

1.js文件

2.json文件

3.wxml文件

4.wxss文件?

5.顯示結(jié)果?

總結(jié)

ucharts相關(guān)鏈接

[ucharts官網(wǎng)]uCharts跨平臺圖表庫

[ucharts組件庫git下載]uCharts: 高性能跨平臺圖表庫，支持H5、APP、小程序（微信小程序、支付寶小程序、釘釘小程序、百度小程序、頭條小程序、QQ小程序、快手小程序、360小程序）、Vue、Taro等更多支持canvas的框架平臺，支持餅圖、圓環(huán)圖、線圖、柱狀圖、山峰圖、區(qū)域圖、雷達(dá)圖、圓弧進(jìn)度圖、儀表盤、K線圖、條狀圖、混合圖、玫瑰圖、漏斗圖、詞云圖、時序圖、散點圖、氣泡圖、地圖等常見圖表。

[微信小程序文檔之自定義組件]自定義組件 | 微信開放文檔

前言

具體針對微信小程序ucharts組件庫的導(dǎo)入和使用提供了方式和步驟

一、導(dǎo)入方式

1.使用comment（復(fù)制文件方式）

①將下載好的qiun-wx-ucharts直接導(dǎo)入到comment

②打開ucharts官網(wǎng)中演示部分并選取需要的圖例，點擊查看代碼，點擊微信，點擊組件復(fù)制js、json、wxml、wxss的代碼

③其中json文件的操作步驟為打開pages中index（具體編寫ucharts的頁面）頁面，打開json文件，并寫入

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

④閱讀文檔，并修改相應(yīng)的屬性值

????????

2.nmp引用方式

①將下載好的qiun-wx-ucharts更改命名為@qiun，將下一級的src文件更改命名為wx-ucharts

②打開ucharts官網(wǎng)中演示部分并選取需要的圖例，點擊查看代碼，點擊微信，點擊組件復(fù)制js、json、wxml、wxss的代碼

③其中json文件的操作步驟為打開pages中index（具體編寫ucharts的頁面）頁面，打開json文件，并寫入

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

④閱讀文檔，并修改相應(yīng)的屬性值?

二、具體使用示例

1.js文件

Page({
  data: {
    chartData: {
    },
    opts: {
        // 通過這個修改主題顏色
        color: ["#32CD99"], 
      //   畫布填充邊距[上,右,下,左]，Array格式
        padding:[30,30,30,15],
      //dataLabel	是否顯示圖表區(qū)域內(nèi)數(shù)據(jù)點上方的數(shù)據(jù)文案
        dataLabel:false,
      //   圖形標(biāo)識點顯示類型 hollow 空心
        dataPointShapeType:"hollow",
      //   legend設(shè)置擴(kuò)展屬性
        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() {
    //模擬從服務(wù)器獲取數(shù)據(jù)時的延時
    setTimeout(() => {
      //模擬服務(wù)器返回數(shù)據(jù)，如果數(shù)據(jù)格式和標(biāo)準(zhǔn)格式不同，需自行按下面的格式拼接
      let chartData = {
            categories:["5月", "6月", "7月", "8月", "9月"],
            series: [
              {
                name: "目標(biāo)值",
                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文件

<view class="charts-box">
<view>
每月零花錢
</view>
  <qiun-wx-ucharts 
    type="line"
    opts="{{opts}}"
    chartData="{{chartData}}"
  />
</view>

4.wxss文件?

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

5.顯示結(jié)果?

總結(jié)

以上就是今天要講的內(nèi)容，本文簡單介紹了ucharts組件在微信小程序中的導(dǎo)入和使用方式文章來源地址http://www.zghlxwxcb.cn/news/detail-665853.html

到了這里，關(guān)于ucharts組件的導(dǎo)入和使用的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！