집 >웹 프론트엔드 >JS 튜토리얼 >Echarts 사용법에 대한 자세한 소개

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

巴扎黑원래의: 2017-08-12 16:12:323927검색

이 글은 주로 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명：

이전 기사：스와이프 사용법에 대한 자세한 설명다음 기사：스와이프 사용법에 대한 자세한 설명