图例
构建思路
-
将图表分为两个部分
-
表头
- 实际为y轴配置
- 由于不单止显示文字，所以使用富文本进行渲染
-
yAxis: [
{
type: 'category',
//label数据数组
data: storePriceChartData?.labelList ?? [],
//不显示刻度线
axisTick: { show: false },
axisLabel: {
color: '#000',
interval: 0,
//label左对齐
align: 'left',
//由于设置了左对齐，会让label和数据错位，所以需要设置margin
margin: 170,
//对label进行重新构建，通过获取rich富文本配置项，渲染不同内容
formatter: (value: any) => {
const index =
storePriceChartData?.labelList?.indexOf(value) + 1;
if (index === 1)
return (
'{firstNumber|' +
`No. ${index}` +
'}' +
'{label|' +
value +
'}'
);
else if (index === 2)
return (
'{secondNumber|' +
`No. ${index}` +
'}' +
'{label|' +
value +
'}'
);
else if (index === 3)
return (
'{thirdNumber|' +
`No. ${index}` +
'}' +
'{label|' +
value +
'}'
);
else
return (
'{number|' + `No. ${index}` + '}' + '{label|' + value + '}'
);
},
//富文本配置
//每个对象为一个配置项，实际为字体样式
rich: {
number: {
fontSize: 10,
width: 38,
height: 18,
verticalAlign: 'middle',
align: 'center',
color: '#2684E5',
borderWidth: 1,
borderColor: '#2684E5',
borderRadius: 2,
},
firstNumber: {
fontSize: 10,
width: 38,
height: 20,
backgroundColor: '#C20004',
borderRadius: 2,
verticalAlign: 'middle',
align: 'center',
color: '#fff',
},
secondNumber: {
fontSize: 10,
width: 38,
height: 20,
backgroundColor: '#FF5938',
borderRadius: 2,
verticalAlign: 'middle',
align: 'center',
color: '#fff',
},
thirdNumber: {
fontSize: 10,
width: 38,
height: 20,
backgroundColor: '#FAC858',
borderRadius: 2,
verticalAlign: 'middle',
align: 'center',
color: 'rgba(68, 52, 18, 0.8)',
},
label: {
fontSize: 14,
padding: [0, 0, 0, 10],
},
},
},
axisLine: {
show: false,
},
inverse: true,
},
],
-
数据块
- 进度条样式，实际上是两个色块，背景色块和实际数据色块的叠加
- 背景色块的数据为最大实际数据的进一位最小值（例：最大值为93249，则色块值为100000）
- 数据label需要自行调整位置，利用offset和labelLayout进行调整
-
series: [
{
name: '数据条',
yAxisIndex: 0,
type: 'bar',
data: storePriceChartData?.dataList,
itemStyle: {
borderRadius: 2,
color: '#2684E5',
},
barWidth: 12,
barGap: 2,
label: {
show: true,
formatter: (value: any) => {
return formatNumber(value.data);
},
offset: [0, -5],
},
labelLayout: {
x: '91%',
},
},
{
name: '背景条',
type: 'bar',
barGap: '-100%', //不同系列的柱间距离，为百分比。
barWidth: 12,
data: storePriceChartData.dataBackgroundList,
color: 'rgba(38, 48, 68, 0.1)',
itemStyle: {
borderRadius: 2,
},
},
],
完整配置
{
tooltip: {
show: false,
trigger: 'axis',
axisPointer: {
type: 'shadow',
},
},
grid: {
left: -145,
right: '10%',
bottom: '3%',
top: 20,
containLabel: true,
},
dataZoom: [
{
type: 'slider',
show: false,
yAxisIndex: [0], //设置组件控制的y轴
start: 0,
end: 45,
zoomLock: true,
},
{
type: 'inside',
yAxisIndex: 0,
zoomOnMouseWheel: false, // 滚轮是否触发缩放
moveOnMouseMove: false, // 鼠标滚轮触发滚动
moveOnMouseWheel: true,
},
],
xAxis: {
show: false,
},
yAxis: [
{
type: 'category',
data: storePriceChartData?.labelList ?? [],
axisTick: { show: false }, //不显示刻度线
axisLabel: {
color: '#000',
interval: 0,
align: 'left',
margin: 170,
formatter: (value: any) => {
const index =
storePriceChartData?.labelList?.indexOf(value) + 1;
if (index === 1)
return (
'{firstNumber|' +
`No. ${index}` +
'}' +
'{label|' +
value +
'}'
);
else if (index === 2)
return (
'{secondNumber|' +
`No. ${index}` +
'}' +
'{label|' +
value +
'}'
);
else if (index === 3)
return (
'{thirdNumber|' +
`No. ${index}` +
'}' +
'{label|' +
value +
'}'
);
else
return (
'{number|' + `No. ${index}` + '}' + '{label|' + value + '}'
);
},
rich: {
number: {
fontSize: 10,
width: 38,
height: 18,
verticalAlign: 'middle',
align: 'center',
color: '#2684E5',
borderWidth: 1,
borderColor: '#2684E5',
borderRadius: 2,
},
firstNumber: {
fontSize: 10,
width: 38,
height: 20,
backgroundColor: '#C20004',
borderRadius: 2,
verticalAlign: 'middle',
align: 'center',
color: '#fff',
},
secondNumber: {
fontSize: 10,
width: 38,
height: 20,
backgroundColor: '#FF5938',
borderRadius: 2,
verticalAlign: 'middle',
align: 'center',
color: '#fff',
},
thirdNumber: {
fontSize: 10,
width: 38,
height: 20,
backgroundColor: '#FAC858',
borderRadius: 2,
verticalAlign: 'middle',
align: 'center',
color: 'rgba(68, 52, 18, 0.8)',
},
label: {
fontSize: 14,
padding: [0, 0, 0, 10],
},
},
},
axisLine: {
show: false,
},
inverse: true,
},
],
series: [
{
name: '条',
yAxisIndex: 0,
type: 'bar',
data: storePriceChartData?.dataList,
itemStyle: {
borderRadius: 2,
color: '#2684E5',
},
barWidth: 12,
barGap: 2,
label: {
show: true,
formatter: (value: any) => {
return formatNumber(value.data);
},
offset: [0, -5],
},
labelLayout: {
x: '91%',
},
},
{
name: '进度条背景',
type: 'bar',
barGap: '-100%', //不同系列的柱间距离，为百分比。
barWidth: 12,
data: storePriceChartData.dataBackgroundList,
color: 'rgba(38, 48, 68, 0.1)',
itemStyle: {
borderRadius: 2,
},
},
],
}
