How to realize 3D column Chart with vue+echarts

This article mainly introduces the vue+echarts how to achieve 3D bar chart related knowledge, the content is detailed and easy to understand, the operation is simple and fast, has a certain reference value, I believe you will have something to gain after reading this vue+echarts how to achieve 3D bar chart article, let's take a look.

The effect is as follows:

1. Install echarts

Npm install echarts-save

2. Introduce echarts

Import echarts from "echarts"; / / modify the prototype chain. Use Vue.prototype.$echarts = echarts globally.

3. To create a chart, you first need to create a container for the chart in HTML

/ / the container of the chart must specify width and height # echarts_park {width: 400px; height: 200px;}

4. Render the chart

Mounted () {this.drawPark ();}, methods: {drawPark () {/ / initialize echarts let myChart = this.$echarts.init (document.getElementById ("echarts_park")) Let num= ["12", "12", "12", "14", "12", "12", "14", "12", "12", "12") Let xData = ["Hangzhou",] Var colors = [{type: "linear", x: 0, x2: 1, y: 0, y2: 0, colorStops: [{offset: 0, color: "# 0088F1",}, {offset: 1 Color: "# 00D1FF",},],}, {type: "linear", x: 0, x2: 0, y: 0, Y2: 1, colorStops: [{offset: 0, color: "# 67D0FF" }, {offset: 1, color: "# 3486DA",},],},] Var barWidth = 18 / / draw chart myChart.setOption ({tooltip: {trigger: "axis", axisPointer: {/ / coordinate axis indicator, axis trigger valid type: "shadow", / / default is straight line Optional: 'line' |' shadow'}, formatter: function (params) {var tipString = params [0] .axisValue + "" Var key = "value"; params.sort (function (obj1, obj2) {var val1 = obj1 [key]; var val2 = obj2 [key]; if (val1)

< val2) { return 1; } else if (val1 >

Val2) {return-1;} else {return 0;}}); var indexColor; for (var I = 0, length = params.length; I < length; iType +) {if (params[ I] .implementSubType = = "bar") {indexColor = params [I + 1] .color TipString + =''; tipString + ='