還有就是可以使用一些小程序的插件，比如wx-charts.
先來看一下網上對這個插件的評價：
目前在github上有
1804顆星，使用的比較廣泛。
github地址：https://github.com/xiaolin3303/wx-charts.git；
支持圖標類型
- 餅圖 pie
- 圓環圖 ring
- 線圖 line
- 柱狀圖 column
- 區域圖 area
- 雷達圖 radar
使用方法
直接引入編譯好的dist里面的js文件（二選一）
然后在需要使用的頁面的js當中使用require引入即可：
let Charts = require('./../../utils/wxcharts.js');
.wxml中定義
<canvas canvas-id="canvas1"></canvas>
<canvas canvas-id="canvas2"></canvas>
<canvas canvas-id="canvas3"></canvas>
<canvas canvas-id="canvas4"></canvas>
<canvas canvas-id="canvas5"></canvas>
<canvas canvas-id="canvas6"></canvas>
canvas-id與js當中的new Charts選項當中的canvasId必須要一致才行；
參數說明：
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 副標題字體大小（可選，單位為px） opts.subtitle.color String 副標題顏色（可選） opts.animation Boolean default true 是否動畫展示 opts.legend Boolen default true 是否顯示圖表下方各類別的標識 opts.type String required 圖表類型，可選值為pie, line, column, area，radar，ring opts.categories Array required (餅圖、圓環圖不需要) 數據類別分類 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.titleFontColor String Y軸title的文字的顏色
opts.yAxis.fontColor String Y軸文字的顏色
opts.yAxis.gridColor String Y軸格子的顏色
opts.yAxis.disabled Boolean default false 不繪制Y軸 opts.series Array required 數據列表
數據列表series的參數
dataItem Object dataItem.data Array required (餅圖、圓環圖為Number) 數據 dataItem.color String 例如#7cb5ec 不傳入則使用系統默認配色方案 dataItem.name String 數據名稱 dateItem.format Function 自定義顯示數據內容
高清顯示
設置canvas的尺寸為2倍大小，然后縮小到50%，建議都進行這樣的設置，圖表本身繪制時是按照高清顯示配置的，不然整體效果會偏大（一般以iPhone6為標准進行設計）
/* 例如設計圖尺寸為320 x 300 */
.canvas {
width: 640px;
height: 600px;
transform: scale(0.5)
}
例子：
pie（餅圖）
new Charts({
canvasId: 'canvas1',
type: 'pie',
series: [{ name: '一班', data: 50 }, { name: '二班', data: 30 }, { name: '三班', data: 20 }, { name: '四班', data: 18 }, { name: '五班', data: 8 }],
width: 640,
height: 400,
dataLabel: true,
});
線圖（circle）
new Charts({
canvasId: 'canvas2',
dataPointShape: "circle",
type: 'line',
extra: {
lineStyle: 'curve' //線條的形狀（弧形）
},
categories: ['2012', '2013', '2014', '2015', '2016', '2017'],
series: [{
name: '成交量1',
data: [0.15, null, 0.45, 0.37, 0.4, 0.8],//設置某一個值為null會出現斷層
format: function (val) {
return val.toFixed(2) + '萬';
}
}, {
name: '成交量2',
data: [0.30, 0.37, 0.65, 0.78, 0.69, 0.94],
format: function (val) {
return val.toFixed(2) + '萬';
}
}],
yAxis: {
title: '成交金額 (萬元)',
format: function (val) {
return val.toFixed(2);
},
fontColor: "red",
titleFontColor: "red",
min: 0,
gridColor:"red"
}, width: 840, height: 600, dataLabel: true });
柱狀圖（column）
new Charts({
canvasId: 'canvas3',
dataPointShape: false,
type: 'column',
categories: ['2016-08', '2016-09', '2016-10', '2016-11', '2016-12', '2017'],
series: [{
name: '成交量1',
data: [15, 20, 45, 37, 4, 80],
color:"rgba(0,0,0,0.3)"//支持rgba，但不支持漸變色
}, {
name: '成交量2',
data: [70, 40, 65, 100, 34, 18]
}, {
name: '成交量3',
data: [100, 50, 75, 200, 15, 13]
}],
yAxis: {
format: function (val) {
return val + '萬';
}
},
xAxis: {
disableGrid: true,
},
width: 640,
height: 400,
dataLabel: true,
extra: {
column: {
width: 40 //柱的寬度
}
}
});
區域圖（area）
new Charts({
canvasId: 'canvas4',
type: 'area',
categories: ['2016-08', '2016-09', '2016-10', '2016-11', '2016-12', '2017'],
series: [{
name: '成交量1',
data: [70, 40, 65, 100, 34, 18],
format: function (val) {
return val.toFixed(2) + '萬';
}
}, {
name: '成交量2',
data: [15, 20, 45, 37, 4, 80],
format: function (val) {
return val.toFixed(2) + '萬';
}
}],
yAxis: {
format: function (val) {
return val + '萬';
}
},
width: 640,
height: 400
});
環形圖（ring）
new Charts({
animation: true,
canvasId: 'canvas5',
type: 'ring',
extra: {
ringWidth: 10,//圓環的寬度
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: 640,
height: 200,
dataLabel: true,
legend: false,
padding: 0
});
雷達圖（radar）
new Charts({
animation: true,
canvasId: 'canvas6',
type: 'radar',
categories: ['1', '2', '3', '4', '5', '6'],
series: [{
name: '成交量1',
data: [90, 110, 125, 95, 87, 122]
}, {
name: '成交量2',
data: [190, 210, 105, 35, 27, 102]
}],
width: 640,
height: 200,
extra: {
radar: {
max: 200//雷達數值的最大值
}
}
});
但是，每一個插件都不是完美的，wx-charts雖然易上手的很容易的繪制圖形，但是無法滿足一些復雜的情況，比如highcharts里面的一些散點圖啊之類的，x軸無法法定義title，無法實現背景色的改變和手指上移數據的展示，也無法實現多個圖形進行結合，如折線圖和柱形圖進行同時的展示，只適合一些簡單的數據和單一圖像的展示。