Shulou(Shulou.com)05/31 Report--

This article mainly explains "how to use the WeChat Mini Programs Chart plug-in in wx-charts". The content in the article is simple and clear, and it is easy to learn and understand. Please follow the editor's train of thought to study and learn "how to use the WeChat Mini Programs Chart plug-in in wx-charts".

WeChat Mini Programs Chart plug-in (wx-charts) is based on canvas drawing, compact in size, and supports chart types such as pie chart, line chart, bar chart, area chart and so on. At present, wx-charts is a powerful and easy-to-use one of WeChat Mini Programs's chart plug-ins.

Icon types are supported

Pie chart pie

Donut chart ring

Line graph line

Bar chart column

Area map area

Radar map radar

How to use it?

Directly reference the compiled file dist/charts.js (js download address)

Defined in .wxml

Canvas-id is consistent with canvasId in new wxCharts ({canvasId: "})

two。 Command Lin

Git clone github.com/xiaolin3303/wx-charts.gitnpm installrollup-gnpm installrollup-c or rollup-- config rollup.config.prod.js

Parameter description

Opts Objectopts.canvasId String required WeChat Mini Programs canvas-idopts.width Number required canvas width, in pxopts.height Number required canvas height, in pxopts.title Object (only for ring chart) opts.title.name String title content opts.title.fontSize Number title font size (optional In px) opts.title.color String title color (optional) opts.subtitle Object (only for ring chart) opts.subtitle.name String subtitle content opts.subtitle.fontSize Number subtitle font size (optional (in px) opts.subtitle.color String subtitle color (optional) whether opts.animation Boolean default true animates whether opts.legend Boolen default true displays various identifying opts.type String required chart types at the bottom of the chart. Available values are pie, line, column, area. Opts.categories Array required (pie chart, Donut chart does not need) whether the data category classification opts.dataLabel Boolean default true displays data content values in the chart opts.dataPointShape Boolean default true displays data points in the chart graphic identification opts.xAxis Object X-axis configuration opts.xAxis.disableGrid Boolean default false does not draw X-axis grid opts.yAxis Object Y-axis configuration opts.yAxis.format Function custom Y-axis text Case shows opts.yAxis.min Number Y axis start value opts.yAxis.max Number Y axis end value opts.yAxis.title String Y axis titleopts.yAxis.disabled Boolean default false does not draw Y axis opts.series Array required data list

Data list each structure definition

DataItem ObjectdataItem.data Array required (pie chart, circle chart is Number) data dataItem.color String for example, if # 7cb5ec is not introduced, the system default color scheme dataItem.name String data name dateItem.format Function is used to customize the display of data content.

For details, please see demo (specific demo git address)

1.pie

New wxCharts ({animation: true, / / whether there is animated 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,});}

2. Ring

New wxCharts ({animation: true, canvasId: 'ringCanvas', type:' ring', extra: {ringWidth: 25, pie: {offsetAngle:-45}}, title: {name:'70% yield, color:'# 7cb5eccentric, fontSize: 25}, subtitle: {name: 'yield', color:'# 66666666, fontSize: 15} Series: [{name: 'volume 1x, data: 15, stroke: false}, {name:' volume 2Q, data: 35, stroke: false}, {name: 'volume 3Q, data: 78, stroke: false}, {name:' volume 4Q, 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:'# f5f5f5cm, series: [{name: 'volume 1', data: simulationData.data, format: function (val, name) {return val.toFixed (2) + 'ten thousand' }}, {name: 'volume 2, data: [2, 0, 0, 3, null, 4, 0, 0, 2, 0], format: function (val, name) {return val.toFixed (2) +' ten thousand' }}], 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'}})

4. 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) + 'ten thousand';}}], yAxis: {format: function (val) {return val + 'ten thousand' }, 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: 'volume 1', data: [32, 45, 0, 56, 33, 34], format: function (val) {return val.toFixed (2) + 'ten thousand' }, {name: 'transaction volume 2 million, data: [15, 20, 45, 37, 4, 80], format: function (val) {return val.toFixed (2) +' ten thousand';},}], yAxis: {title: 'transaction amount (ten thousand yuan)', format: function (val) {return val.toFixed (2) }, min: 0, fontColor:'# 8085e9 percent, gridColor:'# 8085e9 percent, titleFontColor:'# f7a35c'}, xAxis: {fontColor:'# 7cb5ecride, gridColor:'# 7cb5ec'}, extra: {legendTextColor:'# cb2431'}, width: windowWidth, height: 200})

6.radar

New wxCharts ({canvasId: 'radarCanvas', type:' radar', categories: ['1x,'2x, '3mom,' 4x,'5y,'6'], series: [{name: 'volume 1Q, data: [90,110,125,95,87,122]}], width: windowWidth, height: 200, extra: {radar: {max: 150}})

Thank you for your reading, the above is the content of "how to use WeChat Mini Programs Chart plug-in in wx-charts". After the study of this article, I believe you have a deeper understanding of how to use WeChat Mini Programs Chart plug-in in wx-charts. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.