ECharts人才九宫格自定义
Posted Jsen_Wang
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了ECharts人才九宫格自定义相关的知识，希望对你有一定的参考价值。
需求：
实现代码：
标签：
<div id="quadrant" style="width:250px; height:250px;background-color:grey;"></div>
初始化方法：
/*九宫格分布*/
setupQuadrant()
let quadrantDom = document.getElementById('quadrant')
let quadrantChart = echarts.init(quadrantDom)
const fgX = 58;
const fgY = 160
const spW = 67
const spH = 40
let quadrantOption =
xAxis:
show: true,
position: 'bottom',
type: 'category',
name: '领\\n导\\n力',
nameTextStyle:
align: 'center',
color: '#000',
,
axisLine:
lineStyle:
color: '#000'
,
,
axisLabel:
color: '#000'
,
axisTick:
color:'#000',
lineStyle:
color: '#000'
,
interval: 3,
// data: ['0-3.25\\nC-低','3.25(含)-4.25\\nB-中','4.25(含)及以上\\nA-高']
data: ['C-低','B-中','A-高'],
boundaryGap: ['20%', '20%']
,
yAxis:
show: true,
position: 'start',
type: 'category',
name: '绩效',
axisLine:
lineStyle:
color: '#000'
,
,
nameTextStyle:
color: '#000',
,
axisLabel:
color: '#000'
,
axisTick:
color:'#000',
lineStyle:
color: '#000'
,
// offset: -20,
data: ['C\\nD','B','S\\nA']
,
graphic: [
type: 'group',
children: [
id: '1',
type: 'group',
x: fgX,
y: fgY,
children: [
id: '1.1',
type: 'rect',
left: 'center', // 相对父元素居中
top: 'middle', // 相对父元素居中
shape:
width: spW,
height: spH
,
style:
fill: '#D9410D',
stroke: '#999',
lineWidth: 1,
,
id: '1.2',
type: 'text',
left: 'center',
top: 'middle',
z:2,
style:
fill: '#000',
text: [
'1','低'
].join('\\n'),
font: '10px Microsoft YaHei'
]
,
id: '2',
type: 'group',
x: fgX+spW,
y: fgY,
children: [
id: '2.1',
type: 'rect',
left: 'center', // 相对父元素居中
top: 'middle', // 相对父元素居中
shape:
width: spW,
height: spH
,
style:
fill: '#fff',
stroke: '#999',
lineWidth: 1,
// shadowBlur: 8,
// shadowOffsetX: 3,
// shadowOffsetY: 3,
// shadowColor: 'rgba(0,0,0,0.3)'
,
id: '2.2',
type: 'text',
left: 'center',
top: 'middle',
z:2,
style:
fill: '#000',
text: [
'2','中'
].join('\\n'),
font: '10px Microsoft YaHei'
]
,
id: '3',
type: 'group',
x: fgX+2*spW,
y: fgY,
children: [
id: '3.1',
type: 'rect',
left: 'center', // 相对父元素居中
top: 'middle', // 相对父元素居中
shape:
width: spW,
height: spH
,
style:
fill: '#fff',
stroke: '#999',
lineWidth: 1,
// shadowBlur: 8,
// shadowOffsetX: 3,
// shadowOffsetY: 3,
// shadowColor: 'rgba(0,0,0,0.3)'
,
id: '3.2',
type: 'text',
left: 'center',
top: 'middle',
z:2,
style:
fill: '#000',
text: [
'3','高'
].join('\\n'),
font: '10px Microsoft YaHei'
]
,
id: '4',
type: 'group',
x: fgX,
y: fgY-spH,
children: [
id: '4.1',
type: 'rect',
left: 'center', // 相对父元素居中
top: 'middle', // 相对父元素居中
shape:
width: spW,
height: spH
,
style:
fill: '#fff',
stroke: '#999',
lineWidth: 1,
,
id: '4.2',
type: 'text',
left: 'center',
top: 'middle',
z:2,
style:
fill: '#000',
text: [
'4','低'
].join('\\n'),
font: '10px Microsoft YaHei'
]
,
id: '5',
type: 'group',
x: fgX+spW,
y: fgY-spH,
children: [
id: '5.1',
type: 'rect',
left: 'center', // 相对父元素居中
top: 'middle', // 相对父元素居中
shape:
width: spW,
height: spH
,
style:
fill: '#D4DFED',
stroke: '#999',
lineWidth: 1,
,
id: '5.2',
type: 'text',
left: 'center',
top: 'middle',
z:2,
style:
fill: '#000',
text: [
'5','中'
].join('\\n'),
font: '10px Microsoft YaHei'
]
,
id: '6',
type: 'group',
x: fgX+2*spW,
y: fgY-spH,
children: [
id: '6.1',
type: 'rect',
left: 'center', // 相对父元素居中
top: 'middle', // 相对父元素居中
shape:
width: spW,
height: spH
,
style:
fill: '#81C93F',
stroke: '#999',
lineWidth: 1,
,
id: '6.2',
type: 'text',
left: 'center',
top: 'middle',
z:2,
style:
fill: '#000',
text: [
'6','高'
].join('\\n'),
font: '10px Microsoft YaHei'
]
,
id: '7',
type: 'group',
x: fgX,
y: fgY-2*spH,
children: [
id: '7.1',
type: 'rect',
left: 'center', // 相对父元素居中
top: 'middle', // 相对父元素居中
shape:
width: spW,
height: spH
,
style:
fill: '#fff',
stroke: '#999',
lineWidth: 1,
,
id: '7.2',
type: 'text',
left: 'center',
top: 'middle',
z:2,
style:
fill: '#000',
text: [
'7','低'
].join('\\n'),
font: '10px Microsoft YaHei'
]
,
id: '8',
type: 'group',
x: fgX+spW,
y: fgY-2*spH,
children: [
id: '8.1',
type: 'rect',
left: 'center', // 相对父元素居中
top: 'middle', // 相对父元素居中
shape:
width: spW,
height: spH
,
style:
fill: '#81C93F',
stroke: '#999',
lineWidth: 1,
,
id: '8.2',
type: 'text',
left: 'center',
top: 'middle',
z:2,
style:
fill: '#000',
text: [
'8','中'
].join('\\n'),
font: '10px Microsoft YaHei'
]
,
id: '9',
type: 'group',
x: fgX+2*spW,
y: fgY-2*spH,
children: [
id: '9.1',
type: 'rect',
left: 'center', // 相对父元素居中
top: 'middle', // 相对父元素居中
shape:
width: spW,
height: spH
,
style:
fill: '#81C93F',
stroke: '#999',
lineWidth: 1,
,
id: '9.2',
type: 'text',
left: 'center',
top: 'middle',
z:2,
style:
fill: '#000',
text: [
'9','低'
].join('\\n'),
font: '10px Microsoft YaHei',
]
,
]
]
quadrantChart.setOption(quadrantOption)
实现效果：
以上是关于ECharts人才九宫格自定义的主要内容，如果未能解决你的问题，请参考以下文章