欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

微信小程序圖表插件wx-charts用法實(shí)例詳解

 更新時間:2019年05月20日 10:36:25   作者:我叫陳小皮。  
這篇文章主要介紹了微信小程序圖表插件wx-charts用法,結(jié)合實(shí)例形式較為詳細(xì)的總結(jié)分析了微信小程序圖表插件wx-charts的功能、常見用法及相關(guān)操作注意事項(xiàng),需要的朋友可以參考下

本文實(shí)例講述了微信小程序圖表插件wx-charts用法。分享給大家供大家參考,具體如下:

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

支持圖標(biāo)類型

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

如何使用?

1. 直接引用編譯好的文件 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

參數(shù)說明

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 標(biāo)題內(nèi)容
opts.title.fontSize Number 標(biāo)題字體大?。蛇x,單位為px)
opts.title.color String 標(biāo)題顏色(可選)
opts.subtitle Object (only for ring chart)
opts.subtitle.name String 副標(biāo)題內(nèi)容
opts.subtitle.fontSize Number 副標(biāo)題字體大小(可選,單位為px)
opts.subtitle.color String 副標(biāo)題顏色(可選)
opts.animation Boolean default true 是否動畫展示
opts.legend Boolen default true 是否顯示圖表下方各類別的標(biāo)識
opts.type String required 圖表類型,可選值為pie, line, column, area……
opts.categories Array required (餅圖、圓環(huán)圖不需要) 數(shù)據(jù)類別分類
opts.dataLabel Boolean default true 是否在圖表中顯示數(shù)據(jù)內(nèi)容值
opts.dataPointShape Boolean default true 是否在圖表中顯示數(shù)據(jù)點(diǎn)圖形標(biāo)識
opts.xAxis Object X軸配置
opts.xAxis.disableGrid Boolean default false 不繪制X軸網(wǎng)格
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 數(shù)據(jù)列表

數(shù)據(jù)列表每項(xiàng)結(jié)構(gòu)定義

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

詳見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
    }
  }
});

本人是自己查閱資料自己整理,希望對自己和有問題的你們都有幫

相關(guān)文章

  • uniapp?APP消息推送方案實(shí)現(xiàn)全過程

    uniapp?APP消息推送方案實(shí)現(xiàn)全過程

    前段時間開發(fā)app的時候要開始做消息推送功能了,下面這篇文章主要給大家介紹了關(guān)于uniapp?APP消息推送方案實(shí)現(xiàn)的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下
    2023-01-01
  • javascript實(shí)現(xiàn)顯示和隱藏div方法匯總

    javascript實(shí)現(xiàn)顯示和隱藏div方法匯總

    本文章通過幾個簡單的實(shí)例告訴你如何來實(shí)例關(guān)于隱藏與顯示div層及關(guān)閉層與隱藏的區(qū)別分析哦,有需要的同學(xué)可以參考一下本文章。
    2015-08-08
  • javascript 頁面跳轉(zhuǎn)方法集合

    javascript 頁面跳轉(zhuǎn)方法集合

    js 中實(shí)現(xiàn)頁面跳轉(zhuǎn)的方法(window.location和window.open的區(qū)別)
    2009-03-03
  • 微信小程序適配iphoneX的實(shí)現(xiàn)方法

    微信小程序適配iphoneX的實(shí)現(xiàn)方法

    這篇文章主要介紹了微信小程序適配iphoneX的實(shí)現(xiàn)方法,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2018-09-09
  • 今天,小程序正式支持 SVG

    今天,小程序正式支持 SVG

    這篇文章主要介紹了小程序支持SVG,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2019-04-04
  • JS判斷數(shù)組那點(diǎn)事

    JS判斷數(shù)組那點(diǎn)事

    在面試過程中經(jīng)常被面試官問到這樣的題目:如何判斷數(shù)組?下面小編就針對這個問題給大家收集整理了份資料,感興趣的朋友一起看看吧
    2017-10-10
  • JavaScript中內(nèi)置函數(shù)Map()的使用

    JavaScript中內(nèi)置函數(shù)Map()的使用

    Map()是JavaScript中內(nèi)置的一種數(shù)據(jù)結(jié)構(gòu),它允許您將鍵值對映射到任意類型的值,主要介紹了JavaScript中內(nèi)置函數(shù)Map()的使用,感興趣的可以了解一下
    2023-05-05
  • js中數(shù)組(Array)的排序(sort)注意事項(xiàng)說明

    js中數(shù)組(Array)的排序(sort)注意事項(xiàng)說明

    本篇文章主要是對js中數(shù)組(Array)的排序(sort)注意事項(xiàng)進(jìn)行了說明介紹,需要的朋友可以過來參考下,希望對大家有所幫助
    2014-01-01
  • js從10種顏色中隨機(jī)取色實(shí)現(xiàn)每次取出不同的顏色

    js從10種顏色中隨機(jī)取色實(shí)現(xiàn)每次取出不同的顏色

    昨天在做js 從10種顏色中隨機(jī)取色,并每次取出的顏色不同,具體的實(shí)現(xiàn)思路如下,感興趣的朋友可以參考下
    2013-10-10
  • 淺析Ajax語法

    淺析Ajax語法

    本文主要介紹了原生JS中Ajax的實(shí)現(xiàn)原理,XMLHttpRequest及promise的概念和流程。需要的朋友可以看下
    2016-12-12

最新評論