在vue中使用Echarts的3D柱状图

该文章为记录，避免再次踩坑

安装所需依赖版本：

"echarts": "^4.9.0",
"echarts-gl": "^1.1.1",
"vue-echarts": "^5.0.0-beta.0",

在main.js引入

import 'echarts'
import ECharts from 'vue-echarts'
Vue.component('v-chart', ECharts)

import 'echarts-gl'

组件代码

<template>
  <div class="echarts-class">
    <v-chart
      v-if="options"
      :options="options"
      height="100%"
      width="100%"
      class="echarts-class"
    />
  </div>
</template>

<script>
export default {
  props: {
    data: {
      type: Array,
      default: () => [],
    },
  },
  data() {
    return {
      options: false,
    };
  },
  mounted() {
    this.init();
  },
  methods: {
    init() {
      let that = this;
      console.log(this.data);
      let minvalue = 9999999;
      let maxvalue = 0;
      function generateData(theta, min, max) {
        var data = [];
        for (let i of that.data) {
          data.push([i.x, i.y, i.z]);
          minvalue = Math.min(minvalue, i.z);
          maxvalue = Math.max(maxvalue, i.z);
        }
        return data;
      }
      var data = generateData();
      this.options = {
        visualMap: {
          show: false,
          min: minvalue,
          max: maxvalue,
          inRange: {
            color: [
              "#313695",
              "#4575b4",
              "#74add1",
              "#abd9e9",
              "#e0f3f8",
              "#ffffbf",
              "#fee090",
              "#fdae61",
              "#f46d43",
              "#d73027",
              "#a50026",
            ],
          },
        },
        xAxis3D: {
          type: "category",
        },
        yAxis3D: {
          type: "category",
        },
        zAxis3D: {
          type: "value",
        },
        grid3D: {
          axisLine: {
            lineStyle: { color: "#000" },
          },
          axisPointer: {
            lineStyle: { color: "#000" },
          },
          viewControl: {},
          light: {
            main: {
              shadow: true,
              quality: "ultra",
              intensity: 1.5,
            },
          },
        },
        series: [
          {
            type: "bar3D",
            data: data,
            shading: "lambert",
            label: {
              formatter: function (param) {
                return param.value[2].toFixed(1);
              },
            },
          },
        ],
      };
    },
  },
  watch: {
    data: {
      handler(val, oldVal) {
        this.init();
      },
      deep: true,
    },
  },
};
</script>

<style lang="scss" scoped>
.echarts-class {
  width: 100%;
  height: 100%;
}
</style>

传入的data格式为

[
    {
        x:"A",
        y:"00:00",
        z:50
    },
    {
        x:"B",
        y:"00:00",
        z:40
    },
    {
        x:"C",
        y:"00:00",
        z:30
    },
    {
        x:"A",
        y:"01:00",
        z:50
    },
    {
        x:"B",
        y:"01:00",
        z:60
    },
    {
        x:"C",
        y:"01:00",
        z:70
    }
]

如需帮助可直接私信

QQ：929477145