一、寫在前面

? ? ? ? 之前一直使用的都是 wx-charts，鏈接：?xiaolin3303/wx-charts: 微信小程序圖表charts組件 ，但是這個(gè)庫已經(jīng)五六年沒有維護(hù)了，經(jīng)常出現(xiàn) canvas層級(jí)過高彈窗無法覆蓋等問題（微信小程序前面新推出了 canvas-2d，解決了這個(gè)問題）

? ? ? ? 摸索了官網(wǎng)文檔一個(gè)下午，今天來介紹以下 u-charts 的組件版的基本使用，官網(wǎng)?uCharts官網(wǎng) - 秋云uCharts跨平臺(tái)圖表庫，下面這些tab可能會(huì)幫助到你

?

二、下載組件

源碼地址：uCharts: 高性能跨平臺(tái)圖表庫 微信小程序 (gitee.com)

點(diǎn)進(jìn)去找到 “微信小程序”

選擇組件版 （原生版也可以，但是需要自己創(chuàng)造實(shí)例，比較麻煩，我折騰了幾個(gè)小時(shí)后 換成了組件版發(fā)現(xiàn)快多了）

點(diǎn)進(jìn)去，把src下的文件全部拷貝下來 （可以把整個(gè)倉庫下載為zip，再找到這里面，就可以一鍵復(fù)制了）

?在微信小程序根目錄下 新建一個(gè)文件夾?components

然后再在components下新建一個(gè)文件夾，取名?qiun-wx-ucharts

把上面src里面的所有文件，都復(fù)制粘貼到?qiun-wx-ucharts 里

?至此，就可以直接使用了

三、基本使用

在需要使用圖表的頁面（假設(shè)頁面為 test.wxml ）

1.test.json 引入組件

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

?2.test.wxml 放置組件

<view class="table">
  <qiun-wx-ucharts type="line" opts="{{opts}}" chartData="{{chartData}}" canvas2d="{{true}}" canvasId="myChart" />
</view>

3.test.wxss 設(shè)置組件寬高

這是必須配置的css，組件會(huì)自動(dòng)獲取css的寬高，來給canvas設(shè)置寬度 （下面的 .table 是組件的父元素的類名）

  .table {
    width: 100%;
    height: 300px;
  }

4.test.js 配置數(shù)據(jù)

折線的數(shù)據(jù)目前是寫死的，你可以根據(jù)你的需要，去更新 this.data.chartData ，圖表會(huì)自動(dòng)重繪

// pages/chart/chart.js
Page({

  /**
   * 頁面的初始數(shù)據(jù)
   */
  data:{
    chartData: {},//數(shù)據(jù)里包含了 categories x軸數(shù)組，series 需要繪制的曲線數(shù)組
    opts: {//配置項(xiàng)，這里只展示了部分，關(guān)于配置項(xiàng)的詳細(xì)解釋可以到官網(wǎng)文檔查看
     color: ["#1890FF", "#91CB74"],
     enableScroll: false,//是否開啟滾動(dòng)
     dataLabel: false,
     xAxis: {
       disableGrid: true,//是否 不縱向繪制網(wǎng)格
       type: 'grid',
       gridType: 'dash',
       scrollBackgroundColor: '#00000000',//默認(rèn)為 #EFEBEF
       scrollColor: '#DEE7F7',//默認(rèn)為 #A6A6A6
       rotateLabel: true,//開啟文字旋轉(zhuǎn)功能
     },
     yAxis: {
       gridType: "dash",
       dashLength: 2,
     },
     extra: {
       line: {
         type: "curve",
         width: 2,
         activeType: "hollow"
       }
     }
   },
 },

  /**
   * 生命周期函數(shù)--監(jiān)聽頁面加載
   */
  onLoad(options) {
    let data = { // 數(shù)據(jù)里包含了 categories x軸數(shù)組，series 需要繪制的曲線數(shù)組
      categories: ["2016","2017","2018","2019","2020","2021"],
      series: [
        {
          name: "目標(biāo)值",
          data: [35,36,31,33,13,34]
        },
        {
          name: "完成量",
          data: [18,27,21,24,6,28]
        }
      ]
    };
    //只要給 chartData 修改了值，就會(huì)觸發(fā)圖表的重新繪制
    this.setData({
      chartData : JSON.parse(JSON.stringify(data)) //深拷貝數(shù)據(jù)，防止出現(xiàn)問題
    })
  },

  /**
   * 生命周期函數(shù)--監(jiān)聽頁面初次渲染完成
   */
  onReady() {

  },

  /**
   * 生命周期函數(shù)--監(jiān)聽頁面顯示
   */
  onShow() {

  },

  /**
   * 生命周期函數(shù)--監(jiān)聽頁面隱藏
   */
  onHide() {

  },

  /**
   * 生命周期函數(shù)--監(jiān)聽頁面卸載
   */
  onUnload() {

  },

  /**
   * 頁面相關(guān)事件處理函數(shù)--監(jiān)聽用戶下拉動(dòng)作
   */
  onPullDownRefresh() {

  },

  /**
   * 頁面上拉觸底事件的處理函數(shù)
   */
  onReachBottom() {

  },

  /**
   * 用戶點(diǎn)擊右上角分享
   */
  onShareAppMessage() {

  }
})

5.效果示例

點(diǎn)擊后可以查看數(shù)據(jù)點(diǎn)?

