react.js javascript 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 = `

setParameters.series[0].data[0].value.forEach(

(item: any, index: number) => {

str += `

}

);

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];

}

好文链接

 您阅读本篇文章共花了：