wx-charts 微信小程序圖表插件的具體使用

更新時間：2019年08月18日 10:45:34 作者：我叫陳小皮。

這篇文章主要介紹了wx-charts 微信小程序圖表插件的具體使用，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧

微信小程序圖表插件（wx-charts）基于canvas繪制，體積小巧，支持圖表類型餅圖、線圖、柱狀圖、區(qū)域圖等圖表圖形繪制，目前wx-charts是微信小程序圖表插件中比較強大好使的一個

支持圖標類型

餅圖 pie
圓環(huán)圖 ring
線圖 line
柱狀圖 column
區(qū)域圖 area
雷達圖 radar

如何使用？

直接引用編譯好的文件 dist/charts.js（js下載地址）

.wxml中定義

<canvas canvas-id="lineCanvas" disable-scroll="true" class="canvas"></canvas>

canvas-id與new wxCharts({canvasId:”})中canvasId一致

2. 命令行

git clone github.com/xiaolin3303/wx-charts.git
npm install rollup -g
npm install
rollup -c 或者 rollup --config rollup.config.prod.js

參數說明

opts             Object
opts.canvasId        String required          微信小程序canvas-id
opts.width          Number required        canvas寬度，單位為px
opts.height         Number required        canvas高度，單位為px
opts.title          Object      (only for ring chart)
opts.title.name       String      標題內容
opts.title.fontSize     Number      標題字體大小（可選，單位為px）
opts.title.color       String      標題顏色（可選）
opts.subtitle        Object     (only for ring chart)
opts.subtitle.name      String      副標題內容
opts.subtitle.fontSize    Number     副標題字體大?。蛇x，單位為px）
opts.subtitle.color     String     副標題顏色（可選）
opts.animation        Boolean default true     是否動畫展示
opts.legend         Boolen default true    是否顯示圖表下方各類別的標識
opts.type          String required 圖表類型，可選值為pie, line, column, area……
opts.categories       Array required    (餅圖、圓環(huán)圖不需要) 數據類別分類
opts.dataLabel        Boolean default true   是否在圖表中顯示數據內容值
opts.dataPointShape     Boolean default true  是否在圖表中顯示數據點圖形標識
opts.xAxis          Object    X軸配置
opts.xAxis.disableGrid    Boolean default false   不繪制X軸網格
opts.yAxis          Object  Y軸配置
opts.yAxis.format      Function      自定義Y軸文案顯示
opts.yAxis.min        Number    Y軸起始值
opts.yAxis.max        Number      Y軸終止值
opts.yAxis.title       String    Y軸title
opts.yAxis.disabled     Boolean default false    不繪制Y軸
opts.series         Array required    數據列表

數據列表每項結構定義

dataItem           Object
dataItem.data         Array required (餅圖、圓環(huán)圖為Number) 數據
dataItem.color        String 例如#7cb5ec 不傳入則使用系統(tǒng)默認配色方案
dataItem.name         String 數據名稱
dateItem.format        Function 自定義顯示數據內容

詳見demo（具體demo git地址）

1.pie

new wxCharts({
  animation: true, //是否有動畫
  canvasId: 'pieCanvas',
  type: 'pie',
  series: [{
    name: '成交量1',
    data: 15,
  }, {
    name: '成交量2',
    data: 35,
  }, {
    name: '成交量3',
    data: 78,
  }],
  width: windowWidth,
  height: 300,
  dataLabel: true,
 });
}

2. ring

new wxCharts({
  animation: true,
  canvasId: 'ringCanvas',
  type: 'ring',
  extra: {
    ringWidth: 25,
    pie: {
      offsetAngle: -45
    }
  },
  title: {
    name: '70%',
    color: '#7cb5ec',
    fontSize: 25
  },
  subtitle: {
    name: '收益率',
    color: '#666666',
    fontSize: 15
  },
  series: [{
    name: '成交量1',
    data: 15,
    stroke: false
  }, {
    name: '成交量2',
    data: 35,
     stroke: false
  }, {
    name: '成交量3',
    data: 78,
    stroke: false
  }, {
    name: '成交量4',
    data: 63,
     stroke: false
  }],
  disablePieStroke: true,
  width: windowWidth,
  height: 200,
  dataLabel: false,
  legend: false,
  padding: 0
});

3. line

