怎么在微信小程序中使用wx-charts圖表插件

今天就跟大家聊聊有關(guān)怎么在微信小程序中使用wx-charts圖表插件，可能很多人都不太了解，為了讓大家更加了解，小編給大家總結(jié)了以下內(nèi)容，希望大家根據(jù)這篇文章可以有所收獲。

成都創(chuàng)新互聯(lián)公司咨詢電話：18982081108，為您提供成都網(wǎng)站建設(shè)網(wǎng)頁設(shè)計(jì)及定制高端網(wǎng)站建設(shè)服務(wù)，成都創(chuàng)新互聯(lián)公司網(wǎng)頁制作領(lǐng)域10年，包括宣傳片制作等多個(gè)行業(yè)擁有豐富的網(wǎng)站營銷經(jīng)驗(yàn)，選擇成都創(chuàng)新互聯(lián)公司，為網(wǎ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)題字體大小（可選，單位為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)題字體大?。蛇x，單位為px）
opts.subtitle.color	String	副標(biāo)題顏色（可選）
opts.animation	Boolean default true	是否動(dòng)畫展示
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, //是否有動(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
    }
  }
});

看完上述內(nèi)容，你們對怎么在微信小程序中使用wx-charts圖表插件有進(jìn)一步的了解嗎？如果還想了解更多知識或者相關(guān)內(nèi)容，請關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，感謝大家的支持。

本文名稱：怎么在微信小程序中使用wx-charts圖表插件
鏈接地址：http://bm7419.com/article26/jdssjg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供營銷型網(wǎng)站建設(shè)、動(dòng)態(tài)網(wǎng)站、搜索引擎優(yōu)化、關(guān)鍵詞優(yōu)化、自適應(yīng)網(wǎng)站、響應(yīng)式網(wǎng)站

廣告

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