echart를 사용하여 노드에 동적 데이터를 표시하고 프롬프트 텍스트를 추가하는 방법

이번에는 echart를 사용하여 노드에 동적 데이터를 표시하고 프롬프트 텍스트를 추가하는 방법을 보여 드리겠습니다. echart를 사용하여 노드에 동적 데이터를 표시하고 프롬프트 텍스트를 추가하는 방법에 대한 참고 사항은 다음과 같습니다. 바라보다.

1. 각 노드는 실제로 구성 항목을 통해 완료할 수 있습니다. 시리즈데이터 바인딩에서는 다음과 같이 원래 구성 항목 itemStyle의 레이블 형식을 사용하여 완료할 수 있습니다. 다음과 같이 텍스트 표시 스타일을 수정해야 하는 경우 추가 구성 항목(예:

font-style

,font-weigth 등)을 완료해야 합니다.

{
      name: '其中：少数民族',
      type: 'line',
      data: ssmz,
      markPoint : {
        data : [
          {type : 'max', name: '最大值'},
          {type : 'min', name: '最小值'}
        ]
      },
      itemStyle: {//节点数据显示
        normal: {
          label: {
            show: true,
            position: 'right',
            formatter: ssmz,//该值动态显示数据，若需固定的文本，则直接写入
          }
        }
      }
    },

2. 일부 고객은 표시에 대한 추가 요구 사항을 제시합니다. 폴리라인의 최고값과 최저값 동시에 폴리라인의 끝 부분에 폴리라인의 의미를 추가해야 합니다. 이는 itemStyle을 통해서도 가능합니다. 그러나 포맷터가 텍스트 프롬프트의 형식을 지정할 때 형식을 결정한 다음 코드를 표시하려면 함수를 직접 작성해야 합니다.

{
      name: '合计',
      type: 'line',
      data: hj,
      markPoint : {
        data : [
          {type : 'max', name: '最大值'},
          {type : 'min', name: '最小值'}
        ],
      },
      itemStyle: {
        normal: {
          label: {
            show: true,
            position: 'right',//居右
            offset:[20,0],//横向往右20
            formatter: function(para){//格式化提示文本
            if(para.value == hj[hj.length-1]){
            return '合计';//显示文本
            }else{
            return '';
            }
            }
          }
        }
      }
    },

이 기사의 사례를 읽은 후 방법을 마스터했다고 생각합니다. PHP 중국어 웹사이트! 추천 자료:

Vue를 사용하여 카운트다운 버튼을 구현하는 방법

Vue를 사용하여 양방향 데이터 바인딩을 작성하는 방법

위 내용은 echart를 사용하여 노드에 동적 데이터를 표시하고 프롬프트 텍스트를 추가하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!