There was a recent requirement to use a charting plug-in similar to echarts.js. So Baidu looked it up and found wX-chart.js, which was good to use.
Based on canvas, wechat Small program Charting plug-in (WX-chart.js) supports common graph drawing of chart types such as pie chart, line chart, bar chart and area chart, basically meeting daily development requirements.
Support types
- Pie pie
- Ring charts ring
- Plot line
- Histogram of the column
- Regional map area
- Entirely radar
How to use it?
- Directly reference the compiled file chart.js (Js download address)
<canvas canvas-id="lineCanvas" disable-scroll="true" class="canvas"></canvas>Copy the code - Introduce the document at the top of the page and write these sentences
var wxCharts = require('./wxCharts'Var app = getApp() var daulineChart = null var yuelineChart = null Canvas-id must match new wxCharts({canvasId:""}) are consistent with canvasIdCopy the code - Write a method to make charts execute (then execute on page load)
getMothElectro: function () {
var windowWidth = 320;
try {
var res = wx.getSystemInfoSync();
windowWidth = res.windowWidth;
} catch (e) {
console.error('getSystemInfoSync failed! ');
}
yuelineChart = new wxCharts({
canvasId: 'yueEle'.type: 'radar',
categories: ['1'.'2'.'3'.'4'.'5'.'6'],
series: [{
name: 'Statistics',
data: [90, 110, 125, 95, 87, 122]
}],
width: windowWidth,
height: 200,
extra: {
radar: {
max: 150
}
}
});
}Copy the codeTo change the report type, simply copy the following demo and replace New wxCharts
I’ll give you the demo for your reference
1. Pie
new wxCharts({
animation: true// Whether there is an animation canvasId:'pieCanvas'.type: 'pie',
series: [{
name: 'Volume 1',
data: 15,
}, {
name: 'Volume 2',
data: 35,
}, {
name: 'Volume 3',
data: 78,
}],
width: windowWidth,
height: 300,
dataLabel: true}); }Copy the code
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: 'Yield',
color: '# 666666',
fontSize: 15
},
series: [{
name: 'Volume 1',
data: 15,
stroke: false
}, {
name: 'Volume 2',
data: 35,
stroke: false
}, {
name: 'Volume 3',
data: 78,
stroke: false
}, {
name: 'Volume 4',
data: 63,
stroke: false}].disablePieStroke: true,
width: windowWidth,
height: 200,
dataLabel: false,
legend: false,
padding: 0
});Copy the code
3. [/ b]
new wxCharts({
canvasId: 'lineCanvas'.type: 'line',
categories: simulationData.categories,
animation: true,
background: '#f5f5f5',
series: [{
name: 'Volume 1',
data: simulationData.data,
format: function (val, name) {
return val.toFixed(2) + '万';
}
}, {
name: 'Volume 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: 'Transaction Amount (Ten thousand Yuan)',
format: function (val) {
return val.toFixed(2);
},
min: 0
},
width: windowWidth,
height: 200,
dataLabel: false,
dataPointShape: true,
extra: {
lineStyle: 'curve'}});Copy the code
4. The column in the column
new wxCharts({
canvasId: 'columnCanvas'.type: 'column',
animation: true,
categories: chartData.main.categories,
series: [{
name: 'Volume',
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,
});Copy the code
5.
new wxCharts({
canvasId: 'areaCanvas'.type: 'area',
categories: ['1'.'2'.'3'.'4'.'5'.'6'],
animation: true,
series: [{
name: 'Volume 1',
data: [32, 45, 0, 56, 33, 34],
format: function (val) {
return val.toFixed(2) + '万';
}
}, {
name: 'Volume 2',
data: [15, 20, 45, 37, 4, 80],
format: function (val) {
return val.toFixed(2) + '万';
},
}],
yAxis: {
title: 'Transaction Amount (Ten thousand Yuan)',
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
});Copy the code
6. What’s on the radar?
new wxCharts({
canvasId: 'radarCanvas'.type: 'radar',
categories: ['1'.'2'.'3'.'4'.'5'.'6'],
series: [{
name: 'Volume 1',
data: [90, 110, 125, 95, 87, 122]
}],
width: windowWidth,
height: 200,
extra: {
radar: {
max: 150
}
}
});Copy the code
Finally, the API parameters
CanvasId String Required canvas-id opts. Width Number required canvas width, Height Number required Canvas height (unit: px opts. Title Object (only)forOpts.title. name String title content opts.title.fontSize Number title fontSize (optional, Unit: px) opts.title. Color String Title color (Optional) Opts.subtitle Object (only)forOpts.subtitle. name String subtitle content opts.subtitle.fontSize Number subtitle fontSize (optional, The unit is px) opts.subtitle.color String Subtitle color (Optional) opts.Animation Boolean defaulttrueLegend Boolen Default Whether to animate optstrueOpts. Type String Required Indicates the type of the chart. The possible values are pie, line, column, area...... Opts.categories Array Required (Not required for pie chart or ring chart) Data Category Category opts.datalabel Boolean defaulttrueOpts. DataPointShape Boolean Default Specifies whether to display data content in the graphtrueOpts.xaxis Object Indicates the X axis configuration. Opts.xaxis. DisableGrid Boolean defaultfalseOpts.yaxis Object Configures opts.yaxis. Format Function Customize the Y-axis text. Display opts.yaxis End Y-axis Value opts.yaxis. Title String Y-axis title opts.yaxis. Disabled Boolean defaultfalseDo not draw the Y-axis OPts.series Array required data listCopy the codeData list structure definition for each item
DataItem Object dataItem.data Array Required (Pie chart, circle graph Number) Data dataitem. color String For example# 7CB5EC does not pass in the system's default color schemeDataitem. name String Data name DateItem. format Function User-defined display data contentCopy the codeThe arrangement is hasty, if there is any mistake welcome to correct. In the meantime, thanks for sharing