极品人妻少妇一区二区三区,人妻美妇疯狂迎合,欧美人与动交片免费播放

微信小程序的wx-charts插件

發(fā)布者：深藍(lán)互聯(lián)

發(fā)布時(shí)間：2019-12-13

點(diǎn)擊：次

還有就是可以使用一些小程序的插件，比如wx-charts.

先來看一下網(wǎng)上對這個(gè)插件的評價(jià)：

目前在github上有1804顆星，使用的比較廣泛。

github地址：https://github.com/xiaolin3303/wx-charts.git；

支持圖標(biāo)類型

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

使用方法

直接引入編譯好的dist里面的js文件（二選一）

然后在需要使用的頁面的js當(dāng)中使用require引入即可：

1	`let` `Charts = require('./../../utils/wxcharts.js');`

　　.wxml中定義

　　canvas-id與js當(dāng)中的new Charts選項(xiàng)當(dāng)中的canvasId必須要一致才行；

參數(shù)說明：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25 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)題字體大?。蛇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，radar，ring
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)格（適用于折線圖，柱形圖，區(qū)域圖）
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

1	`opts.yAxis.titleFontColor String Y軸title的文字的顏色`

1	`opts.yAxis.fontColor String Y軸文字的顏色`

1	`opts.yAxis.gridColor String Y軸格子的顏色`

1 2	`opts.yAxis.disabled Boolean` `default` `false` `不繪制Y軸` `opts.series Array required 數(shù)據(jù)列表`

　　數(shù)據(jù)列表series的參數(shù)

1
2
3
4
5 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)容

　　高清顯示

設(shè)置canvas的尺寸為2倍大小，然后縮小到50%，建議都進(jìn)行這樣的設(shè)置，圖表本身繪制時(shí)是按照高清顯示配置的，不然整體效果會(huì)偏大（一般以iPhone6為標(biāo)準(zhǔn)進(jìn)行設(shè)計(jì)）

1
2
3
4
5
6 /* 例如設(shè)計(jì)圖尺寸為320 x 300 */
.canvas {
width: 640px;
height: 600px;
transform: scale(0.5)
}

　　例子：

　　pie（餅圖）

1
2
3
4
5
6
7
8 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）

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29 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],//設(shè)置某一個(gè)值為null會(huì)出現(xiàn)斷層
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,<br>gridColor:"red"

1
2
3
4
5 },
width: 840,
height: 600,
dataLabel: true
});

柱狀圖（column）

1
2
3
4
5
6
7
8 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],<br>　　　　　color:"rgba(0,0,0,0.3)"//支持rgba，但不支持漸變色

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24 }, {
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 //柱的寬度
}
}
});

區(qū)域圖（area）

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25 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
});

環(huán)形圖（ring）

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44 new Charts({
animation: true,
canvasId: 'canvas5',
type: 'ring',
extra: {
ringWidth: 10,//圓環(huán)的寬度
pie: {
offsetAngle: -45//圓環(huán)的角度
}
},
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
});

雷達(dá)圖（radar）

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20 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//雷達(dá)數(shù)值的最大值
}
}
});

但是，每一個(gè)插件都不是完美的，wx-charts雖然易上手的很容易的繪制圖形，但是無法滿足一些復(fù)雜的情況，比如highcharts里面的一些散點(diǎn)圖啊之類的，x軸無法法定義title，無法實(shí)現(xiàn)背景色的改變和手指上移數(shù)據(jù)的展示，也無法實(shí)現(xiàn)多個(gè)圖形進(jìn)行結(jié)合，如折線圖和柱形圖進(jìn)行同時(shí)的展示，只適合一些簡單的數(shù)據(jù)和單一圖像的展示。

上一篇：iOS App上架流程

下一篇：移動(dòng)App服務(wù)端架構(gòu)設(shè)計(jì)

返回列表

无码人妻精一区二区三区,eeuss影院www在线观看,无码精品久久久久久人妻中字,日韩av高清在线看片

13530005652

支持圖標(biāo)類型