這篇文章主要講解了“wx-charts中怎么使用微信小程序圖表插件”，文中的講解內(nèi)容簡(jiǎn)單清晰，易于學(xué)習(xí)與理解，下面請(qǐng)大家跟著小編的思路慢慢深入，一起來研究和學(xué)習(xí)“wx-charts中怎么使用微信小程序圖表插件”吧！

尖扎ssl適用于網(wǎng)站、小程序/APP、API接口等需要進(jìn)行數(shù)據(jù)傳輸應(yīng)用場(chǎng)景，ssl證書未來市場(chǎng)廣闊！成為創(chuàng)新互聯(lián)建站的ssl證書銷售渠道，可以享受市場(chǎng)價(jià)格4-6折優(yōu)惠！如果有意向歡迎電話聯(lián)系或者加微信：13518219792（備注：SSL證書合作）期待與您的合作！

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

支持圖標(biāo)類型

• 餅圖 pie

• 圓環(huán)圖 ring

• 線圖 line

• 柱狀圖 column

• 區(qū)域圖 area

• 雷達(dá)圖 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

參數(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)題字體大小（可選，單位為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     是否動(dòng)畫展示
opts.legend         Boolen default true    是否顯示圖表下方各類別的標(biāo)識(shí)
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)識(shí)
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, //是否有動(dòng)畫
  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
    }
  }
});

感謝各位的閱讀，以上就是“wx-charts中怎么使用微信小程序圖表插件”的內(nèi)容了，經(jīng)過本文的學(xué)習(xí)后，相信大家對(duì)wx-charts中怎么使用微信小程序圖表插件這一問題有了更深刻的體會(huì)，具體使用情況還需要大家實(shí)踐驗(yàn)證。這里是創(chuàng)新互聯(lián)，小編將為大家推送更多相關(guān)知識(shí)點(diǎn)的文章，歡迎關(guān)注！

文章名稱：wx-charts中怎么使用微信小程序圖表插件
新聞來源：http://www.chinadenli.net/article12/iigggc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站排名、ChatGPT、網(wǎng)站制作、網(wǎng)站建設(shè)、微信小程序、企業(yè)建站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)