首頁 >web前端 >js教程 >Echarts用法詳細介紹

Echarts用法詳細介紹

巴扎黑
巴扎黑原創
2017-08-12 16:12:323926瀏覽

這篇文章主要介紹了Echarts基本用法,詳解的介紹了Echarts的基本用法和實例,有興趣的可以了解一下

echarts太完美了:

1,開源軟體,無私的為我們提供漂亮的圖形介面;

2,使用簡單,默默的為我們封裝了重要的js ,只要會引用就會使用echarts;

3,種類多,echarts為我們提供了各種圖標,其中最具象徵的就是地圖了;

4,相容性好,基於html5動畫渲染超棒。

echarts官網 提供了原始碼和說明文檔,使用echarts需要先到官網下載所需的js原始檔。

官網上的demo中夾雜著很多我們用不到的東西,想使用餅狀圖就得從demo中把不用的去掉,劈植斬葉留下最原始的功能實現。如此畢竟比較費時,我就在裁剪後的程式碼中加以總結於是乎新的使用教程如下所示:

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中加入一個p給定id,圖表就會顯示在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時餅狀圖是pie,長條圖是bar,對應的option裡面的資料不同,程式的架子是一樣的。

以上是Echarts用法詳細介紹的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn