echarts 의 사용 주의사항, 반전 함수, data 차원 과 이벤트 순환 에 대하 여

2107 단어 자바 scriptecharts
회사 에서 dashboard 를 만 들 었 고 echarts 에 많은 실천 을 했 습 니 다.견과 도, 달력 도, 접선 도, 지리 도.난이도 순 위 는 견과 류 그림, 접 는 선 그림, 달력 그림, 지리 그림 이다.다음 과 같은 몇 가지 주의사항 을 총 결 하 였 다.
  • 리 턴 함 수 를 잘 이용 하면 도표 의 개성 화 를 크게 증가 시 킬 수 있다.예 를 들 어
  • tooltip : {
            trigger: 'item',
            formatter : function (params) {
               var value = params.value[1].toString().replace(/(\d{1,3})(?=(\d{3})+$)/g,function($1){return $1=$1+','})
               return `${params.value[0]}
    :${value}` } }
  • 도표 의 공 통 된 특징 은 마우스 에 떠 있 는 라벨 을 리 셋 함수 로 포맷 할 수 있다 는 것 이다.
  • 산 점도 의 symbol 크기 도 리 셋 함수 로 설정 할 수 있 습 니 다.
  • 맵 의 세그먼트 설정 이 매우 유연 합 니 다.예 를 들 어
  •  visualMap: [
              {
                type: 'piecewise',
                min: 0,
                max: 100,
                bottom: 60,
                left: "left",
                pieces: [
                    {min: 0, max: 59,label: '<60%',color:'#FF4177'},
                    {min: 60, max: 70, label: '60%-70%',color:'#FFA45A'},  
                    {min: 71, max: 89, label: '71%-89%',color:'#FFDC5A'},  
                    {min: 90, max: 100, label: '90%-100%',color:'#00B743'}, 
                ],
                dimension:2
              }
  • 설정 한 data 는 배열 형식 으로 value [x] 를 통 해 각 item 의 x 차원 데 이 터 를 얻 을 수 있 습 니 다.예 를 들 어
  •  data: [["115.88", "26.863", 99, 99,77,"430000",  ]],
     params[0].value[6] :  
  • 산 점 도 는 몇 개의 좌표 표 에 독립 된 것 으로 xy 좌표, 달력, 지도 상에 서 모두 산 점 도의 분포 좌표계
  • 가 될 수 있다.
  • 지리 도 는 js 도입 방식 과 json 파일 형식 으로 도입 되 었 습 니 다. 현재 사용 하 는 방법 은 json 형식 을 요청 하 는 파일 입 니 다. 사실은 json 파일 에 저 장 된 것 은 모두 geoJSON 형식 이라는 위치 정보 입 니 다. echarts 는 이러한 정보 에 따라 다각형 과 해당 하 는 라벨 을 그립 니 다.
  • 도 표를 다시 그린 후에 제때에 dispose 를 주의해 야 한다. 그렇지 않 으 면 산 점 을 클릭 할 때 바 인 딩 된 클릭 사건 을 여러 번 촉발 할 수 있다.심각 할 때 브 라 우 저 붕 괴 를 초래 할 수 있 습 니 다.
  • watch 의 도표 data 속성 에 조작 data 속성 을 설정 하지 마 십시오. echarts 가 값 을 부여 할 때 이 data 를 조작 하고 변경 하기 때문에 이 변 화 는 watch 에 의 해 다시 포착 되 고 이벤트 순환 에 들 어 갈 수 있 습 니 다.
  • 좋은 웹페이지 즐겨찾기