?

四、進(jìn)階用法

1.開啟滾動(dòng)

當(dāng)數(shù)據(jù)量很多的時(shí)候，折線的點(diǎn)就會(huì)堆積在一起，很不美觀

我們可以開啟滾動(dòng)模式，設(shè)置一屏幕展示多少個(gè)數(shù)據(jù)項(xiàng)，就可以更美觀了

（1）在js文件的data中修改以下配置項(xiàng)：

?opts.enableScroll 改為 true，開啟滾動(dòng)模式 必須填寫

opts.xAxis.itemCount 設(shè)置為“一屏幕想展示的數(shù)據(jù)量”?Number 必須填寫

（2）在wxml文件中

?給組件props新增一個(gè)?ontouch="true"??這一點(diǎn)官網(wǎng)文檔沒寫明，我試了很久才發(fā)現(xiàn)要這個(gè)東西，才能滾動(dòng)

（3）代碼

js文件中修改opts：

//在上文js代碼中，修改 data里的opts 

opts: {//配置項(xiàng)，這里只展示了部分，關(guān)于配置項(xiàng)的詳細(xì)解釋可以到官網(wǎng)文檔查看
      color: ["#1890FF", "#91CB74"],

      enableScroll: true,//是否開啟滾動(dòng) ————滾動(dòng)需要的配置

      xAxis: {
        disableGrid: true,//是否 不縱向繪制網(wǎng)格
        type: 'grid',
        gridType: 'dash',

        itemCount: 10,//x軸單屏顯示數(shù)據(jù)的數(shù)量，默認(rèn)為5個(gè) ————滾動(dòng)需要的配置

        scrollBackgroundColor: '#00000000',//默認(rèn)為 #EFEBEF
        scrollColor: '#DEE7F7',//默認(rèn)為 #A6A6A6
        rotateLabel: true,//開啟文字旋轉(zhuǎn)功能
      },
      yAxis: {
        gridType: "dash",
        dashLength: 2,
      },
      extra: {
        line: {
          type: "curve",
          width: 2,
          activeType: "hollow"
        }
      }
    },

wxml里新增一個(gè)props傳遞?ontouch?

<view class="table">
  <qiun-wx-ucharts type="line" opts="{{opts}}" chartData="{{chartData}}" canvas2d="{{true}}" canvasId="myChart" ontouch />
</view>

效果

向右滑動(dòng)?

關(guān)于滾動(dòng)還有一些其他配置項(xiàng)，詳情到官網(wǎng)文檔查看

注意：開啟滾動(dòng)后，在微信小程序開發(fā)者工具觀看會(huì)有異常，但是實(shí)際是沒問題的，請(qǐng)掃碼觀看?

2.點(diǎn)擊后獲取數(shù)據(jù)索引 （獲取當(dāng)前點(diǎn)擊的數(shù)據(jù)）

getIndex 官網(wǎng)文檔

?

這個(gè)在官網(wǎng)文檔的示例全是 uniapp 的，找不到微信小程序的，連問答區(qū)都沒人問這個(gè)問題。

涉及知識(shí)點(diǎn)：給自定義組件傳遞自定義事件

上面文檔中 @getIndex 這種有 @ 符的是uniapp的寫法，在微信小程序中并不適合

然而又不想使用原生的創(chuàng)建實(shí)例的方法，只想用組件形式（我們現(xiàn)在講的是組件方法，原生方法是 引入 u-charts.js 文件后，new一個(gè)uCharts實(shí)例出來操作，比較復(fù)雜）

其實(shí)很簡單，給小程序自定義組件傳遞自定義事件，只需要 bind:xxx="xxxx"??

我們需要傳遞 getIndex 這個(gè)自定義事件，就寫???bind:getIndex="touchcanvas" （其中touchcanvas是在當(dāng)前頁面綁定的函數(shù)，getIndex是自定義事件的名稱）

<view class="table">
  <qiun-wx-ucharts type="line" opts="{{opts}}" chartData="{{chartData}}" canvas2d="{{true}}" canvasId="myChart" ontouch bind:getIndex="touchcanvas" />
</view>

然后在js文件里，寫?touchcanvas 函數(shù)，通過e就能獲取數(shù)據(jù)的索引號(hào)了

  //圖表點(diǎn)擊操作
  touchcanvas(e) {
    let index = e.detail.currentIndex.index //這個(gè)就是數(shù)組的索引
    
    let arr = [ 
        //....
    ]; //假設(shè)這里面裝了圖表正在展示的數(shù)據(jù)
    //就能通過 arr[index] 獲取當(dāng)前點(diǎn)擊的數(shù)據(jù)
    console.log(index, arr[index] )
  },

五、最后

? ? ? ? 這篇文章只講述了折線圖的基本使用方法，更多配置項(xiàng)建議閱讀官方文檔 （鏈接在文章開頭）

? ? ? ? 本文的第四點(diǎn) 進(jìn)階用法，是我的踩坑記錄：1. 為什么設(shè)置了允許滾動(dòng)，滑動(dòng)頁面沒有效果？2.到底怎么獲取索引號(hào)？為什么官網(wǎng)都是uniapp的演示，找不到我想要的內(nèi)容文章來源地址http://www.zghlxwxcb.cn/news/detail-484816.html

到了這里，關(guān)于原生微信小程序使用u-charts（組件版）折線圖示例的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！