react ts 封装3D柱状图，支持渐变

留档，以防忘记

bar3D.tsx

import React, { useEffect, useRef, useState } from 'react';
import * as echarts from 'echarts';
import 'echarts/lib/chart/bar';
import 'echarts/lib/chart/pictorialBar';
import 'echarts/lib/component/grid';
import 'echarts/lib/component/tooltip';
import 'echarts/lib/component/title';
import 'echarts/lib/component/legend';interface IProps {name: string;tooltipUnit?: string;xdata: Array<string>;ydata: Array<number>;xLabelRotate?: number;barWidth?: number;barColor?: {left: {top: string;bottom: string;},right: {top: string;bottom: string;}}barCovers?: {left: string;right: string;}labelShow?: booleanlabelColor?: stringlabelFont?: numberoffsetTop?: number | string
}/**** 3D柱状图，支持柱子上下渐变** @param name string 图表名称* @param tooltipUnit string tooips 中显示的单位* @param xdata string[] x轴数据* @param ydata number[] y轴数据* @param xLabelRotate  number x轴标签旋转角度* @param barWidth number 柱状图宽度* @param barColor object 柱状图颜色* @param barCovers object 柱状图顶部和底部盖子颜色* @param labelShow boolean 是否显示柱状图上方文字* @param labelColor string 柱状图上方文字颜色* @param labelFont number 柱状图上方文字大小* @param offsetTop number | string 柱状图上方文字偏移量** @returns*/const Bar3D = ({name = '安全监管',tooltipUnit = '%',xdata = ['bar1', 'bar2', 'bar3', 'bar4', 'bar5'],ydata = [18, 9, 15, 4],xLabelRotate = 0,barWidth = 25,barColor = {left: {top: '#37F1FD', // 柱子左侧顶部颜色bottom: '#12276F' // 柱子左侧底部颜色},right: {top: '#179DD1', // 柱子右侧底部颜色bottom: '#08154D'// 柱子右侧底部颜色}},barCovers = {left: '#34DFF1', // 柱子顶部和底部左侧盖子颜色right: '#1B5590'// 柱子顶部和底部右侧盖子颜色},labelShow = true,labelColor = '#fff',labelFont = 10,offsetTop = '-5'}: IProps) => {const echartDomRef = useRef<any>();useEffect(() => {setEchart();}, []);const setEchart = () => {const myChart = echarts.init(echartDomRef.current);const topArr: any = []; // 顶部棱盖const bottomArr: any = []; // 底部棱盖const leftArr: any = []; // 左侧柱子const rightArr: any = []; // 右侧柱子ydata.map((item: number, index: number) => {topArr.push({value: item,symbol: 'diamond',symbolOffset: [0, '-50%'],symbolPosition: 'end', // 图形边缘与柱子结束的地方内切symbolSize: [barWidth, barWidth * 0.4], // 根据柱子大小来做调整itemStyle: {normal: {color: {x: 1,y: 0,x2: 0,y2: 0,type: 'linear',global: false,colorStops: [{ offset: 0, color: barCovers.left },{ offset: 1, color: barCovers.right }]}}}});bottomArr.push({value: item,symbol: 'triangle',symbolOffset: [0, barWidth * 0.25],symbolSize: [-barWidth, barWidth * 0.25],symbolRotate: 180,itemStyle: {color: {x: 0,y: 0,x2: 1,y2: 0,type: 'linear',global: false,colorStops: [{ offset: 0, color: barColor.left.bottom },{ offset: 0.5, color: barColor.left.bottom },{ offset: 0.5, color: barColor.right.bottom },{ offset: 1, color: barColor.right.bottom }]}}});leftArr.push({value: item,itemStyle: {color: {x: 0,y: 0,x2: 0,y2: 1,type: 'linear',global: false,colorStops: [{ offset: 0, color: barColor.left.top },{ offset: 1, color: barColor.left.bottom }]}}});rightArr.push({value: item,itemStyle: {color: {x: 0,y: 0,x2: 0,y2: 1,type: 'linear',global: false,colorStops: [{ offset: 0, color: barColor.right.top },{ offset: 1, color: barColor.right.bottom }]}}});});const option = {grid: {left: 15,right: 15,bottom: 10,top: 30,containLabel: true},tooltip: {trigger: 'axis',confine: true,formatter: function (param: any) {let str = '';param.map((el: any, index: number) => {if (el.componentSubType === 'bar') {str = el.seriesName + '<br>' + el.marker + el.name + '：' + el.data.value + '' + tooltipUnit;}});return str;}},xAxis: [{type: 'category',data: xdata,axisTick: {show: false},axisLine: {show: false},splitLine: {show: false},axisLabel: {show: true,color: '#76A5D1',fontSize: 10,fontWeight: 300,rotate: xLabelRotate}}],yAxis: [{type: 'value',axisTick: {show: false},axisLine: {show: false},splitLine: {show: true,lineStyle: {color: '#082745'}},axisLabel: {show: true,color: '#76A5D1',fontSize: 10,fontWeight: 300}}],series: [{type: 'pictorialBar',name: '顶部棱盖',z: 10,data: topArr},{type: 'bar',name: name,barGap: '-50%',// symbol: 'image://' + params.picture, // 图片自己切或者让UI设计切喔symbolOffset: [0, 0],barWidth: barWidth / 2,z: 2,label: {show: labelShow,color: labelColor,fontSize: labelFont,position: 'top',offset: [barWidth / 4, Number(offsetTop)]},data: leftArr,},{type: 'bar',name: name,barGap: '-5%',// symbol: 'image://' + params.picture, // 图片自己切或者让UI设计切喔symbolOffset: [0, 0],barWidth: barWidth / 2,z: 3,data: rightArr},{type: 'pictorialBar',name: '底部棱盖',barGap: '-100%',z: 6,data: bottomArr}]};myChart.setOption(option);};return <div className='w-full h-full' ref={echartDomRef}></div>;
};export default Bar3D;

使用

<Bar3D name='近半年系统攻击统计' xdata={['自然安全', '事故安全', '公共卫生', '社会安全', '其他']} ydata={[100, 200, 300, 400, 900]} barWidth={15} />

效果