Echarts-3D柱状图

通过Echarts的echarts.graphic.extendShape实现真正的3D柱状图
思路就是通过调整顶部面(CubeTop)、左侧面(CubeLeft)、右侧面(CubeRight)来决定柱状图的宽窄
建议优先调整顶部面，一般c1不需要动

// echarts-3D-bar-config.js
import Vue from "vue";

const echarts = Vue.prototype.echarts;

const CubeLeft = echarts.graphic.extendShape({
  shape: {
    x: 0,
    y: 0
  },
  buildPath: function (ctx, shape) {
    const xAxisPoint = shape.xAxisPoint;
    // 顶部右侧顶点
    const c1 = [shape.x, shape.y];
    // 顶部左侧顶点
    const c2 = [shape.x - 15, shape.y - 8];
    // 底部左侧
    const c3 = [xAxisPoint[0] - 15, xAxisPoint[1] - 8];
    // 底部右侧
    const c4 = [xAxisPoint[0], xAxisPoint[1]];
    ctx.moveTo(c1[0], c1[1]).lineTo(c2[0], c2[1]).lineTo(c3[0], c3[1]).lineTo(c4[0], c4[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] + 15, xAxisPoint[1] - 8];
    // 顶部右侧顶点
    const c4 = [shape.x + 15, shape.y - 8];
    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 + 15, shape.y - 8];
    // 顶部顶点
    const c3 = [shape.x, shape.y - 15];
    // 右侧顶点
    const c4 = [shape.x - 15, shape.y - 8];
    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);
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63

然后在build-bar-option中引用即可
这里主要就是把series中的内容复制过来直接用就行了

import Vue from "vue";
import "./echarts-3D-Bar-config"

const echarts = Vue.prototype.echarts;

export function buildBarOption(vm, xData = [], seriesData = [], originData = []) {
  const option = {
    xAxis: {
      type: "category",
      axisLabel: {
        color: "#fff",
        rotate: 45,
        fontSize: 10
      },
      axisTick: {
        show: false
      },
      axisLine: {
        show: true,
        lineStyle: {
          color: "rgb(53, 179, 229)",
          width: 2
        }
      },
      data: xData
    },
    tooltip: {
      trigger: "item",
      axisPointer: {
        type: "shadow",
        label: {
          show: true
        }
      },
      backgroundColor: "transparent",
      padding: 0,
      formatter: function (params) {
        // console.log(params)
        return `
            

              
test
     
            
        `;
      }
    },
    grid: {
      left: "15",
      bottom: "10",
      right: "10",
      top: "40",
      containLabel: true
    },
    yAxis: {
      type: "value",
      axisLabel: {
        color: "#fff"
      },
      splitLine: {
        show: true,
        lineStyle: {
          type: "dotted",
          color: "rgb(53, 179, 229)"
        }
      }
    },
    series: [
      {
        type: "custom",
        renderItem: (params, api) => {
          const location = api.coord([api.value(0), api.value(1)]);
          return {
            type: "group",
            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: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    {
                      offset: 0,
                      color: "#3B80E2"
                    },
                    {
                      offset: 1,
                      color: "#49BEE5"
                    }
                  ])
                }
              },
              {
                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: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    {
                      offset: 0,
                      color: "#3B80E2"
                    },
                    {
                      offset: 1,
                      color: "#49BEE5"
                    }
                  ])
                }
              },
              {
                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: "#3B80E2"
                    },
                    {
                      offset: 1,
                      color: "#49BEE5"
                    }
                  ])
                }
              }
            ]
          };
        },
        data: seriesData
      },
      {
        data: seriesData,
        type: "bar",
        barWidth: 13,
        itemStyle: {
          color: "transparent"
        }
      }
    ]
  };

  return option;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161