Echarts 사용법에 대한 자세한 소개-JS 튜토리얼-php.cn

집

웹 프론트엔드

JS 튜토리얼

Echarts 사용법에 대한 자세한 소개

巴扎黑

Aug 12, 2017 pm 04:12 PM

echarts 소개하다 용법

이 글은 주로 Echarts의 기본 사용법을 소개하고, Echarts의 기본 사용법과 예시를 자세하게 소개하고 있으니 관심 있으신 분들은 배워보시면 됩니다

echarts는 너무 완벽해요:

1, open

2. 사용하기 쉽고 중요한 js를 자동으로 캡슐화합니다.

3. 다양한 유형이 있습니다. 가장 상징적인 아이콘은 html5 애니메이션을 기반으로 한 뛰어난 호환성과 뛰어난 렌더링을 갖춘 지도입니다.

echarts 공식 웹사이트에서는 소스 코드와 문서를 제공합니다. echarts를 사용하려면 먼저 공식 웹사이트에서 필요한 js 소스 파일을 다운로드해야 합니다.

공식 웹사이트의 데모에는 필요하지 않은 것들이 많이 포함되어 있습니다. 원형 차트를 사용하려면 데모에서 사용하지 않는 것들을 제거하고 가장 독창적인 기능 구현을 남겨야 합니다. 결국 시간이 더 많이 걸리기 때문에 컷코드로 정리했습니다. 그래서 새로운 사용법 튜토리얼은 다음과 같습니다.

echarts 원형 차트 구현 단계:

1, 간단한 HTML로 소개합니다. js 파일

<head> 
  <meta charset="utf-8"> 
  <title>Charts demo</title> 
   <script src="js/esl.js"></script> 
</head> 
<body> 
</body>

로그인 후 복사

2, 그래픽용 컨테이너를 준비하려면

<head> 
  <meta charset="utf-8"> 
  <title>Charts demo</title> 
   <script src="js/esl.js"></script> 
</head> 
<body> 
   
  <p id="picturePlace"></p> 
  
</body>

로그인 후 복사

은 html에서 주어진 ID를 가진 p를 추가하는 것이고 차트는 p에 표시됩니다.

3. 모듈을 js

<head> 
  <meta charset="utf-8"> 
  <title>Charts demo</title> 
   <script src="js/esl.js"></script> 
</head> 
<body> 
  <p id="picturePlace"></p> 
   <script type="text/javascript"> 
    // 路径配置 
    require.config({ 
      paths:{  
        &#39;echarts&#39; : &#39;js/echarts&#39;, 
        &#39;echarts/chart/pie&#39; : &#39;js/echarts&#39; 
      } 
    }); 
  </script> 
</body>

로그인 후 복사

4. 표시 데이터 추가

<head> 
  <meta charset="utf-8"> 
  <title>Charts demo</title> 
   <script src="js/esl.js"></script> 
