亚洲情xo亚洲色xo无码,国产对白老熟女正在播放,亚洲日日精AV无码区A片

微信小程序的wx-charts插件

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

發(fā)布時(shí)間：2019-08-28

點(diǎn)擊：次

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

先來(lái)看一下網(wǎng)上對(duì)這個(gè)插件的評(píng)價(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文件（二選一）

然后在需要使用的頁(yè)面的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ù)說(shuō)明：

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)題字體大小（可選，單位為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，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)識(shí)
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) + '萬(wàn)';
}
}, {
name: '成交量2',
data: [0.30, 0.37, 0.65, 0.78, 0.69, 0.94],
format: function (val) {
return val.toFixed(2) + '萬(wàn)';
}
}],
yAxis: {
title: '成交金額 (萬(wàn)元)',
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 + '萬(wàn)';
}
},
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) + '萬(wàn)';
}
}, {
name: '成交量2',
data: [15, 20, 45, 37, 4, 80],
format: function (val) {
return val.toFixed(2) + '萬(wàn)';
}
}],
yAxis: {
format: function (val) {
return val + '萬(wàn)';
}
},
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雖然易上手的很容易的繪制圖形，但是無(wú)法滿足一些復(fù)雜的情況，比如highcharts里面的一些散點(diǎn)圖啊之類的，x軸無(wú)法法定義title，無(wú)法實(shí)現(xiàn)背景色的改變和手指上移數(shù)據(jù)的展示，也無(wú)法實(shí)現(xiàn)多個(gè)圖形進(jìn)行結(jié)合，如折線圖和柱形圖進(jìn)行同時(shí)的展示，只適合一些簡(jiǎn)單的數(shù)據(jù)和單一圖像的展示。

上一篇：微信小程序多張圖片上傳

下一篇：Android 一個(gè)app啟動(dòng)另一個(gè)app

返回列表

做抖音推廣運(yùn)營(yíng)，這些要弄明白！

2011年，短視頻已萌芽，但直到2016年下半年，抖音才上線。作

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

13530005652

支持圖標(biāo)類型