什麼是資料視覺化，說白了， 就是把資料以更加直觀的方式進行呈現， 那什麼方式是更加直觀的方式呢?就是圖表

我們看一組資料

這個資料就是某些產品的銷量. 單純從這些文字上來看, 很難看出資料之間對比的關係. 如果把這些資料以圖表的方式呈現出來就會顯然易見

這幅圖就是這組資料的圖表展示.，通過這幅圖一眼就能看出哪些產品銷量高， 哪些產品銷量低，資料一目瞭然

ECharts的基本使用

ECharts是百度公司開源的一個使用 JavaScript 實現的開源視覺化庫，相容性強，底層依賴向量圖形 庫 ZRender ，提供直觀，互動豐富，可高度個性化定製的資料視覺化圖表。

官網：Apache ECharts

ECharts 使用大體分為這幾個步驟

1>引入 echarts.js 檔案

<script src="./lib/echarts.min.js"></script>

2>準備一個呈現圖表的盒子

我們以div為這個盒子，這個 div 決定了圖表顯示在哪裡

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

3>初始化 echarts 例項物件

指明圖表最終顯示在哪裡的DOM元素

var myChart = echarts.init(document.getElementById('box'))

4>準備配置項

呈現最終的效果，到底是顯示餅圖還是折線圖，基本上都是由配置項決定的

   var option={
            title:{
                show:true,
                text:"銷量"
            },
            xAxis: {
                type: 'category
 
',
                data: ['毛衣', '襯衣', '襖子', '鞋子', '領帶', '西裝', '裙子']
              },
              yAxis: {
                type: 'value'
              },
              series: [
                {
                  data: [120, 200, 150, 80, 70, 110, 130],
                  type: 'bar'
                }
              ]
         }

5>將配置項設定給 echarts 例項物件

myCharts.setOption(option);

一個圖表最終呈現什麼樣子，完全取決於這個第四步配置項，對於不同的圖表,，除了配置項會發生改變之外， 其他的程式碼都是固定不變的.