</head> 
<body> 
  <p id="picturePlace"></p> 
   <script type="text/javascript"> 
    // 路径配置 
    requireconfig({ 
      paths:{  
        &#39;echarts&#39; : &#39;js/echarts&#39;, 
        &#39;echarts/chart/pie&#39; : &#39;js/echarts&#39; 
      } 
    }); 
     
     // 使用 
    require( 
      [ 
        &#39;echarts&#39;, 
        &#39;echarts/chart/pie&#39; // 使用柱状图就加载bar模块，按需加载 
      ], 
      function (ec) { 
        // 基于准备好的dom，初始化echarts图表 
        var myChart = ec.init(document.getElementById(&#39;picturePlace&#39;));  
         
        option = { 
            title : { 
              text: &#39;某站点用户访问来源&#39;, 
              subtext: &#39;纯属虚构&#39;, 
              x:&#39;center&#39; 
            }, 
            tooltip : { 
              trigger: &#39;item&#39;, 
              formatter: "{a} {b} : {c} ({d}%)" 
            }, 
            legend: { 
              orient : &#39;vertical&#39;, 
              x : &#39;left&#39;, 
              data:[&#39;直接访问&#39;,&#39;邮件营销&#39;,&#39;联盟广告&#39;,&#39;视频广告&#39;,&#39;搜索引擎&#39;] 
            }, 
            toolbox: { 
              show : true, 
              feature : { 
                mark : {show: true}, 
                dataView : {show: true, readOnly: false}, 
                restore : {show: true}, 
                saveAsImage : {show: true} 
              } 
            }, 
            calculable : true, 
            series : [ 
              { 
                name:&#39;访问来源&#39;, 
                type:&#39;pie&#39;, 
                radius : &#39;55%&#39;, 
                center: [&#39;50%&#39;, &#39;60%&#39;], 
                data:[ 
                  {value:335, name:&#39;直接访问&#39;}, 
                  {value:310, name:&#39;邮件营销&#39;}, 
                  {value:234, name:&#39;联盟广告&#39;}, 
                  {value:135, name:&#39;视频广告&#39;}, 
                  {value:1548, name:&#39;搜索引擎&#39;} 
                ] 
              } 
            ] 
          }; 
     
        // 为echarts对象加载数据  
        myChart.setOption(option);  
      } 
    ); 
  </script> 
</body>

로그인 후 복사

5. 위는 원형 차트를 구현하는 단계입니다. 히스토그램 분산형 차트는 다음과 같습니다. js를 참조할 때와 유사하게 파이 차트는 파이이고 막대 차트는 막대입니다. 해당 옵션의 데이터는 다르지만 프로그램 프레임은 동일합니다.

위 내용은 Echarts 사용법에 대한 자세한 소개의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

본 웹사이트의 성명

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.

핫 AI 도구

뜨거운 도구

뜨거운 주제

Gmail 이메일의 로그인 입구는 어디에 있나요?

7517

Cakephp 튜토리얼

1378

Steam의 계정 이름 형식은 무엇입니까?

Win11 활성화 키 영구

NYT 연결 힌트와 답변

Related knowledge

wapi가 무엇인지에 대한 자세한 소개 Jan 07, 2024 pm 09:14 PM

사용자들은 인터넷을 사용하면서 와피(wapi)라는 용어를 접했을 수도 있지만, 와피가 무엇인지 모르는 사람들도 있을 것입니다. 다음은 모르는 사람들의 이해를 돕기 위해 자세히 소개한 것입니다. wapi란 무엇입니까? 답변: wapi는 무선 LAN 인증 및 기밀 유지를 위한 인프라입니다. 이는 일반적으로 사무실 건물과 같은 장소 근처에서 보호되는 적외선 및 블루투스와 같은 기능과 같습니다. 기본적으로 소규모 부서가 소유하므로 이 기능의 범위는 불과 몇 킬로미터에 불과합니다. wapi 관련 소개: 1. Wapi는 무선 LAN의 전송 프로토콜입니다. 2. 이 기술은 협대역 통신의 문제를 방지하고 더 나은 통신을 가능하게 합니다. 3. 신호를 전송하는 데는 하나의 코드만 필요합니다.

win11이 PUBG 게임을 실행할 수 있는지에 대한 자세한 설명 Jan 06, 2024 pm 07:17 PM

PlayerUnknown's Battlegrounds라고도 알려진 Pubg는 2016년 인기를 얻은 이후 많은 플레이어를 끌어모은 매우 고전적인 슈팅 배틀 로얄 게임입니다. 최근 win11 시스템이 출시된 후 많은 플레이어들이 win11에서 플레이하고 싶어합니다. win11이 pubg를 플레이할 수 있는지 편집기를 따라가 보겠습니다. win11이 pubg를 플레이할 수 있나요? 답변: Win11은 pubg를 플레이할 수 있습니다. 1. win11 초기에는 win11에서 tpm을 활성화해야 했기 때문에 많은 플레이어가 pubg에서 금지되었습니다. 2. 하지만 플레이어 여러분의 피드백을 바탕으로 블루홀에서는 이 문제를 해결하였고, 이제 win11에서도 정상적으로 pubg 플레이가 가능해졌습니다. 3. 술집을 만난다면

JSP 주석의 용도 및 분류 분석 Feb 01, 2024 am 08:01 AM

JSP 주석 분류 및 활용 분석 JSP 주석은 두 가지 유형으로 구분됩니다. 한 줄 주석: 로 끝나는 코드로 한 줄만 주석을 달 수 있습니다. 여러 줄 주석: /*로 시작하고 */로 끝나는 경우 여러 줄의 코드에 주석을 달 수 있습니다. 한 줄 주석 예 여러 줄 주석 예/**여러 줄 주석입니다*여러 줄의 코드에 주석을 달 수 있습니다*/JSP 주석 사용 JSP 주석을 사용하여 JSP 코드에 주석을 달면 읽기 쉬워집니다.

C 언어에서 종료 기능을 올바르게 사용하는 방법 Feb 18, 2024 pm 03:40 PM

C 언어에서 종료 기능을 사용하려면 특정 코드 예제가 필요합니다. C 언어에서는 프로그램 초기에 프로그램 실행을 종료하거나 특정 조건에서 프로그램을 종료해야 하는 경우가 많습니다. C 언어에서는 이 기능을 구현하기 위해 exit() 함수를 제공합니다. 이 기사에서는 exit() 함수의 사용법을 소개하고 해당 코드 예제를 제공합니다. Exit() 함수는 C 언어의 표준 라이브러리 함수로 헤더 파일에 포함되어 있습니다. 그 기능은 프로그램 실행을 종료하는 것이며 정수를 취할 수 있습니다.

WPSdateif 함수 사용 Feb 20, 2024 pm 10:27 PM

WPS는 일반적으로 사용되는 사무용 소프트웨어 제품군이며 WPS 테이블 기능은 데이터 처리 및 계산에 널리 사용됩니다. WPS 테이블에는 두 날짜 사이의 시차를 계산하는 데 사용되는 매우 유용한 함수인 DATEDIF 함수가 있습니다. DATEDIF 함수는 영어 단어 DateDifference의 약어입니다. 구문은 다음과 같습니다. DATEDIF(start_date,end_date,unit) 여기서 start_date는 시작 날짜를 나타냅니다.

최신 Win 11 사운드 튜닝 방법 소개 Jan 08, 2024 pm 06:41 PM

최신 win11로 업데이트한 후 많은 사용자가 시스템 사운드가 약간 변경되었지만 이를 조정하는 방법을 알지 못합니다. 따라서 오늘 이 사이트에서는 컴퓨터의 최신 win11 사운드 조정 방법을 소개합니다. 작동 방법도 어렵지 않습니다. 선택 사항도 다양합니다. 와서 다운로드하여 사용해 보세요. 최신 컴퓨터 시스템 Windows 11의 사운드 조정 방법 1. 먼저 바탕 화면 오른쪽 하단의 사운드 아이콘을 마우스 오른쪽 버튼으로 클릭하고 "재생 설정"을 선택합니다. 2. 그런 다음 설정을 입력하고 재생 표시줄에서 "스피커"를 클릭합니다. 3. 그런 다음 오른쪽 하단의 "속성"을 클릭하십시오. 4. 속성에서 "향상" 옵션 표시줄을 클릭하세요. 5. 이때 '모든 음향효과 비활성화' 앞의 √가 체크되어 있으면 취소해 주세요. 6. 그 후 아래에서 설정할 음향 효과를 선택하고 클릭하세요.

PyCharm 초보자 가이드: 대체 함수에 대한 종합 분석 Feb 25, 2024 am 11:15 AM

PyCharm은 개발 효율성을 크게 향상시킬 수 있는 풍부한 기능과 도구를 갖춘 강력한 Python 통합 개발 환경입니다. 그 중 교체 기능은 개발 과정에서 자주 사용되는 기능 중 하나로, 개발자가 코드를 빠르게 수정하고 코드 품질을 향상시키는 데 도움을 줄 수 있습니다. 이 기사에서는 초보자가 이 기능을 더 잘 익히고 사용할 수 있도록 특정 코드 예제와 함께 PyCharm의 대체 기능을 자세히 소개합니다. 대체 기능 소개 PyCharm의 대체 기능은 개발자가 코드에서 지정된 텍스트를 빠르게 대체하는 데 도움이 될 수 있습니다.

컴퓨터의 프린터 드라이버 위치에 대한 자세한 정보 Jan 08, 2024 pm 03:29 PM

많은 사용자가 컴퓨터에 프린터 드라이버를 설치했지만 이를 찾는 방법을 모릅니다. 그래서 오늘은 컴퓨터에서 프린터 드라이버의 위치에 대해 자세히 소개하겠습니다. 아직 모르시는 분들을 위해 원래 의미를 바꾸지 않고 내용을 다시 작성할 때 프린터 드라이버를 찾을 수 있는 위치를 살펴보겠습니다. 언어를 중국어로 다시 작성해야 하며 원래 문장이 표시될 필요는 없습니다. 먼저 타사 소프트웨어를 사용하여 검색하는 것이 좋습니다. 2. 오른쪽 상단에서 "도구 상자"를 찾습니다. 아래의 "장치 관리자"를 클릭하세요. 다시 쓴 문장: 3. 하단의 "장치 관리자"를 찾아 클릭합니다. 4. 그런 다음 "인쇄 대기열"을 열고 프린터 장치를 찾습니다. 이번에는 프린터 이름과 모델입니다. 5. 프린터 장치를 마우스 오른쪽 버튼으로 클릭하면 업데이트하거나 제거할 수 있습니다.

See all articles

Echarts 사용법에 대한 자세한 소개

핫 AI 도구

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

AI Hentai Generator

인기 기사

뜨거운 도구

메모장++7.3.1

SublimeText3 중국어 버전

스튜디오 13.0.1 보내기

드림위버 CS6

SublimeText3 Mac 버전

뜨거운 주제