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

<h3 id="step_2">牛刀小試</h3>
??先來一個(gè)最簡單的案例，實(shí)現(xiàn)一個(gè)條形圖。

預(yù)先準(zhǔn)備好具有寬和高的網(wǎng)頁元素，我們將用它繪制數(shù)據(jù)表。

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

然后我們導(dǎo)入Echarts類庫，做好準(zhǔn)備。

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

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

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

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

    // 為echarts對象加載數(shù)據(jù) 
    myChart.setOption(option); 
  }
);

重點(diǎn)是option里的設(shè)置，設(shè)置坐標(biāo)軸、設(shè)置數(shù)據(jù)。

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

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

至此，一個(gè)簡單的標(biāo)準(zhǔn)柱狀圖就生成了。