Mpvue using Wxcharts.js to display various types of charts

Try to use Wx-charts to display various types of data using charts, mainly to note that the ID notation in <canvas></canvas> is not id= "Ringcanvas", but canvas-id= "Ringcanvas".

Reference Blog: 75160063

Wxcharts.js:https://github.com/xiaolin3303/wx-charts

1<canvas canvas-id= "Ringcanvas" style= "text-align:center;height:300px;width:375px;" ></canvas>2 3<script>4Import Wxcharts from ' .../utils/wxcharts '5 ...6 methods:{7 charts () {8             NewWxcharts ({9Animationtrue,TenCanvasid: ' Ringcanvas ', OneType: ' Ring ', A Extra: { -Ringwidth:15, - pie: { theOffsetangle:-90 -                     }, -                 }, - subtitle: { +Fontside:16 -                 }, + series: [{ AName: ' Volume 1 ', atData:15, -Strokefalse -                 }, { -Name: ' Volume 2 ', -Data:35, -                 }, { inName: ' Volume 3 ', -data:78, to                 }], +width:375, -height:200, theDataLabel:false, *             }); $         }Panax Notoginseng }, - ansyc onshow () { the      This. Charts ();} +</script>

Effect:

Parameter description

optsObject opts.canvasIdString Required Applet Canvas-id opts.widthNumber required canvas width in px opts.heightNumber required canvas height in px opts.backgroundString Canvas Background color (if the page background color is not white, set as the background color of the page, default #ffffff ) opts.enableScrollBoolean whether to open the chart can drag scroll default false support line , area chart type (need to match binding scrollStart , scroll scrollEnd method) opts.titleObject (only for ring chart) opts.title.nameString Header Content opts.title.fontSizeNumber Title font size (optional, px) opts.title.colorString caption Color (optional) opts.title.offsetXNumber title transverse position offset, unit px, default 0 opts.subtitleObject (only for ring chart) opts.subtitle.nameString subtitle Content opts.subtitle.offsetXNumber subtitle transverse position offset, unit px, default 0 opts.subtitle.fontSizeNumber subtitle font size (optional, px) opts.subtitle.colorString subtitle color (optional) opts.animationWhether Boolean default true animation is displayed opts.legendBoolen default true shows the types of labels below the chart opts.typeString Required chart type, optional value,,,,, pie line column area ringradar opts.categoriesArray Required (pie chart, doughnut chart not required) data category categories opts.dataLabelBoolean default true whether to display data content values in the chart opts.dataPointShapeBoolean default true whether to display the data point graphic identification in the chart opts.disablePieStrokeBoolean default false does not draw white split lines for each chunk of a pie chart (doughnut chart) opts.xAxisObject X-Axis configuration opts.xAxis.gridColorString such as #7cb5ec default #cccccc x axis grid color opts.xAxis.fontColorString such as #7cb5ec default #666666 x axis data point color opts.xAxis.disableGridBoolean default false does not draw the x-axis grid opts.xAxis.typeString Optional value calibration(刻度) defaults to include style opts.yAxisObject Y-Axis configuration opts.yAxis.formatFunction Custom y-axis copy display opts.yAxis.minNumber y-axis start value opts.yAxis.maxNumber y-Axis termination value opts.yAxis.titleString Y-Axis title opts.yAxis.gridColorString such as #7cb5ec default #cccccc y-axis grid color opts.yAxis.fontColorString such as #7cb5ec default #666666 y-axis data point color opts.yAxis.titleFontColorString For example #7cb5ec default #333333 y axis title color opts.yAxis.disabledBoolean default false does not draw the y-axis opts.extraObject other non-generic configuration items opts.extra.ringWidthNumber ringChart ring width, in units ofpx opts.extra.lineStyleString (valid only line for area chart) optional value: curve curve, straight line (default) opts.extra.columnObject Histogram related configuration opts.extra.column.widthThe graph width of each item in the number histogram, in units ofpx opts.extra.legendTextColorString such as #7cb5ec default #cccccc legend copy Color opts.extra.radarObject Radar Diagram Related configuration opts.extra.radar.maxNumber, default is series data the maximum, data interval maximum, used to adjust the scale of the data display opts.extra.radar.labelColorString, default to the #666666 color of each identity copy opts.extra.radar.gridColorString, default to #cccccc , Radar grid color opts.extra.pieObject pie chart, doughnut-related configuration opts.extra.pie.offsetAngleNumber, the default is 0 , the starting angle offset degrees, clockwise direction, the starting point is 3 o'clock position (for example, to set the starting point to 12 o'clock position, that is, the counter-clockwise offset 90 degrees, 90 can be passed) opts.seriesArray Required Data List Data list per item structure definition dataItemObject dataItem.dataArray Required (pie chart, doughnut chart number) data if a null breakpoint appears at the time of the incoming chart dataItem.colorString For example #7cb5ec does not pass in uses the system default color scheme dataItem.nameString Data Name dateItem.formatFunction Custom Display data content

Mpvue using Wxcharts.js to display various types of charts