ホームページ > 記事 > ウェブフロントエンド > Echarts の使い方の詳細な紹介

Echarts の使い方の詳細な紹介

巴扎黑オリジナル: 2017-08-12 16:12:323921ブラウズ

この記事では、Echarts の基本的な使い方を中心に、Echarts の基本的な使い方と例を詳しく紹介しますので、興味がある方はぜひご覧ください

echarts はとても完璧です:

1、開きます。ソースソフトウェア、私たちは美しいグラフィカルインターフェイスを提供します。2. 参照できる限り、重要な JS を黙ってカプセル化します。 echarts はさまざまな種類のアイコンを提供します。最も象徴的なのは HTML5 アニメーションに基づく優れた互換性と優れたレンダリングを備えたマップです。

echarts 公式 Web サイトでは、ソースコードとドキュメントが提供されています。echarts を使用するには、まず公式 Web サイトにアクセスして、必要な 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 中国語 Web サイトの他の関連記事を参照してください。

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

前の記事：スワイパーの使い方を詳しく解説次の記事：スワイパーの使い方を詳しく解説

続きを見る