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

<h3 id="step_2">牛刀小試</h3>
??先來一個最簡單的案例，實現一個條形圖。

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

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

然后我們導入Echarts類庫，做好準備。

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

然后就是重頭戲，我們來繪制數據表，首先配置路徑，接著使用Echarts開始繪圖。

// 路徑配置
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],
        }
      ]
    };

至此，一個簡單的標準柱狀圖就生成了。