Shulou(Shulou.com)06/01 Report--

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.

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.