2. 程式人生 > >Echarts製作圖表教程一------柱狀圖

Echarts製作圖表教程一------柱狀圖

阿新 • • 發佈：2019-02-10


簡介

ECharts，縮寫來自Enterprise Charts，商業級資料圖表，是百度的一個開源的資料視覺化工具，業界給予了很多讚譽，這裡不多說，需要了解詳情的同學參見官網。我簡略看了下，最貼切的地方在於本地化支援，比如對於中國地圖的支援。

案例欣賞

----------------------- --------------------------------------------------------------         ===案例一簡單條形圖===案例二 條形、折線圖混搭=== -------------------------------------------------------------- ----------------------

具體實現

 簡單條形圖

先來一個最簡單的案例，實現一個條形圖，程式碼我放在codepen喲，大家可以移步預覽效果先。


預先準備好具有寬和高的網頁元素，我們將用它繪製資料表。

[html] view plain copy  print?在CODE上檢視程式碼片派生到我的程式碼片
  1. <divid="main"style="width:600px;height:400px"></div>

然後我們匯入Echarts類庫，做好準備。也可以自己在官網上下載百度一下就有了；

[html] view plain copy  print?在CODE上檢視程式碼片派生到我的程式碼片
  1. <scriptsrc="http://echarts.baidu.com/build/dist/echarts.js"
    ></script>

然後就是重頭戲，我們來繪製資料表，首先配置路徑，接著使用Echarts開始繪圖。命名為require.js 在前面的html中用

<script src="js/require.js"></script>中匯入

[javascript] view plain copy  print?在CODE上檢視程式碼片派生到我的程式碼片
  1. // 路徑配置
  2. require.config({  
  3.   paths: {  
  4.     echarts: 'http://echarts.baidu.com/build/dist'
  5.   }  
  6. });  
  7. // 使用
  8. require(  
  9.   [  
  10.     'echarts'
    ,  
  11.     'echarts/chart/bar', // 使用柱狀圖就載入bar模組，按需載入
  12.   ],  
  13.   function (ec) {  
  14.     // 基於準備好的dom，初始化echarts圖表
  15.     var myChart = ec.init(document.getElementById('main'));   
  16.     //設定資料
  17.     var option = {  
  18.     };  
  19.     // 為echarts物件載入資料 
  20.     myChart.setOption(option);   
  21.   }  
  22. );  

重點是option裡的設定，設定座標軸、設定資料。

[javascript] view plain copy  print?在CODE上檢視程式碼片派生到我的程式碼片
  1. var option = {  
  2.       //設定座標軸
  3.       xAxis : [  
  4.         {  
  5.           type : 'category',  
  6.           data : ["襯衫","羊毛衫","雪紡衫","褲子","高跟鞋","襪子","帽子","圍巾"]  
  7.         }  
  8.       ],  
  9.       yAxis : [  
  10.         {  
  11.           type : 'value'
  12.         }  
  13.       ],  
  14.       //設定資料
  15.       series : [  
  16.         {  
  17.           "name":"銷量",  
  18.           "type":"bar",  
  19.           "data":[5, 20, 40, 10, 24, 20,24,32],  
  20.         }  
  21.       ]  
  22.     };  


我們可以設定圖示標題、圖例、提示等，程式碼如下，效果如下圖所示。

[javascript] view plain copy  print?在CODE上檢視程式碼片派生到我的程式碼片
  1. var option = {  
  2.      //設定標題
  3.      title:{  
  4.        text:'銷量圖',  
  5.        subtext:'純屬捏造，如有雷同，人品爆發。'
  6.      },  
  7.      //設定提示
  8.      tooltip: {  
  9.        show: true
  10.      },  
  11.      //設定圖例
  12.      legend: {  
  13.        data:['銷量']  
  14.      },  
  15.      //設定座標軸
  16.      xAxis : [  
  17.        {  
  18.          type : 'category',  
  19.          data : ["襯衫","羊毛衫","雪紡衫","褲子","高跟鞋","襪子","帽子","圍巾"]  
  20.        }  
  21.      ],  
  22.      yAxis : [  
  23.        {  
  24.          type : 'value'
  25.        }  
  26.      ],  
  27.      //設定資料
  28.      series : [  
  29.        {  
  30.          "name":"銷量",  
  31.          "type":"bar",  
  32.          "data":[5, 20, 40, 10, 24, 20,24,32],  
  33.        }  
  34.      ]  
  35.    };  


