3d柱状图

src/components/echartsTemplate/3dBar.vue

@@ -0,0 +1,272 @@
+<template>
+  <div id="sankey_echart" ref="echart"></div>
+</template>
+
+<script>
+import { cloneDeep } from "lodash";
+let colors = [
+  ["#2281D1", "#62ADED", "#92CDFF", "#229AFF"],
+  ["#B7750D", "#F9B447", "#CC820C", "#FFCB78"],
+  ["#209742", "#6EDC8D", "#2EC057", "#A5FFBE"],
+];
+let option = {
+  grid: {
+    left: "15%",
+    top: "10%",
+    right: "5%",
+    bottom: "20%",
+  },
+  // // 设置鼠标移入的提示，默认显示
+  // tooltip: {},
+  // // 设置图例
+  // legend: {
+  //   textStyle: {
+  //     color: "#999",
+  //   },
+  // },
+  // 设置x轴
+  xAxis: {
+    data: [],
+    // 显示x轴
+    axisLine: {
+      show: false,
+    },
+    // 设置x轴的颜色和偏移量
+    axisLabel: {
+      color: "#fff",
+      rotate: 0,
+    },
+    // 不显示x轴刻度
+    axisTick: {
+      show: false,
+    },
+  },
+  // 设置y轴
+  yAxis: {
+    // 显示y轴
+    axisLine: {
+      show: false,
+    },
+    // interval: 30,
+    // 设置y轴的颜色
+    axisLabel: {
+      color: "#fff",
+    },
+    // 不显示分隔线
+    splitLine: {
+      show: false,
+    },
+    splitLine: {
+      show: true,
+      // y-line
+      lineStyle: {
+        // width: 1,
+        type: "dashed",
+        color: "rgba(255, 255, 255, 0.15)",
+      },
+    },
+  },
+  // 表示不同系列的列表
+  series: [],
+};
+
+// 柱体
+let seriesItem = {
+  name: "",
+  type: "custom",
+  renderItem: (params, api) => {
+    const location = api.coord([api.value(0), api.value(1)]);
+    return {
+      type: "group",
+      x: (params.seriesIndex - 1) * 20,
+      children: [
+        {
+          type: "CubeLeft",
+          shape: {
+            api,
+            xValue: api.value(0),
+            yValue: api.value(1),
+            x: location[0],
+            y: location[1],
+            xAxisPoint: api.coord([api.value(0), 0]),
+          },
+          style: {
+            fill: colors[params.seriesIndex][0],
+            //   new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+            //     {
+            //       offset: 0,
+            //       color: "rgba(0, 164, 255, 1)",
+            //     },
+            //     {
+            //       offset: 1,
+            //       color: "rgba(0, 239, 255, 0)", //'#337CEB',
+            //     },
+            //   ]),
+          },
+        },
+        {
+          type: "CubeRight",
+          shape: {
+            api,
+            xValue: api.value(0),
+            yValue: api.value(1),
+            x: location[0],
+            y: location[1],
+            xAxisPoint: api.coord([api.value(0), 0]),
+          },
+          style: {
+            fill: colors[params.seriesIndex][1],
+            //   new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+            //     {
+            //       offset: 0,
+            //       color: "rgba(0, 144, 255, 1)",
+            //     },
+            //     {
+            //       offset: 1,
+            //       color: "rgba(0, 159, 253, 0)", //'#1A57B7',
+            //     },
+            //   ]),
+          },
+        },
+        {
+          type: "CubeTop",
+          shape: {
+            api,
+            xValue: api.value(0),
+            yValue: api.value(1),
+            x: location[0],
+            y: location[1],
+            xAxisPoint: api.coord([api.value(0), 0]),
+          },
+          style: {
+            fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+              {
+                offset: 0,
+                color: colors[params.seriesIndex][2],
+              },
+              {
+                offset: 1,
+                color: colors[params.seriesIndex][3],
+              },
+            ]),
+          },
+        },
+      ],
+    };
+  },
+  data: [],
+};
+
+export default {
+  name: "sankey_echart",
+  components: {},
+  data() {
+    return {
+      myChart: null,
+    };
+  },
+  methods: {
+    drawCube() {
+      const offsetX = 8;
+      const offsetY = 4;
+      // 绘制左侧面
+      const CubeLeft = echarts.graphic.extendShape({
+        shape: {
+          x: 0,
+          y: 0,
+        },
+        buildPath: function (ctx, shape) {
+          const xAxisPoint = shape.xAxisPoint;
+          const c0 = [shape.x, shape.y];
+          const c1 = [shape.x - offsetX, shape.y - offsetY];
+          const c2 = [xAxisPoint[0] - offsetX, xAxisPoint[1] - offsetY];
+          const c3 = [xAxisPoint[0], xAxisPoint[1]];
+          ctx
+            .moveTo(c0[0], c0[1])
+            .lineTo(c1[0], c1[1])
+            .lineTo(c2[0], c2[1])
+            .lineTo(c3[0], c3[1])
+            .closePath();
+        },
+      });
+      // 绘制右侧面
+      const CubeRight = echarts.graphic.extendShape({
+        shape: {
+          x: 0,
+          y: 0,
+        },
+        buildPath: function (ctx, shape) {
+          const xAxisPoint = shape.xAxisPoint;
+          const c1 = [shape.x, shape.y];
+          const c2 = [xAxisPoint[0], xAxisPoint[1]];
+          const c3 = [xAxisPoint[0] + offsetX, xAxisPoint[1] - offsetY];
+          const c4 = [shape.x + offsetX, shape.y - offsetY];
+          ctx
+            .moveTo(c1[0], c1[1])
+            .lineTo(c2[0], c2[1])
+            .lineTo(c3[0], c3[1])
+            .lineTo(c4[0], c4[1])
+            .closePath();
+        },
+      });
+      // 绘制顶面
+      const CubeTop = echarts.graphic.extendShape({
+        shape: {
+          x: 0,
+          y: 0,
+        },
+        buildPath: function (ctx, shape) {
+          const c1 = [shape.x, shape.y];
+          const c2 = [shape.x + offsetX, shape.y - offsetY]; //右点
+          const c3 = [shape.x, shape.y - offsetX];
+          const c4 = [shape.x - offsetX, shape.y - offsetY];
+          ctx
+            .moveTo(c1[0], c1[1])
+            .lineTo(c2[0], c2[1])
+            .lineTo(c3[0], c3[1])
+            .lineTo(c4[0], c4[1])
+            .closePath();
+        },
+      });
+      // 注册三个面图形
+      echarts.graphic.registerShape("CubeLeft", CubeLeft);
+      echarts.graphic.registerShape("CubeRight", CubeRight);
+      echarts.graphic.registerShape("CubeTop", CubeTop);
+    },
+    setOptions(v) {
+      if (!this.myChart) {
+        this.myChart = echarts.init(this.$refs.echart);
+      }
+      let option = this.options3d(v);
+      this.myChart.setOption(option);
+    },
+    options3d(v) {
+      option.xAxis.data = v.xData;
+      v.yData.forEach((item, k) => {
+        let o = cloneDeep(seriesItem); // JSON.parse(JSON.stringify(seriesItem));
+        // o.name = v.legend[k];
+
+        o.data = item;
+        if (v.interval) {
+          option.xAxis.axisLabel.interval = 0;
+          option.xAxis.axisLabel.rotate = 0;
+        }
+        option.series.push(o);
+      });
+      // v.areaStyle ? (option.series[0].areaStyle = v.areaStyle) : null;
+
+      return option;
+    },
+  },
+  mounted() {
+    this.drawCube();
+    // this.setOptions();
+  },
+};
+</script>
+<style lang="scss" scoped>
+.sankey_echart {
+  width: 100%;
+  height: 100%;
+}
+</style>

src/views/cockpitNew1/stxf.vue

@@ -24,10 +24,10 @@
 <script>
 //这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
 import borderTemplate from "./borderTemplate.vue";
-// import Bar3d from "../../components/echartsTemplate/3dBar.vue";
+import Bar3d from "../../components/echartsTemplate/3dBar.vue";
 
 export default {
-  components: { borderTemplate }, //Bar3d
+  components: { borderTemplate, Bar3d },
   data() {
     return {};
   },