How to realize the effect of 3D Ring Graph with vue

This article mainly introduces "how to achieve 3D ring chart effect in vue". In daily operation, I believe many people have doubts about how to achieve 3D ring chart effect in vue. The editor consulted all kinds of materials and sorted out simple and easy-to-use operation methods. I hope it will be helpful for you to answer the doubt about "how to achieve 3D ring graph effect by vue". Next, please follow the editor to study!

1. Introduction of highcharts

2.main.js introduces highcharts

Import highcharts from 'highcharts'import highcharts3d from' highcharts/highcharts-3d'highcharts3d (highcharts)

3. Page introduction

Init () {/ / modify 3D pie chart drawing process let each = HighCharts.each, round = Math.round, cos = Math.cos, sin = Math.sin, deg2rad = Math.deg2rad HighCharts.wrap (HighCharts.seriesTypes.pie.prototype, 'translate', function (proceed) {proceed.apply (this, [] .slice.call (arguments, 1)); / / Do not do this if the chart is not 3D if (! this.chart.is3d ()) {return } var series = this, chart = series.chart, options = chart.options, seriesOptions = series.options, depth = seriesOptions.depth | | 0, options3d = options.chart.options3d, alpha = options3d.alpha, beta = options3d.beta, z = seriesOptions.stacking? (seriesOptions.stack | | 0) * depth: series._i * depth; z + = depth / 2; if (seriesOptions.grouping! = = false) {z = 0;} each (series.data, function (point) {var shapeArgs = point.shapeArgs, angle; point.shapeType = 'arc3d'; var ran = point.options.h ShapeArgs.z = z; shapeArgs.depth = depth * 0.75 + ran; shapeArgs.alpha = alpha; shapeArgs.beta = beta; shapeArgs.center = series.center; shapeArgs.ran = ran; angle = (shapeArgs.end + shapeArgs.start) / 2 Point.slicedTranslation = {translateX: round (cos (angle) * seriesOptions.slicedOffset * cos (alpha * deg2rad)), translateY: round (sin (angle) * seriesOptions.slicedOffset * cos (alpha * deg2rad)};});}) (function (H) {H.wrap (HighCharts.SVGRenderer.prototype, 'arc3dPath', function (proceed) {/ / Run original proceed method var ret = proceed.apply (this, [] .slice.call (arguments, 1)); console.log (ret); ret.zTop = (ret.zOut + 1) / 100; return ret;}) } (HighCharts)); / / Total daily coal stock HighCharts.chart ('output_3DPerCharts', {chart: {type:' pie', backgroundColor:'transparent', events: {load: function () {let each = HighCharts.each, points = this.series [0] .points Each (points, function (p, I) {p.graphic.attr ({translateY:-p.shapeArgs.ran}); p.graphic.side1.attr ({translateY:-p.shapeArgs.ran}) P.graphic.side2.attr ({translateY:-p.shapeArgs.ran});}) }, options3d: {enabled: true, alpha: 65},}, title: {text:''}, legend: {/ / Legend layout: "horizontal", verticalAlign: "bottom" Align: "center", y: 15, x: 0, useHTML: true, symbolWidth: 10, symbolHeight: 10, labelFormatter: function () {return this.name +'+ this.y + 'ton' }, itemStyle: {color:'#fff', fontSize:'14px',}}, tooltip: {enabled: false,}, credits: {enabled: false,} PlotOptions: {pie: {center: ['50%','68%'], size: 250, innerSize: 140, colors: ['# 249ba5', 2765b0],'# f6c155,'# ef8036','# be30ff']}} Series: [{name:' Qingciyao Mine', data:this.optionData, showInLegend: true, dataLabels: {padding:-10, shadow: true, style: {fontWeight: 'bold' FontSize:'14px', color: "# fff", textOutline:'1px 1px transparent',}, formatter: function () {return this.key +'+'+ (this.y / this.total * 100) .tofixed (2) +'%

';},},}])}

4. The final realization effect

At this point, the study of "how to achieve 3D ring graph effect in vue" is over. I hope to be able to solve your doubts. The collocation of theory and practice can better help you learn, go and try it! If you want to continue to learn more related knowledge, please continue to follow the website, the editor will continue to work hard to bring you more practical articles!