How to use echarts to realize three-dimensional column Chart in vue

Today, I would like to share with you how vue uses echarts to achieve three-dimensional bar chart related knowledge points, the content is detailed, the logic is clear, I believe most people still know too much about this knowledge, so share this article for your reference, I hope you can get something after reading this article, let's take a look at it.

The three-dimensional column chart is composed of the front, the right and the upper three parts. When drawing, you need to draw a figure in front, and a figure on the right and above, then register in echats and render in renderItem in the series of option.

The code is as follows:

(1) Registration to draw graphics

Registry () {let MyCubeRect = this.$echarts.graphic.extendShape ({shape: {x: 0, y: 0, width: 20, zWidth: 8, zHeight: 4}, buildPath: function (ctx, shape) {const api = shape.api const xAxisPoint = api.coord ([shape.xValue) 0]) const p0 = [shape.x, shape.y] const p1 = [shape.x-shape.width / 2, shape.y] const p4 = [shape.x + shape.width / 2, shape.y] const p2 = [shape.x-shape.width / 2, xAxisPoint [1]] const p3 = [shape.x + shape.width / 2, xAxisPoint [1]] ctx.moveTo (p0 [0]) P0 [1]) ctx.lineTo (p1 [0], p1 [1]) ctx.lineTo (p2 [0], p2 [1]) ctx.lineTo (p3 [0], p3 [1]) ctx.lineTo (p4 [0], p4 [1]) ctx.lineTo (p0 [0]) P0 [1]) ctx.closePath ()}) let MyCubeShadow = this.$echarts.graphic.extendShape ({shape: {x: 0, y: 0, width: 20, zWidth: 8, zHeight: 4}, buildPath: function (ctx) Shape) {const api = shape.api const xAxisPoint = api.coord ([shape.xValue, 0]) const p1 = [shape.x-shape.width / 2, shape.y] const p4 = [shape.x + shape.width / 2, shape.y] const p6 = [shape.x + shape.width / 2 + shape.zWidth Shape.y-shape.zHeight] const p7 = [shape.x-shape.width / 2 + shape.zWidth, shape.y-shape.zHeight] const p3 = [shape.x + shape.width / 2, xAxisPoint [1]] const p5 = [shape.x + shape.width / 2 + shape.zWidth, xAxisPoint [1]-shape.zHeight] ctx.moveTo (p4 [0], p4 [1]) ctx.lineTo (p3 [0]) P3 [1]) ctx.lineTo (p5 [0], p5 [1]) ctx.lineTo (p6 [0], p6 [1]) ctx.lineTo (p4 [0], p4 [1]) ctx.moveTo (p4 [0], p4 [1]) ctx.lineTo (p6 [0], p6 [1]) ctx.lineTo (p7 [0]) P7 [1]) ctx.lineTo (p1 [0], p1 [1]) ctx.lineTo (p4 [0], p4 [1]) ctx.closePath ()}) this.$echarts.graphic.registerShape ('MyCubeRect', MyCubeRect) this.$echarts.graphic.registerShape (' MyCubeShadow', MyCubeShadow)}

(2) render graphics

BarChartOption: {tooltip: {trigger: 'axis', axisPointer: {type:' cross', label: {backgroundColor:'# 6a7985'}, grid: {containLabel: true, top: '30pxrabbit, bottom:' 0px' Left: '0px'}, xAxis: {type:' category', axisLabel: {interval: 0, fontSize: fontSize (12)}, axisLine: {show: false, lineStyle: {color:'# 98b9c5'}} Data: [] / / data is passed in via backend js}, yAxis: {type: 'value', axisLabel: {fontSize: fontSize (12)}, axisLine: {show: false LineStyle: {color:'# 98b9c5'}}, splitLine: {lineStyle: {color:'# 3a586a, type: 'dashed'}, series: [{name:' energy consumption per unit area' Type: 'custom', renderItem: (params, api) = > {let location = api.coord ([api.value (0), api.value (1)]) return {type:' group', children: [{type: 'MyCubeRect', shape: {api XValue: api.value (0)-0.5, yValue: api.value (1), x: location [0], y: location [1]}, style: api.style ()}, {type: 'MyCubeShadow' Shape: {api, xValue: api.value (0)-0.5, yValue: api.value (1), x: location [0], y: location [1]} Style: {fill: api.style (), text:''}, stack: 'energy consumption per unit area', label: {show: true, position: 'top' Formatter:'{c}', textStyle: {fontSize: fontSize (12), color:'# fff', align: 'center'}}, itemStyle: {color: new this.$echarts.graphic.LinearGradient (0,0,0,1) [{offset: 0, color:'# b1950d'}, {offset: 0.5, color:'# aea20d'}, {offset: 1, color:'# a5aa12'}])}, data: [] / / backend incoming data}]}

Note:

1) style: only style: api.style () can be used when registering a drawing

Text:''before you can use label to place value at the top of the graph

2). This.$echarts is uniformly packaged, and the specific situation needs to be considered.

(3) generate graphics

GenerateBarChart () {let vm = this if (this.$refs ['uintEnergyConsume']) {/ / this.$refs is the ref value of the generated graphics area this.$echarts.graphic.registerShape (' MyCubeRect', this.MyCubeRect) this.$echarts.graphic.registerShape ('MyCubeShadow', this.MyCubeShadow) this.barChart = this.$echarts.init (this.$refs [' uintEnergyConsume']) this.barChart.setOption (this.barChartOption, false) True) $(window) .resize (function () {/ / screen adaptive vm.handleResize ()})}

(4) Code in template

(5) the effects are as follows:

These are all the contents of the article "how to use echarts to achieve a three-dimensional bar chart in vue". Thank you for reading! I believe you will gain a lot after reading this article. The editor will update different knowledge for you every day. If you want to learn more knowledge, please pay attention to the industry information channel.