ToB企服应用市场:ToB评测及商务社交产业平台

标题: echarts实现3d柱状效果 [打印本页]

---

作者: 小小小幸运    时间: 2024-7-23 15:14
标题: echarts实现3d柱状效果

代码如下，单个的调第一个方法，多个柱状的调第二个方法，详细情况修改参数大概二次开发即可

1. //3d柱状图
2. export function getEcharts3DBar (xAxisData:string[]=['name1','name2','name3'], data:number[]=[1,2,3], colorObj:IBaseObject={
3.   topStartColor:'rgba(236, 191, 55)',
4.   topEndColor:'rgba(236, 191, 55)',
5.   startColor:'rgba(71, 57, 30)',
6.   endColor:'rgba(236, 191, 55)',
7.   bottomStartColor:'rgba(236, 191, 55)',
8.   bottomEndColor:'rgba(236, 191, 55)'
9. }) {
10.   return {
11.     tooltip: {
12.       trigger: "axis",
13.       axisPointer: {
14.         type: 'shadow'
15.       },
16.       backgroundColor:'rgba(255,255,255,.1)',
17.       borderColor:'rgba(40, 60, 74)',
18.       textStyle:{
19.         align:'left',
20.         fontSize: 10,//字体大小
21.         color:'#fff',
22.       },
23.       formatter: function (params) {
24.         var str = params[0].axisValue + "：" +params[0].value;
25.         return str;
26.       },
27.     },
28.     grid: {
29.       left: "3%", //图表距边框的距离
30.       right: "3%",
31.       top: "15%",
32.       bottom: "5%",
33.       containLabel: true,
34.     },
35.     xAxis: {
36.       data: xAxisData,
37.       axisTick: {
38.         show: false,
39.       },
40.       axisLabel: {
41.         color: '#cae2ee' // 设置Y轴文字颜色为蓝色
42.       }
43.     },
44.     yAxis: {
45.       type: 'value',
46.       splitLine: {
47.         show: 'ture', // 是否显示y轴分割线
48.         interval: 'auto', // 坐标轴分隔线的显示间隔
49.         lineStyle: {
50.           color: ['rgba(232,236,239,.2)'], // 分隔线颜色。
51.           width: 1, // 分隔线线宽
52.           type: 'dashed', // 线的类型
53.           opacity: 1 // 图形透明度。支持从 0 到 1 的数字，为 0 时不绘制该图形。
54.         }
55.       },
56.       axisLabel: {
57.         color: '#cae2ee' // 设置Y轴文字颜色为蓝色
58.       }
59.     },
60.     series: [
61.       // 数据低下的圆片
62.       {
63.         name: '',
64.         type: 'pictorialBar',
65.         symbol: 'diamond',
66.         symbolSize: [16,10], // 宽，高
67.         symbolOffset:[0,2],// 左 上
68.         symbolPosition: 'start',
69.         z: 0,
70.         itemStyle: {
71.           color: () => {
72.             return new echarts.graphic.LinearGradient(0, 0, 0, 1, [
73.               { offset: 0, color: colorObj.bottomStartColor },
74.               { offset: 1, color: colorObj.bottomEndColor }
75.             ]);
76.           }
77.         },
78.         data: data
79.       },
80.       // 数据的柱状图
81.       {
82.         name: '',
83.         type: 'bar',
84.         barWidth: 8, // 柱条的宽度，不设时自适应。
85.         showSymbol: false,
86.         hoverAnimation: false,
87.         data: data,
88.         itemStyle: {
89.           // normal: {
90.           color: () => {
91.             return new echarts.graphic.LinearGradient(0, 0, 0, 1, [
92.               { offset: 0, color: colorObj.startColor },
93.               { offset: 1, color: colorObj.endColor }
94.             ]);
95.           },
96.           borderRadius:[1,0,0,100],
97.           // }
98.         },
99.       },
100.       {
101.         name: '',
102.         type: 'bar',
103.         barWidth: 8, // 柱条的宽度，不设时自适应。
104.         barGap: '0', // 不同系列的柱间距离
105.         data: data,
106.         itemStyle: {
107.           color: () => {
108.             return new echarts.graphic.LinearGradient(0, 0, 0, 1, [
109.               { offset: 0, color: colorObj.startColor },
110.               { offset: 1, color: colorObj.endColor }
111.             ]);
112.           },
113.           borderWidth: 0.1,
114.           borderColor:'#B0E1FF',
115.           borderRadius:[0,2,100,0]
116.         },
117.       },
118.       // 数据顶部的样式
119.       {
120.         name: '',
121.         type: 'pictorialBar',
122.         symbol: 'diamond',
123.         symbolSize: [16,9],
124.         symbolOffset:[0,-4],
125.         symbolPosition: 'end',
126.         z: 3,
127.         itemStyle: {
128.           color: () => {
129.             return new echarts.graphic.LinearGradient(0, 0, 0, 1, [
130.               { offset: 0, color: colorObj.topStartColor },
131.               { offset: 1, color: colorObj.topEndColor }
132.             ]);
133.           },
134.           label: {
135.             show: true, // 开启显示
136.             position: 'top', // 在上方显示
137.             textStyle: {
138.               fontSize: '12',
139.               color: '#B0E1FF'
140.             },
141.             offset:[0,-2]
142.           }
143.         },
144.         data: data
145.       },
146.     ]
147.   };
148. }
149. export function getEcharts3DBar1 (obj) {
151.   //obj的格式
152.   /*obj:{
153.     xAxisData: ['2024-07-12','2024-07-13','2024-07-14'],
154.       data:{
155.       data1:{//劳务人员
156.         name:'劳务人员',
157.           offset:[-8,-2],
158.           colorObj: {
159.           topStartColor:'rgba(236, 191, 55)',
160.             topEndColor:'rgba(236, 191, 55)',
161.             startColor:'rgba(71, 57, 30)',
162.             endColor:'rgba(236, 191, 55)',
163.             bottomStartColor:'rgba(236, 191, 55)',
164.             bottomEndColor:'rgba(236, 191, 55)'
165.         },
166.         data:[0,0,0],
167.       },
168.       data2:{//岗位人员
169.         name:'岗位人员',
170.           offset:[8,-2],
171.           colorObj: {
172.           topStartColor:'rgba(21, 205, 217)',
173.             topEndColor:'rgba(10, 72, 140)',
174.             startColor:'rgba(10, 72, 140)',
175.             endColor:'rgba(53, 152, 212)',
176.             bottomStartColor:'rgba(53, 152, 212)',
177.             bottomEndColor:'rgba(53, 152, 212)'
178.         },
179.         data:[0,0,0],
180.       },
181.     }
182.   }*/
183.   let series = [],legendData=[],
184.     circle1=`width: 10px;height: 10px;display: inline-block;border-radius: 50%;margin-right:5px;background:${obj.data.data1.colorObj.startColor}`,
185.     circle2=`width: 10px;height: 10px;display: inline-block;border-radius: 50%;margin-right:5px;background:${obj.data.data2.colorObj.startColor}`
186.   for(let key in obj.data){
187.     legendData.push({
188.       name: obj.data[key].name,
189.       icon: 'roundRect',
190.       itemStyle: {
191.         color: obj.data[key].colorObj.startColor
192.       }
193.     })
194.     series.push( // 数据底部的圆片
195.       {
196.         name: obj.data[key].name,
197.         type: 'pictorialBar',
198.         symbol: 'diamond',
199.         symbolSize: [16,10], // 宽，高
200.         symbolOffset:obj.data[key].offset,// 左 上
201.         symbolPosition: 'start',
202.         z: 0,
203.         itemStyle: {
204.           color: (val) => {
205.             return new echarts.graphic.LinearGradient(0, 0, 0, 1, [
206.               { offset: 0, color: val.data?obj.data[key].colorObj.bottomStartColor:'transparent' },
207.               { offset: 1, color: val.data?obj.data[key].colorObj.bottomEndColor:'transparent' }
208.             ]);
209.           }
210.         },
211.         data: obj.data[key].data
212.       },
213.       // 数据的柱状图
214.       {
215.         name: obj.data[key].name,
216.         type: 'bar',
217.         barWidth: 8, // 柱条的宽度，不设时自适应。
218.         showSymbol: false,
219.         hoverAnimation: false,
220.         symbolOffset:obj.data[key].offset,// 左 上
221.         data: obj.data[key].data,
222.         itemStyle: {
223.           color: (val) => {
224.             return new echarts.graphic.LinearGradient(0, 0, 0, 1, [
225.               { offset: 0, color:val.data?obj.data[key].colorObj.startColor:'transparent' },
226.               { offset: 1, color:val.data?obj.data[key].colorObj.endColor:'transparent' }
227.             ]);
228.           },
229.           // borderRadius:[1,0,0,100],
230.         },
231.       },
232.       {
233.         name: obj.data[key].name,
234.         type: 'bar',
235.         barWidth: 8, // 柱条的宽度，不设时自适应。
236.         symbolOffset:obj.data[key].offset,// 左 上
237.         barGap: '0', // 不同系列的柱间距离
238.         data: obj.data[key].data,
239.         itemStyle: {
240.           color: (val) => {
241.             return new echarts.graphic.LinearGradient(0, 0, 0, 1, [
242.               { offset: 0, color: val.data?obj.data[key].colorObj.startColor:'transparent' },
243.               { offset: 1, color: val.data?obj.data[key].colorObj.endColor:'transparent' }
244.             ]);
245.           },
246.           borderWidth: 0.1,
247.           borderColor:'#B0E1FF',
248.           // barBorderRadius:[0,2,100,0]
249.         },
250.       },
251.       // 数据顶部的样式
252.       {
253.         name: obj.data[key].name,
254.         type: 'pictorialBar',
255.         symbol: 'diamond',
256.         symbolSize: [16,9],
257.         symbolOffset:obj.data[key].offset,// 左 上
258.         symbolPosition: 'end',
259.         z: 3,
260.         itemStyle: {
261.           color: (val) => {
262.             return new echarts.graphic.LinearGradient(0, 0, 0, 1, [
263.               { offset: 0, color: val.data?obj.data[key].colorObj.topStartColor:'transparent' },
264.               { offset: 1, color: val.data?obj.data[key].colorObj.topEndColor:'transparent' }
265.             ]);
266.           },
267.           label: {
268.             show: true, // 开启显示
269.             position: 'top', // 在上方显示
270.             textStyle: {
271.               fontSize: '12',
272.               color: '#B0E1FF'
273.             },
274.             offset:[0,-2]
275.           }
276.         },
277.         data: obj.data[key].data
278.       },
279.     )
280.   }
282.   return {
283.     tooltip: {
284.       trigger: 'axis',
285.       axisPointer: {
286.         type: 'shadow'
287.       },
288.       backgroundColor:'rgba(255,255,255,.1)',
289.       borderColor:'rgba(40, 60, 74)',
290.       textStyle:{
291.         align:'left',
292.         fontSize: 10,//字体大小
293.         color:'#fff',
294.       },
295.       formatter: function (params) {
296.         var str = "<div>"+params[0].axisValue+"</div>";
297.         str += "<br/>" + "<div>" + `<span style='${circle1}' >` + "</span>" + params[0].seriesName + "：" +params[0].value+"</div>";
298.         str += "<br/>" + "<div>"+ `<span style='${circle2}' >` + "</span>" + params[5].seriesName + "：" + params[5].value+"</div>";
299.         return str;
300.       },
301.     },
302.     grid: {
303.       left: "3%", //图表距边框的距离
304.       right: "3%",
305.       top: "15%",
306.       bottom: "5%",
307.       containLabel: true,
308.     },
309.     xAxis: {
310.       data: obj.xAxisData,
311.       axisTick: {
312.         show: false,
313.       },
314.       axisLabel: {
315.         color: '#cae2ee' // 设置Y轴文字颜色为蓝色
316.       }
317.     },
318.     yAxis: {
319.       type: 'value',
320.       splitLine: {
321.         show: 'ture', // 是否显示y轴分割线
322.         interval: 'auto', // 坐标轴分隔线的显示间隔
323.         lineStyle: {
324.           color: ['rgba(232,236,239,.2)'], // 分隔线颜色。
325.           width: 1, // 分隔线线宽
326.           type: 'dashed', // 线的类型
327.           opacity: 1 // 图形透明度。支持从 0 到 1 的数字，为 0 时不绘制该图形。
328.         }
329.       },
330.       axisLabel: {
331.         color: '#cae2ee' // 设置Y轴文字颜色为蓝色
332.       }
333.     },
334.     legend:{
335.       y: 'top',
336.       icon:'rectangle',
337.       itemStyle:{
338.         // color:[colorObj.topStartColor,colorObj1.topStartColor]
339.       },
340.       textStyle:{
341.         color:'#fff'
342.       },
343.       data:legendData,
344.     },
345.     series:series
346.   };
347. }

复制代码

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。

---

欢迎光临 ToB企服应用市场:ToB评测及商务社交产业平台 (https://dis.qidao123.com/)

Powered by Discuz! X3.4