차트 차트는 다양한 의미를 식별하기 위해 다양한 색상에 대한 범례를 설정해야 하는 경우가 많으며, 대시보드의 포인터에는 하나의 값만 있습니다. 공식 웹사이트 구성 항목에서는 이 기능을 제공하지 않습니다. 다른 세그먼트에 대해
axisLine->lineStyle->color;를 통해 설정됩니다. 많은 정보를 검색했지만 각 색상 세그먼트를 식별하는 데 사용되는 범례를 찾을 수 없습니다. 계속해서 범례를 사용할 수 있나요? 범례를 그림에 강제로 추가하려면 어떻게 해야 하나요?
여기에서 전자 차트에 익숙한 아이들은 해결책을 생각해 냈을 것입니다.
그런 다음 "꽃 옮기기 및 아이디어 접목" 트릭을 사용해 보겠습니다.
주요 아이디어: 히스토그램의 전설을 사용하세요. 그런 다음 히스토그램 및 기기 그래프 수준을 설정한 다음 히스토그램을 숨기고 범례의 클릭 이벤트를 비활성화합니다.
참고:
1.series에는 '유형의 구성 항목이 모두 있습니다. 게이지' 및 '바' 구성 항목을 입력하고 '바' 유형 구성 항목은 범례의 색상에만 주의하면 됩니다
2. 히스토그램에 숨겨야 할 항목이 많이 있으며, 축 및 구분선 등을 포함하여 모두 표시되지 않도록 설정해야 합니다.
3. 이상한 경험을 방지하려면 범례의 클릭 이벤트를 비활성화하는 것이 가장 좋습니다.
최종 렌더링은 다음과 같은데, 아주 간단하죠? var option = {
legend: { //配置legend，这里的data，要对应type为‘bar’的series数据项的‘name’名称，作为图例的说明 data:['预热期','导入期','成长期','成熟期','衰退期'],
selectedMode:false, //图例禁止点击 top:20,
itemWidth:23,
itemHeight:6,
textStyle: {
color: '#707070',
fontStyle: 'normal',
fontWeight: 'normal',
fontFamily: 'sans-serif',
fontSize: 11,
},
},
grid: {
z:1, //grid作为柱状图的坐标系，其层级要和仪表图层级不同，同时隐藏 show:false,
left: '-30%',
right: '4%',
bottom: '3%',
containLabel: true,
splitLine:{
show: false //隐藏分割线 },
},
xAxis : [ //这里有很多的show，必须都设置成不显示 {
type : 'category',
data : [],
axisLine: {
show: false },
splitLine:{
show: false },
splitArea: {
interval: 'auto',
show: false }
}
],
yAxis : [ //这里有很多的show，必须都设置成不显示 {
type : 'value',
axisLine: {
show: false },
splitLine:{
show: false },
}
],
toolbox: {
show: false,
},
series : [
{
name:'刻度盘',
type: 'gauge',
startAngle: 180,
endAngle: 0,"center": ["50%", "80%"], //整体的位置设置z: 3,
min: min,
max: max+min,
splitNumber: max,
radius: '110%',
axisLine: { // 坐标轴线lineStyle: { // 属性lineStyle控制线条样式width: 10,
color:optionUsedColors
}
},
axisTick: { // 坐标轴小标记length: 19, // 属性length控制线长splitNumber: 2,
lineStyle: { // 属性lineStyle控制线条样式color: '#cdcdcd'}
},
splitLine: { // 分隔线 length: 20, // 属性length控制线长 lineStyle: { // 属性lineStyle（详见lineStyle）控制线条样式 color: 'auto' }
},
axisLabel: {
textStyle: {
color:'#454A57'}
},
pointer: {
show: true,
length: '70%',
width: 5,
},
itemStyle:{
normal:{
color:'#454A57',
borderWidth:0}
},
title: { //仪表盘标题show: true,
offsetCenter: ['0', '20'],
textStyle: {
color: '#444A56',
fontSize: 12,
fontFamily: 'Microsoft YaHei'}
},
detail: {
textStyle: {
fontSize: 12,
color: '#707070'},
offsetCenter: offsetConfig,
formatter: function(){return '上市时间\n'+time;
}
},
data:[{value: (status/100*max || 0), name: '当前阶段'}] },
{
name: '灰色内圈',
type: 'gauge',
z:2,
radius: '110%',
startAngle: 180,
endAngle: 0,"center": ["50%", "80%"], //整体的位置设置splitNumber: 4,
axisLine: { // 坐标轴线lineStyle: { // 属性lineStyle控制线条样式 color: [
[1, '#F2F4F8']
],
width: 24,
opacity: 1,
}
},
splitLine: { //分隔线样式show: false,
},
axisLabel: { //刻度标签show: false,
},
axisTick: { //刻度样式show: false,
},
detail : {
show:false,
textStyle: { // 其余属性默认使用全局文本样式，详见TEXTSTYLEfontWeight: 'bolder',
fontSize:12}
},
},
{
name:'预热期',
type:'bar',
barWidth: '60%', //不显示，可以随便设置 data:[0],
itemStyle: {
normal: {
color: '#41C468', //这里的图例要注意，颜色设置和仪表盘的颜色对应起来 }
}
},
{
name:'导入期',
type:'bar',
barWidth: '60%',
data:[0],
itemStyle: {
normal: {
color: '#70C1B3',
}
}
},
{
name:'成长期',
type:'bar',
barWidth: '60%',
data:[0],
itemStyle: {
normal: {
color: '#00A1E9',
}
}
},
{
name:'成熟期',
type:'bar',
barWidth: '60%',
data:[0],
itemStyle: {
normal: {
color: '#EE4444',
}
}
},
{
name:'衰退期',
type:'bar',
barWidth: '60%',
data:[0],
itemStyle: {
normal: {
color: '#DCF2C4',
}
}
}
]
}로그인 후 복사
위 내용은 echarts 대시보드 설정 그래픽 예시의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
