代码如下,单个的调第一个方法,多个柱状的调第二个方法,详细情况修改参数大概二次开发即可
- //3d柱状图
- export function getEcharts3DBar (xAxisData:string[]=['name1','name2','name3'], data:number[]=[1,2,3], colorObj:IBaseObject={
- topStartColor:'rgba(236, 191, 55)',
- topEndColor:'rgba(236, 191, 55)',
- startColor:'rgba(71, 57, 30)',
- endColor:'rgba(236, 191, 55)',
- bottomStartColor:'rgba(236, 191, 55)',
- bottomEndColor:'rgba(236, 191, 55)'
- }) {
- return {
- tooltip: {
- trigger: "axis",
- axisPointer: {
- type: 'shadow'
- },
- backgroundColor:'rgba(255,255,255,.1)',
- borderColor:'rgba(40, 60, 74)',
- textStyle:{
- align:'left',
- fontSize: 10,//字体大小
- color:'#fff',
- },
- formatter: function (params) {
- var str = params[0].axisValue + ":" +params[0].value;
- return str;
- },
- },
- grid: {
- left: "3%", //图表距边框的距离
- right: "3%",
- top: "15%",
- bottom: "5%",
- containLabel: true,
- },
- xAxis: {
- data: xAxisData,
- axisTick: {
- show: false,
- },
- axisLabel: {
- color: '#cae2ee' // 设置Y轴文字颜色为蓝色
- }
- },
- yAxis: {
- type: 'value',
- splitLine: {
- show: 'ture', // 是否显示y轴分割线
- interval: 'auto', // 坐标轴分隔线的显示间隔
- lineStyle: {
- color: ['rgba(232,236,239,.2)'], // 分隔线颜色。
- width: 1, // 分隔线线宽
- type: 'dashed', // 线的类型
- opacity: 1 // 图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。
- }
- },
- axisLabel: {
- color: '#cae2ee' // 设置Y轴文字颜色为蓝色
- }
- },
- series: [
- // 数据低下的圆片
- {
- name: '',
- type: 'pictorialBar',
- symbol: 'diamond',
- symbolSize: [16,10], // 宽,高
- symbolOffset:[0,2],// 左 上
- symbolPosition: 'start',
- z: 0,
- itemStyle: {
- color: () => {
- return new echarts.graphic.LinearGradient(0, 0, 0, 1, [
- { offset: 0, color: colorObj.bottomStartColor },
- { offset: 1, color: colorObj.bottomEndColor }
- ]);
- }
- },
- data: data
- },
- // 数据的柱状图
- {
- name: '',
- type: 'bar',
- barWidth: 8, // 柱条的宽度,不设时自适应。
- showSymbol: false,
- hoverAnimation: false,
- data: data,
- itemStyle: {
- // normal: {
- color: () => {
- return new echarts.graphic.LinearGradient(0, 0, 0, 1, [
- { offset: 0, color: colorObj.startColor },
- { offset: 1, color: colorObj.endColor }
- ]);
- },
- borderRadius:[1,0,0,100],
- // }
- },
- },
- {
- name: '',
- type: 'bar',
- barWidth: 8, // 柱条的宽度,不设时自适应。
- barGap: '0', // 不同系列的柱间距离
- data: data,
- itemStyle: {
- color: () => {
- return new echarts.graphic.LinearGradient(0, 0, 0, 1, [
- { offset: 0, color: colorObj.startColor },
- { offset: 1, color: colorObj.endColor }
- ]);
- },
- borderWidth: 0.1,
- borderColor:'#B0E1FF',
- borderRadius:[0,2,100,0]
- },
- },
- // 数据顶部的样式
- {
- name: '',
- type: 'pictorialBar',
- symbol: 'diamond',
- symbolSize: [16,9],
- symbolOffset:[0,-4],
- symbolPosition: 'end',
- z: 3,
- itemStyle: {
- color: () => {
- return new echarts.graphic.LinearGradient(0, 0, 0, 1, [
- { offset: 0, color: colorObj.topStartColor },
- { offset: 1, color: colorObj.topEndColor }
- ]);
- },
- label: {
- show: true, // 开启显示
- position: 'top', // 在上方显示
- textStyle: {
- fontSize: '12',
- color: '#B0E1FF'
- },
- offset:[0,-2]
- }
- },
- data: data
- },
- ]
- };
- }
- export function getEcharts3DBar1 (obj) {
- //obj的格式
- /*obj:{
- xAxisData: ['2024-07-12','2024-07-13','2024-07-14'],
- data:{
- data1:{//劳务人员
- name:'劳务人员',
- offset:[-8,-2],
- colorObj: {
- topStartColor:'rgba(236, 191, 55)',
- topEndColor:'rgba(236, 191, 55)',
- startColor:'rgba(71, 57, 30)',
- endColor:'rgba(236, 191, 55)',
- bottomStartColor:'rgba(236, 191, 55)',
- bottomEndColor:'rgba(236, 191, 55)'
- },
- data:[0,0,0],
- },
- data2:{//岗位人员
- name:'岗位人员',
- offset:[8,-2],
- colorObj: {
- topStartColor:'rgba(21, 205, 217)',
- topEndColor:'rgba(10, 72, 140)',
- startColor:'rgba(10, 72, 140)',
- endColor:'rgba(53, 152, 212)',
- bottomStartColor:'rgba(53, 152, 212)',
- bottomEndColor:'rgba(53, 152, 212)'
- },
- data:[0,0,0],
- },
- }
- }*/
- let series = [],legendData=[],
- circle1=`width: 10px;height: 10px;display: inline-block;border-radius: 50%;margin-right:5px;background:${obj.data.data1.colorObj.startColor}`,
- circle2=`width: 10px;height: 10px;display: inline-block;border-radius: 50%;margin-right:5px;background:${obj.data.data2.colorObj.startColor}`
- for(let key in obj.data){
- legendData.push({
- name: obj.data[key].name,
- icon: 'roundRect',
- itemStyle: {
- color: obj.data[key].colorObj.startColor
- }
- })
- series.push( // 数据底部的圆片
- {
- name: obj.data[key].name,
- type: 'pictorialBar',
- symbol: 'diamond',
- symbolSize: [16,10], // 宽,高
- symbolOffset:obj.data[key].offset,// 左 上
- symbolPosition: 'start',
- z: 0,
- itemStyle: {
- color: (val) => {
- return new echarts.graphic.LinearGradient(0, 0, 0, 1, [
- { offset: 0, color: val.data?obj.data[key].colorObj.bottomStartColor:'transparent' },
- { offset: 1, color: val.data?obj.data[key].colorObj.bottomEndColor:'transparent' }
- ]);
- }
- },
- data: obj.data[key].data
- },
- // 数据的柱状图
- {
- name: obj.data[key].name,
- type: 'bar',
- barWidth: 8, // 柱条的宽度,不设时自适应。
- showSymbol: false,
- hoverAnimation: false,
- symbolOffset:obj.data[key].offset,// 左 上
- data: obj.data[key].data,
- itemStyle: {
- color: (val) => {
- return new echarts.graphic.LinearGradient(0, 0, 0, 1, [
- { offset: 0, color:val.data?obj.data[key].colorObj.startColor:'transparent' },
- { offset: 1, color:val.data?obj.data[key].colorObj.endColor:'transparent' }
- ]);
- },
- // borderRadius:[1,0,0,100],
- },
- },
- {
- name: obj.data[key].name,
- type: 'bar',
- barWidth: 8, // 柱条的宽度,不设时自适应。
- symbolOffset:obj.data[key].offset,// 左 上
- barGap: '0', // 不同系列的柱间距离
- data: obj.data[key].data,
- itemStyle: {
- color: (val) => {
- return new echarts.graphic.LinearGradient(0, 0, 0, 1, [
- { offset: 0, color: val.data?obj.data[key].colorObj.startColor:'transparent' },
- { offset: 1, color: val.data?obj.data[key].colorObj.endColor:'transparent' }
- ]);
- },
- borderWidth: 0.1,
- borderColor:'#B0E1FF',
- // barBorderRadius:[0,2,100,0]
- },
- },
- // 数据顶部的样式
- {
- name: obj.data[key].name,
- type: 'pictorialBar',
- symbol: 'diamond',
- symbolSize: [16,9],
- symbolOffset:obj.data[key].offset,// 左 上
- symbolPosition: 'end',
- z: 3,
- itemStyle: {
- color: (val) => {
- return new echarts.graphic.LinearGradient(0, 0, 0, 1, [
- { offset: 0, color: val.data?obj.data[key].colorObj.topStartColor:'transparent' },
- { offset: 1, color: val.data?obj.data[key].colorObj.topEndColor:'transparent' }
- ]);
- },
- label: {
- show: true, // 开启显示
- position: 'top', // 在上方显示
- textStyle: {
- fontSize: '12',
- color: '#B0E1FF'
- },
- offset:[0,-2]
- }
- },
- data: obj.data[key].data
- },
- )
- }
- return {
- tooltip: {
- trigger: 'axis',
- axisPointer: {
- type: 'shadow'
- },
- backgroundColor:'rgba(255,255,255,.1)',
- borderColor:'rgba(40, 60, 74)',
- textStyle:{
- align:'left',
- fontSize: 10,//字体大小
- color:'#fff',
- },
- formatter: function (params) {
- var str = "<div>"+params[0].axisValue+"</div>";
- str += "<br/>" + "<div>" + `<span style='${circle1}' >` + "</span>" + params[0].seriesName + ":" +params[0].value+"</div>";
- str += "<br/>" + "<div>"+ `<span style='${circle2}' >` + "</span>" + params[5].seriesName + ":" + params[5].value+"</div>";
- return str;
- },
- },
- grid: {
- left: "3%", //图表距边框的距离
- right: "3%",
- top: "15%",
- bottom: "5%",
- containLabel: true,
- },
- xAxis: {
- data: obj.xAxisData,
- axisTick: {
- show: false,
- },
- axisLabel: {
- color: '#cae2ee' // 设置Y轴文字颜色为蓝色
- }
- },
- yAxis: {
- type: 'value',
- splitLine: {
- show: 'ture', // 是否显示y轴分割线
- interval: 'auto', // 坐标轴分隔线的显示间隔
- lineStyle: {
- color: ['rgba(232,236,239,.2)'], // 分隔线颜色。
- width: 1, // 分隔线线宽
- type: 'dashed', // 线的类型
- opacity: 1 // 图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。
- }
- },
- axisLabel: {
- color: '#cae2ee' // 设置Y轴文字颜色为蓝色
- }
- },
- legend:{
- y: 'top',
- icon:'rectangle',
- itemStyle:{
- // color:[colorObj.topStartColor,colorObj1.topStartColor]
- },
- textStyle:{
- color:'#fff'
- },
- data:legendData,
- },
- series:series
- };
- }
复制代码
免责声明:如果侵犯了您的权益,请联系站长,我们会及时删除侵权内容,谢谢合作!更多信息从访问主页:qidao123.com:ToB企服之家,中国第一个企服评测及商务社交产业平台。 |