======================ok，華麗的分割線，之後我來點複雜的==========================

    條形圖折線圖混搭

加點料，來電混搭，直線圖加上條形圖，同時畫平均線、提示最大最小值，同樣程式碼放在codepen，移步預覽效果先。


當我們需要混搭的時候，首先需要在require里加載需要使用的相簿，然後在series裡填寫折線圖的資料就可以了。程式碼如下，因為註釋已經寫得很清楚了，就不在囉嗦了，大家直接研究程式碼。

[javascript] view plain copy  print?在CODE上檢視程式碼片派生到我的程式碼片
  1. // 路徑配置
  2. require.config({  
  3.   paths: {  
  4.     echarts: 'http://echarts.baidu.com/build/dist'
  5.   }  
  6. });  
  7. // 使用
  8. require(  
  9.   [  
  10.     'echarts',  
  11.     'echarts/chart/bar', // 使用柱狀圖就載入bar模組，按需載入
  12.     'echarts/chart/line'
  13.   ],  
  14.   function (ec) {  
  15.     // 基於準備好的dom，初始化echarts圖表
  16.     var myChart = ec.init(document.getElementById('main'));   
  17. //設定資料
  18.     var option = {  
  19.       //設定標題
  20.       title:{  
  21.         text:'銷量圖',  
  22.         subtext:'純屬捏造，如有雷同，人品爆發。'
  23.       },  
  24.       //設定提示
  25.       tooltip: {  
  26.         show: true
  27.       },  
  28.       //設定圖例
  29.       legend: {  
  30.         data:['銷量']  
  31.       },  
  32.       

    相關推薦

    Echarts製作圖表教程一------柱狀圖

    簡介 ECharts，縮寫來自Enterprise Charts，商業級資料圖表，是百度的一個開源的資料視覺化工具，業界給予了很多讚譽，這裡不多說，需要了解詳情的同學參見官網。我簡略看了下，最貼切的地方在於本地化支援，比如對於中國地圖的支援。 案例欣賞 ----

    ECharts的學習（一）：製作一個簡單的柱狀圖

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"><meta na

    ECharts動態加載堆疊柱狀圖的實例

    pos list ntb tar value set push show val 一、引入echarts.js文件（下載頁:http://echarts.baidu.com/download.html） 二、HTML代碼： <div style="width: 10

    Sigmaplot學習筆記1——製作最簡單的柱狀圖

    什麼！居然是英文版。。。 然而搞科學研究不懂英文怎麼行呢？ 製作最簡單的柱狀圖 開啟Sigmaplot14，建立空白資料表，點選OK 將資料複製或者輸入到表格中，不用管此時資料後面的4位小數，製圖時，年份後小數自動消失   點選簡單垂直柱狀圖

    ECHARTS的基本使用：柱狀圖、折線圖、餅圖等

    Echarts 是由百度團隊打造的一款純 Javascript 的圖表庫，官網下載路徑如下： Echarts的特性： 豐富的圖表型別： 常用的有折線圖，柱狀圖，散點圖，餅圖，盒形圖，用於地理資料視覺化的地圖，熱力圖，線圖等 多個座標系的支援

    Android 自定義控制元件 (一) ,柱狀圖 ,Canvas 繪製 柱狀圖 ,支援觸控操作

    專案中，經常會用到統計圖表，個性化展示資料，增加趣味性，之前也用過百度Echarts來展示，效果很不錯，包括一些互動操作，不得不說，echarts幫我我們實現了絕大多數的需求，體積小不說，實現方式也很簡單，後來想了想，為什麼不用安卓Canvas繪製呢，畢竟是安卓開發攻城獅，下

    echarts中國地圖上顯示柱狀圖，並且柱狀圖可點選

    先放效果圖~~點選之後~~（資料和標題可動態變化）話不多說，直接上程式碼<link rel="shortcut icon" href="${ctx}/static/img/favicon.ico"> <link rel="stylesheet" href="

    Ajax+Echarts動態新增成組柱狀圖

    因公司專案原因，最近需要用到ECharts，按照官網的例項以及試驗，完成了需求的報表效果圖：首先先去官網下載要開發的元件，ECharts還是非常厲害的。話不多說，先上前端程式碼<head> <script src="echarts/echarts.j

    Echarts根據資料長度變換柱狀圖柱狀的顏色

     //查詢圖表資料            function GetData() {                var qs = $("#qs").val()

    echarts故障統計多維柱狀圖 堆疊柱狀圖 柱狀圖Demo2

    option = { backgroundColor: 'black', color: ['#FFC90E', '#ED1C24'], title: { text: '故障統計', x: 'center',

    echarts y軸顯示圖片柱狀圖

    <div id="echarts" style="width:100%;height:200px;"></div> var myChart = echarts.init( document.getElementById( 'echarts'

    HelloCharts圖表庫之柱狀圖

    <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" an

    echatrs同一個頁面多圖表展示，柱狀圖，折線圖，油表，地圖……

    /* 卸車時間 */function drawUninstall(ec) {var myBarChart = ec.init(document.getElementById('uninstallGoods'));var option1 = {backgroundColor : '#1B1B1B',title

    Echarts調整圖表上下左右的間距，Echarts調整柱狀圖左右的間距

    contain div mage 收藏 上下 .com baidu ron 間距 Echarts調整圖表上下左右的間距，Echarts調整柱狀圖左右的間距 >>>>>>>>>>>>>>&

    vue專案中使用Echarts 動態更改圖表資料 ， Vue 折線圖、柱狀圖等圖表動態重新整理 ，

    問題：在vue元件中，用echarts外掛 動態獲取、修改圖表資料 解決：已解決！ 第一步：開啟cmd命令視窗 安裝echarts依賴 安裝：npm install echarts -S 第二步：在main.js中全域性引入   //引入echarts的圖表外掛

    使用echarts 外掛生成圖表柱狀圖

    1.下載echarts 得到檔案：echarts.js 檔案 複製到專案中                2.建立前端頁面，將下方程式碼複製到html檔案中

    美解決echarts的柱狀圖和折線圖的點選非圖表圖形元素不會觸發事件

    在涉及到圖示的開發中，相信大家經常會用到echarts，echarts中可以通過on方法新增事件處理函式，可以很方便的實現一些互動。如： 但是直接新增的click事件，只有點選在圖形元素上才會觸發事件處理函式。以柱狀圖和折線圖為例： 在上述兩張圖中，只

    百度ECharts---android線上展示統計圖表(折線圖\柱狀圖\餅狀圖)

    做金融型別的應用經常會用到資料的統計報表 諸如折線圖 ,  K線圖, 餅狀圖,柱狀圖  既能形象的表述資料的分佈 , 同時又增加了資料的可讀性 實現思路: 百度Echarts支援安卓移動端的運用 , WebView載入html, 巢狀JavaScript程式碼 , 即可動態

    關於echarts圖表傳json物件,柱狀圖傳引數的建議

           我們在做統計圖的時候可能會出現這樣的要求,頁面不允許寫太多的js,例如jsp中用到了foreach的時候要迴圈出js,這樣是不規範的,我們要把js封裝起來,傳json物件,還有很多同學問我,樹狀圖怎麼傳引數,我在這裡一一解

    完美解決echarts的柱狀圖和折線圖的點選非圖表圖形元素不會觸發事件

    在涉及到圖示的開發中，相信大家經常會用到echarts，echarts中可以通過on方法新增事件處理函式，可以很方便的實現一些互動。如： 但是直接新增的click事件，只有點選在圖形元素上才會觸發事件處理函式。以柱狀圖和折線圖為例： 在上述兩張圖中，只有點選柱狀圖形