antd table 无数据
<Table
className="xy-table"
dataSource={dataSource.lineList || []}
locale={{ emptyText: "暂无数据" }}
columns={columns}
pagination={false}
size="small"
loading={loading}
/>
echart 柱状图底部及顶部 椭圆设置
// 基于准备好的dom，初始化echarts实例
const myChart = echarts.init(document.getElementById('histogram'));
// 绘制图表
myChart.setOption({
tooltip: {},
xAxis: {
data: ['111', '111', '111'],
offset: 3,
axisLine: {
// x轴线的颜色以及宽度
show: true,
onZero: false,
lineStyle: {
color: '#0E3B63',
width: 3,
type: 'solid',
offset: 5,
},
background: 'linear-gradient(180deg, #082151 0%, #0E3B63 100%)',
},
axisTick: {
show: true,
},
axisLabel: {
// x轴文字的配置
show: true,
textStyle: {
color: '#fff',
fontSize: '12px',
fontFamily: 'HarmonyOS_Sans_SC',
},
},
splitLine: {
// 分割线配置
show: false,
lineStyle: {
color: '#fff',
},
},
},
yAxis: {
splitLine: {
show: false,
lineStyle: {
type: 'dashed',
},
},
interval: 5000, // 每刻度差额
axisLabel: {
// 自定义y轴展示的刻度内容（默认是数值）
color: '#89B3FB',
fontSize: 12,
// formatter: function (value) {
// }
},
axisLine: {
// y轴线的颜色以及宽度
show: true,
lineStyle: {
color: '#89B3FB',
width: 1,
type: 'solid',
},
},
axisTick: {
show: true,
},
},
series: [
// 中间的圆柱
{
name: '到期合同',
type: 'bar',
barWidth: 20,
data: [],
},
],
});
await HistogramData().then(res => {
if(Array.isArray(res)) {
const data = res;
// 绘制图表
myChart.setOption({
tooltip: {},
xAxis: {
data: ['前180天已到期', '前90天已到期', '前30天已到期'],
offset: 3,
axisLine: {
// x轴线的颜色以及宽度
show: true,
onZero: false,
lineStyle: {
color: '#0E3B63',
width: 3,
type: 'solid',
offset: 5,
},
background: 'linear-gradient(180deg, #082151 0%, #0E3B63 100%)',
},
axisTick: {
show: true,
},
axisLabel: {
// x轴文字的配置
show: true,
textStyle: {
color: '#fff',
fontSize: '12px',
fontFamily: 'HarmonyOS_Sans_SC',
},
},
splitLine: {
// 分割线配置
show: false,
lineStyle: {
color: '#fff',
},
},
},
yAxis: {
splitLine: {
show: false,
lineStyle: {
type: 'dashed',
},
},
interval: 5000, // 每刻度差额
axisLabel: {
// 自定义y轴展示的刻度内容（默认是数值）
color: '#89B3FB',
fontSize: 12,
// formatter: function (value) {
// }
},
axisLine: {
// y轴线的颜色以及宽度
show: true,
lineStyle: {
color: '#89B3FB',
width: 1,
type: 'solid',
},
},
axisTick: {
show: true,
},
},
series: [
// 中间的圆柱
{
name: '到期合同',
type: 'bar',
barWidth: 20,
data,
itemStyle: {
normal: {
borderWidth: 1,
barBorderRadius: [10, 10, 10, 10],
shadowBlur: 5,
color: (params) => {
const color1 = new echarts.graphic.LinearGradient(
0,
1,
0,
0,
[
{
offset: 0,
color: '#082151', // 0% 处的颜色
},
{
offset: 1,
color: '#1BBAFF', // 100% 处的颜色
},
],
false
);
const color2 = new echarts.graphic.LinearGradient(
0,
1,
0,
0,
[
{
offset: 0,
color: '#082151', // 0% 处的颜色
},
{
offset: 1,
color: '#1BBAFF', // 100% 处的颜色
},
],
false
);
const color3 = new echarts.graphic.LinearGradient(
0,
1,
0,
0,
[
{
offset: 0,
color: '#082151', // 0% 处的颜色
},
{
offset: 1,
color: '#1BBAFF', // 100% 处的颜色
},
],
false
);
const color4 = new echarts.graphic.LinearGradient(
0,
1,
0,
0,
[
{
offset: 0,
color: '#082151', // 0% 处的颜色
},
{
offset: 1,
color: '#1BBAFF', // 100% 处的颜色
},
],
false
);
const colorList = [color1, color2, color3, color4];
return colorList[params.dataIndex];
},
shadowColor: '#082151',
shadowOffsetX: 0,
shadowOffsetY: -2,
},
},
label: {
show: true, // 开启显示
position: 'top', // 在上方显示
color: '#FFFFFF',
fontSize: '16px',
fontFamily: 'YouSheBiaoTiHei-Regular, YouSheBiaoTiHei',
fontWeight: '400',
verticalAlign: 'bottom',
lineHeight: '40',
},
},
// 顶部圆柱帽子
{
name: 'a',
tooltip: {
show: false,
},
type: 'pictorialBar',
itemStyle: {
normal: {
color: {
type: 'linear',
x: 0,
y: 0,
x2: 1,
y2: 0,
colorStops: [
{
offset: 0,
color: '#00DEFF', // 0% 处的颜色
},
{
offset: 1,
color: '#00DEFF', // 100% 处的颜色
},
],
global: false, // 缺省为 false
},
borderWidth: 1,
borderColor: '#00DEFF',
shadowBlur: 5,
shadowColor: '#1BBAFF',
shadowOffsetX: 0,
shadowOffsetY: 2,
},
},
symbol: 'circle',
symbolSize: ['20', '10'],
symbolPosition: 'end',
data: [data[0] +1, data[1] +1, data[2] +1],
z: 3,
},
// 底座圆柱
{
name: 'b',
tooltip: {
show: false,
},
type: 'pictorialBar',
itemStyle: {
normal: {
color: {
type: 'linear',
x: 0,
y: 0,
x2: 1,
y2: 0,
colorStops: [
{
offset: 0,
color: '#093D8B', // 0% 处的颜色
},
{
offset: 1,
color: '#093D8B', // 100% 处的颜色
},
],
global: false, // 缺省为 false
},
borderWidth: 1,
borderColor: '#18CEE2',
shadowBlur: 5,
shadowColor: '#082151',
shadowOffsetX: 0,
shadowOffsetY: -2,
},
},
symbol: 'circle',
symbolSize: ['20', '10'],
symbolPosition: 'end',
data: [800, 800, 800, 800], // 具体细微差距还是得进行一个自己调整
z: 3,
},
],
});
}
});
echarts 饼状图设置 字体都在图上 角度设置 字体颜色和饼图颜色保持一致
- minAngle: 15, // 最小角度 startAngle: 80, // 起始角度
const chartDom = document.getElementById('circleChart');
const cicleChart = echarts.init(chartDom);
cicleChart.setOption({
tooltip: {
trigger: 'item',
// formatter: '{a} <br/>{b} : {c} ({d}%)'
},
series: [
{
type: 'pie',
radius: ['30%', '60%'],
selectedMode: 'single',
minAngle: 15, // 最小角度
startAngle: 80, // 起始角度
hoverAnimation: false,
color: ['#F4A41A', '#55DCFF'],
label: {
normal: {
formatter: '{a|} {b} \n \n \r {c}万元 \n{hr|}\n \n {d}%',
show: true,
color: 'inherit', // 标签颜色和饼图颜色一致 继承
// position: 'outside',
fontSize: '14px',
fontFamily: 'HarmonyOS_Sans_SC_Bold',
rich: {
hr: {
height: 5,
width: 40,
lineHeight: 5,
marginBottom: 3,
padding: [0, -5],
borderRadius: 5,
// backgroundColor: color[i], // 圆点颜色和饼图块状颜色一致
},
},
},
},
labelLine: {
normal: {
length: 20, // 指示线长度
lineStyle: {
color: "#595959", // 指示线颜色
},
},
},
data: [],
},
],
});
await CircleData().then(res => {
if (res && res.notPayAmount) {
// 完成度
cicleChart.setOption({
series: [
{
data: [
{
value: 2183838238 || 0,
name: '测试测试',
},
{
value: 1384838832 || 0,
name: '测试测试111',
},
],
},
],
});
}
});
