vue+echarts怎么实现3D柱形图

这篇文章主要介绍了vue+echarts怎么实现3D柱形图的相关知识，内容详细易懂，操作简单快捷，具有一定借鉴价值，相信大家阅读完这篇vue+echarts怎么实现3D柱形图文章都会有所收获，下面我们一起来看看吧。

效果如下：

1、安装echarts

npm install echarts --save

2、引入echarts

import echarts from "echarts";//修改原型链,可在全局使用Vue.prototype.$echarts = echarts;

3、创建图表 首先需要在 HTML 中创建图表的容器

     //图表的容器必须指定宽高     #echarts_park {         width: 400px;         height: 200px;}

4、渲染图表

mounted() {    this.drawPark();  },  methods: {    drawPark() {        //初始化echarts      let myChart = this.$echarts.init(document.getElementById("echarts_park"));      let num= [        "12",        "12",        "12",        "14",        "12",        "12",        "12",        "14",        "12",        "12",        "12",      ];      let xData = [        "杭州市",        "杭州市",        "杭州市",        "杭州市",        "杭州市",        "杭州市",        "杭州市",        "杭州市",        "杭州市",        "杭州市",        "杭州市",      ];      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;      // 绘制图表      myChart.setOption({        tooltip: {          trigger: "axis",          axisPointer: {            // 坐标轴指示器，坐标轴触发有效            type: "shadow", // 默认为直线，可选为：'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; i++) {              if (params[i].componentSubType == "bar") {                indexColor = params[i + 1].color;                tipString +=                  '';                tipString +=                  '