new wxCharts({
  canvasId: 'lineCanvas',
  type: 'line',
  categories: simulationData.categories,
  animation: true,
  background: '#f5f5f5',
  series: [{
    name: '成交量1',
    data: simulationData.data,
    format: function (val, name) {
      return val.toFixed(2) + '萬';
    }
  }, {
    name: '成交量2',
    data: [2, 0, 0, 3, null, 4, 0, 0, 2, 0],
    format: function (val, name) {
      return val.toFixed(2) + '萬';
    }
  }],
  xAxis: {
    disableGrid: true
  },
  yAxis: {
    title: '成交金額 (萬元)',
    format: function (val) {
      return val.toFixed(2);
    },
    min: 0
  },
  width: windowWidth,
  height: 200,
  dataLabel: false,
  dataPointShape: true,
  extra: {
    lineStyle: 'curve'
  }
});

4. column

new wxCharts({
  canvasId: 'columnCanvas',
  type: 'column',
  animation: true,
  categories: chartData.main.categories,
  series: [{
    name: '成交量',
    data: chartData.main.data,
    format: function (val, name) {
      return val.toFixed(2) + '萬';
    }
  }],
  yAxis: {
    format: function (val) {
      return val + '萬';
    },
    title: 'hello',
    min: 0
  },
  xAxis: {
    disableGrid: false,
    type: 'calibration'
  },
  extra: {
    column: {
      width: 15
    }
  },
  width: windowWidth,
  height: 200,
});

5. area

new wxCharts({
  canvasId: 'areaCanvas',
  type: 'area',
  categories: ['1', '2', '3', '4', '5', '6'],
  animation: true,
  series: [{
    name: '成交量1',
    data: [32, 45, 0, 56, 33, 34],
    format: function (val) {
      return val.toFixed(2) + '萬';
    }
  }, {
   name: '成交量2',
   data: [15, 20, 45, 37, 4, 80],
   format: function (val) {
    return val.toFixed(2) + '萬';
   },
  }],
  yAxis: {
    title: '成交金額 (萬元)',
    format: function (val) {
      return val.toFixed(2);
    },
    min: 0,
    fontColor: '#8085e9',
    gridColor: '#8085e9',
    titleFontColor: '#f7a35c'
  },
  xAxis: {
    fontColor: '#7cb5ec',
    gridColor: '#7cb5ec'
  },
  extra: {
    legendTextColor: '#cb2431'
  },
  width: windowWidth,
  height: 200
});

6.radar

new wxCharts({
  canvasId: 'radarCanvas',
  type: 'radar',
  categories: ['1', '2', '3', '4', '5', '6'],
  series: [{
    name: '成交量1',
    data: [90, 110, 125, 95, 87, 122]
  }],
  width: windowWidth,
  height: 200,
  extra: {
    radar: {
      max: 150
    }
  }
});

本人是自己查閱資料自己整理，希望對自己和有問題的你們都有幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

js控制按鈕,防止頻繁點擊響應的實例
下面小編就為大家?guī)硪黄猨s控制按鈕,防止頻繁點擊響應的實例。小編覺得挺不錯的，現在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2017-02-02
低門檻開發(fā)iOS、Android、小程序應用的前端框架詳解
結合AVM官網的介紹和我自己的一些實踐經驗，我總結了一系列AVM的特性，我想這些內容足以讓你主動去學習AVM框架了
2021-10-10
JS清空上傳控件input(type="file")的值的代碼
最近做的一個小功能，需要清空<input type="file">的值，但上傳控件<input type="file">的值不能通過JavaScript來修改。
2008-11-11
靈活使用數組制作圖片切換js實現
這篇文章主要介紹了靈活使用數組制作圖片切換效果，js實現圖片切換特效，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2016-07-07
用js獲取點擊圖片的值!
用js獲取點擊圖片的值!...
2007-07-07
20行JS代碼實現網頁刮刮樂效果
下面小編就為大家?guī)硪黄?0行JS代碼實現網頁刮刮樂效果。小編覺得挺不錯的，現在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2017-06-06
JS組件系列之MVVM組件構建自己的Vue組件
這篇文章主要介紹了JS組件系列之MVVM組件構建自己的Vue組件,需要的朋友可以參考下
2017-04-04
Bootstrap Modal遮罩彈出層代碼分享
本文給大家分享的這段代碼并非是Bootstrap的遮罩，只是簡單版的遮罩效果，對bootstrap modal 遮罩效果感興趣的朋友可以參考下本文
2016-11-11
本窗口將在秒后自動關閉
本窗口將在秒后自動關閉...
2006-07-07
JavaScript實現秒殺時鐘倒計時
這篇文章主要為大家詳細介紹了JavaScript實現秒殺時鐘倒計時，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2019-09-09