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

簡介

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

案例欣賞

-----------------------

--------------------------------------------------------------

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

--------------------------------------------------------------

----------------------

具體實現

 簡單條形圖

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

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

<div id="main" style="width:600px;height:400px"></div>

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

<script src="http://echarts.baidu.com/build/dist/echarts.js"></script>

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

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

// 路徑配置
require.config({
  paths: {
    echarts: 'http://echarts.baidu.com/build/dist'
  }
});

// 使用
require(
  [
    'echarts',
    'echarts/chart/bar', // 使用柱狀圖就加載bar模塊，按需加載
  ],
  function (ec) {
    // 基於準備好的dom，初始化echarts圖表
    var myChart = ec.init(document.getElementById('main'));
    //設置數據
    var option = {

    };

    // 爲echarts對象加載數據
    myChart.setOption(option);
  }
);

重點是option裏的設置，設置座標軸、設置數據。

var option = {
      //設置座標軸
      xAxis : [
        {
          type : 'category',
          data : ["襯衫","羊毛衫","雪紡衫","褲子","高跟鞋","襪子","帽子","圍巾"]
        }
      ],
      yAxis : [
        {
          type : 'value'
        }
      ],
      //設置數據
      series : [
        {
          "name":"銷量",
          "type":"bar",
          "data":[5, 20, 40, 10, 24, 20,24,32],
        }
      ]
    };

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

var option = {
     //設置標題
     title:{
       text:'銷量圖',
       subtext:'純屬捏造，如有雷同，人品爆發。'
     },
     //設置提示
     tooltip: {
       show: true
     },
     //設置圖例
     legend: {
       data:['銷量']
     },
     //設置座標軸
     xAxis : [
       {
         type : 'category',
         data : ["襯衫","羊毛衫","雪紡衫","褲子","高跟鞋","襪子","帽子","圍巾"]
       }
     ],
     yAxis : [
       {
         type : 'value'
       }
     ],
     //設置數據
     series : [
       {
         "name":"銷量",
         "type":"bar",
         "data":[5, 20, 40, 10, 24, 20,24,32],
       }
     ]
   };

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

    條形圖折線圖混搭

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

當我們需要混搭的時候，首先需要在require里加載需要使用的圖庫，然後在series裏填寫折線圖的數據就可以了。代碼如下，因爲註釋已經寫得很清楚了，就不在囉嗦了，大家直接研究代碼。

// 路徑配置
require.config({
  paths: {
    echarts: 'http://echarts.baidu.com/build/dist'
  }
});

// 使用
require(
  [
    'echarts',
    'echarts/chart/bar', // 使用柱狀圖就加載bar模塊，按需加載
    'echarts/chart/line'
  ],
  function (ec) {
    // 基於準備好的dom，初始化echarts圖表
    var myChart = ec.init(document.getElementById('main'));
//設置數據
    var option = {
      //設置標題
      title:{
        text:'銷量圖',
        subtext:'純屬捏造，如有雷同，人品爆發。'
      },
      //設置提示
      tooltip: {
        show: true
      },
      //設置圖例
      legend: {
        data:['銷量']
      },
      //設置座標軸
      xAxis : [
        {
          type : 'category',
          data : ["襯衫","羊毛衫","雪紡衫","褲子","高跟鞋","襪子","帽子","圍巾"]
        }
      ],
      yAxis : [
        {
          type : 'value'
        }
      ],
      //設置數據
      series : [
        //條形圖
        {
          "name":"銷量",
          "type":"bar",
          "data":[5, 20, 38, 10, 24, 20,24,32]
        },
        //折線圖
         {
          "name":"銷量",
          "type":"line",
          "data":[5, 20, 38, 10, 24, 20,24,32],
           //繪製平均線
           markLine : {
             data : [
               {type : 'average', name: '平均值'}
             ]
           },
          //繪製最高最低點
          markPoint : {
            data : [
              {type : 'max', name: '最大值'},
              {type : 'min', name: '最小值'}
            ]
          }
        }
      ]
    };

    // 爲echarts對象加載數據
    myChart.setOption(option);
  }
);