react-封装Echarts基础配置项
基于上一篇文章做出的补充（react-封装Echarts组件-CSDN博客）
针对Echarts配置项做的封装处理，项目中多次用到一个类型的图表时可封装节省多余代码，可以根据自己项目需求做出修改
/**
*
* @param type echart的类型
* @returns map 地图配置
* @returns cake 饼图配置
* @returns radarChart 雷达图配置
* @returns columnChart 柱状图
* @returns lineChart 折线图
* @returns boxDiagram 箱体图
* @returns stackingDiagram 柱状堆叠图
* @returns heatMap 热力图
* @returns dashboard 仪表盘
* @returns sankey 桑基图
* @returns optionSunburst 旭日图
* @returns steppedPolyline 阶梯折线图
* @returns circle 圆环图
*/
export function echartConfig(type: string, setParameters?: object | any) {
const color = [
'#729FF9',
'#72DDB2',
'#7484A1',
'#F6C638',
'#EA7D64',
'#8C43FF',
'#693EFF',
'#1533EE',
'#B68EFF',
'#8781FF',
'#1B6BED',
'#D7D0FF',
'#9FBFFF',
'#219FED',
'99cf15',
'#ce5c1c',
'#a1fde7',
'#a1bbfd',
'#cba1fd',
'#a1b8fd',
'#df7274',
'#e76fa5',
'#A020F0',
'#872657',
'#FF7F50',
'#FF00FF',
'#BDFCC9',
'#1B6BED',
'#9FBFFF',
'#219FED'
];
const nameTextStyle = {
fontSize: '14px',
fontFamily: 'PingFangSC-Regular, PingFang SC',
fontWeight: 400,
color: '#646566'
// padding: [0,0,0,30]
};
const dataZoom = {
zoomOnMouseWheel: false,
height: 16,
bottom: 0,
zoomLock: true, // 锁定窗口的大小
brushSelect: false, //是否开启刷选功能,开启之后可以进行拉选显示的范围
start: 0,
end: 80,
showDetail: false
};
const config: any = {
// 饼图配置
cake: {
color,
nameTextStyle,
tooltip: {
trigger: 'item',
formatter(param: any) {
return param.name + ': ' + param.percent + '%';
}
},
grid: {
top: '10%'
},
legend: {
left: 'center',
top: 0,
itemHeight: 12,
itemWidth: 12,
pageIconColor: '#ffffff', //图例分页左右箭头图标颜色
pageTextStyle: {
color: '#ffffff' //图例分页页码的颜色设置
}
},
label: {
show: true,
formatter(param: any) {
return param.name + ': ' + param.percent + '%';
}
},
series: [
{
type: 'pie',
...setParameters
}
],
...setParameters
},
// 雷达图配置
radarChart: {
color,
nameTextStyle,
legend: {},
grid: {
containLabel: true
},
series: [],
...setParameters,
tooltip: {
confine: true,
formatter: function () {
let str = `老化模型影响因子TOP5
${setParameters.series[0].data[0].name}/${setParameters.series[0].data[1].name}`;
setParameters.series[0].data[0].value.forEach(
(item: any, index: number) => {
str += `
${setParameters.radar.indicator[index].name}
${item}/${setParameters.series[0].data[1].value[index]}
`;
}
);
return str;
}
}
},
// 柱状图基础配置
columnChart: {
color,
nameTextStyle: {
...nameTextStyle,
padding: [0, 0, 0, 40]
},
tooltip: {
trigger: 'axis',
axisPointer: {
// 坐标轴指示器，坐标轴触发有效
type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
}
},
legend: {},
grid: {
top: '15%',
left: '2.5%',
bottom: '7%',
containLabel: true
},
xAxis: [
{
type: 'category',
data: [],
...setParameters?.xaxis,
nameLocation: 'middle',
nameGap: 30
}
],
yAxis: {
type: 'value',
...setParameters?.yaxis
},
series: [],
...setParameters
},
// 折线图基础配置
lineChart: {
color,
nameTextStyle,
dataZoom: {
...dataZoom,
start: 30,
end: 100
},
tooltip: {
trigger: 'axis',
axisPointer: {
// 坐标轴指示器，坐标轴触发有效
type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
}
},
grid: {
left: '8%',
right: '20%',
bottom: '7%',
containLabel: true
},
legend: {},
xAxis: [
{
type: 'category',
data: [],
...setParameters?.xaxis,
nameLocation: 'middle',
nameGap: 30
}
],
yAxis: setParameters?.yaxis,
series: [],
...setParameters
},
// 箱体图
boxDiagram: {
color: ['#729FF9', '#D42F15'],
nameTextStyle,
dataZoom,
tooltip: {
trigger: 'item',
axisPointer: {
type: 'shadow'
}
},
grid: {
containLabel: true,
top: '10%',
left: '2%',
right: '4%',
bottom: 44
},
xAxis: {
type: 'category',
data: [],
nameLocation: 'middle',
nameGap: '30',
axisTick: {
show: false
},
axisLine: {
// lineStyle: {
// color: '#333333'
// }
},
splitLine: {
show: false
},
...setParameters?.xaxis,
nameTextStyle
},
yAxis: {
type: 'value',
// axisLabel: {
// textStyle: {
// fontSize: '14'
// }
// },
axisTick: {
show: false
},
axisLine: {
// lineStyle: {
// color: '#333333'
// }
},
splitLine: {
// lineStyle: {
// color: '#D1D1D1'
// }
},
...setParameters?.yaxis,
nameTextStyle
},
series: [],
...setParameters
},
//堆叠图
stackingDiagram: {
color,
dataZoom: {
...dataZoom
},
nameTextStyle: {
...nameTextStyle,
padding: [0, 0, 0, 40]
},
tooltip: {
trigger: 'axis',
formatter: function (params: any) {
let str = params[0].name + '
';
for (let i = 0; i < params.length; i++) {
str += params[i].marker;
str += `${params[i].seriesName}`;
str += ` ${
params[i].data === 0 ? 0 : params[i].data || '-'
}%
`;
}
return str;
},
axisPointer: {
// 坐标轴指示器，坐标轴触发有效
type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
}
},
legend: {
itemWidth: 16,
itemHeight: 16
},
grid: {
containLabel: true,
left: '1%',
right: '2%',
bottom: 44
},
xAxis: {
type: 'category',
data: [],
...setParameters?.xaxis,
nameLocation: 'middle',
nameGap: 30
},
yAxis: {
name: '占比(%)',
type: 'value',
...setParameters?.yaxis
},
series: [],
...setParameters
},
//热力图
heatMap: {
tooltip: {
position: function (
point: any[],
params: any,
dom: any,
rect: any,
size: any
) {
return [point[1], 0];
},
formatter: (param: any) => {
let str =
param?.seriesName +
'
' +
param?.marker +
param?.name +
'
' +
'平均SOH：' +
param.value[3] +
'%' +
'
' +
'电池数：' +
param.value[2] +
'块';
if (param.marker.includes('rgba(0,0,0,0)')) {
str = '';
}
return str;
},
extraCssText: 'white-space: normal; word-break: break-all;z-index:9999' // 文本太长自动换行
},
animation: false,
grid: {
containLabel: true,
// height: '50%',
top: '20%',
left: '2%',
right: '2%',
bottom: 24
},
xAxis: {
type: 'category',
splitArea: {
show: true
},
axisTick: {
lineStyle: {
color: '#c4c4c4'
}
},
nameTextStyle,
...setParameters?.xaxis,
nameLocation: 'middle',
nameGap: 30
},
yAxis: {
type: 'category',
splitArea: {
show: true
},
axisTick: {
show: false
},
...setParameters?.yaxis
},
series: [
{
name: '',
type: 'heatmap',
data: [],
label: {
show: false
},
emphasis: {
itemStyle: {
shadowBlur: 10,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
],
...setParameters,
visualMap: {
// type: 'piecewise',
calculable: true,
orient: 'horizontal',
type: 'piecewise',
left: 'center',
top: '0',
color: ['#0274F8', '#E8EDFA'],
...setParameters?.visualMap
}
},
// 仪表盘
dashboard: {
backgroundColor: '#fff',
title: {
left: 'center',
bottom: '22%',
text: setParameters?.text,
textStyle: {
fontSize: 8,
color: '#969799'
}
},
series: [
{
type: 'gauge',
radius: '50',
splitNumber: 5,
max: setParameters?.max,
z: 1,
startAngle: 220,
endAngle: -40,
splitLine: {
show: false
},
detail: {
show: true,
offsetCenter: ['0%', '32%'],
fontSize: 14,
formatter: function (value: any) {
return value === 0 ? 0 : value || '-';
}
},
// 仪表盘的线，颜色值为一个数组
axisLine: {
show: true,
// 两端是否设置为圆角；在5.0之后的版本有效
roundCap: false,
lineStyle: {
width: 10,
shadowColor: '#F3F6FE', //默认透明
shadowOffsetX: 0,
shadowOffsetY: 0,
shadowBlur: 20,
opacity: 1,
color: [
[
setParameters?.data / setParameters?.max,
setParameters?.color
],
[1, '#F3F6FE']
]
}
},
// 仪表盘刻度标签
axisLabel: {
distance: -36,
textStyle: {
color: '#969799',
fontSize: '10'
}
},
title: {
//标题
show: true,
offsetCenter: [0, '100%'], // x, y，单位px
textStyle: {
width: 85,
fontSize: 10,
height: 19,
backgroundColor: {
image:
'https://hd-webapp.e-energee.com/prod/nuwa/static/621a50d4-c1e9-4b5a-a4b6-9dbb9986c7d7.png'
},
color: '#fff'
}
},
pointer: {
show: true,
length: '70%',
radius: '10%',
width: 3.8 //指针粗细
},
itemStyle: {
normal: {
color: '#B3B3B3'
}
},
// 刻度
axisTick: {
show: false
},
data: [
{
name: setParameters?.title,
value: setParameters?.data
}
]
},
// 圆环
{
name: '小圆形',
type: 'pie',
hoverAnimation: false,
legendHoverLink: false,
radius: ['7px', '3px'],
z: 5,
labelLine: {
normal: {
show: false
}
},
data: [
{
value: 0
},
{
value: 10,
itemStyle: {
normal: {
color: '#323233'
}
}
}
]
}
]
},
sankey: {
color,
tooltip: {
trigger: 'item',
triggerOn: 'mousemove',
formatter(param: any) {
return `里程范围：${
param.name.split(':')[0] +
(param.name.split(':')[1].split('>')[1]
? ' - ' + param.name.split(':')[1].split('>')[1]
: '')
}
SOH：${param.name.split(':')[1].split('>')[0]}
电池数量：${
param.value
}块`;
}
},
label: {
show: true,
formatter(param: any) {
return param.name.split(':')[0];
}
},
series: {
left: '0',
position: 'bottom',
top: '8%',
nodeGap: 40,
containLabel: true,
fontSize: 8,
...setParameters?.series
}
},
steppedPolyline: {
tooltip: {
trigger: 'axis'
},
legend: {
data: ['Step Start', 'Step Middle', 'Step End']
},
grid: {
left: '10%',
right: '10%',
bottom: '3%',
containLabel: true
},
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [
{
name: 'Step Start',
type: 'line',
step: 'start',
data: [120, 132, 101, 134, 90, 230, 210]
},
{
name: 'Step Middle',
type: 'line',
step: 'middle',
data: [220, 282, 201, 234, 290, 430, 410]
},
{
name: 'Step End',
type: 'line',
step: 'end',
data: [450, 432, 401, 454, 590, 530, 510]
}
]
},
optionSunburst: {
// title: {
// text: '旭日图',
// subtext: 'Source: https://worldcoffeeresearch.org/work/sensory-lexicon/',
// textStyle: {
// fontSize: 14,
// align: 'center'
// },
// subtextStyle: {
// align: 'center'
// }
// },
grid: {
top: 0
},
tooltip: {
trigger: 'item',
triggerOn: 'mousemove'
},
color: ['#A8CDFC', '#7BB9F7', '#4BA0F7', '#0274F8'],
series: {}
},
//圆环图
circle: {
title: {
text: '',
textStyle: {
color: '#fff',
fontSize: 22,
fontWeight: '800'
}
},
tooltip: {
trigger: 'item',
position: [40, 80], //提示框位置 左/上
formatter(params: any) {
console.log(params, setParameters);
let str = '';
setParameters?.data?.batteryPackNum === 0
? (str +=
'')
: (str += str +=
'');
str += `电池数: ${setParameters.data?.batteryPackNum}块`;
return str;
}
},
series: [
{
name: '数据',
type: 'pie',
// startAngle: 90,
radius: ['100%', '85%'],
// center:['25%','50%'],
legendHoverLink: true,
hoverAnimation: false,
avoidLabelOverlap: true,
labelLine: {
normal: {
show: false
}
},
detail: {
offsetCenter: ['0%', '40%']
},
data: [
{
value: setParameters?.data?.batteryPackProportion || 0,
name: (setParameters?.data?.batteryPackProportion || 0) + '%', //其实就是data[1].value,
label: {
position: 'center',
color: '#323233',
fontSize: 22
},
itemStyle: {
normal: {
color: '#729FF9'
}
}
},
{
value: 100 - setParameters?.data?.batteryPackProportion,
//name: '直接访问第二个颜色
itemStyle: {
normal: {
color: '#F3F6FE'
}
}
}
]
}
]
}
};
return config[type];
}