1. 程式人生 > >ECharts配置簡單說明

ECharts配置簡單說明

這裡所使用的版本是

version = '2.2.0';
dependencies = { zrender: '2.0.7' };

1、下載ECharts原始碼,如果不知道哪下載,百度一下ECharts,然後就能看到官網了。

2、下載後,可以看到build資料夾,如果不是為了調測,可以直接使用dist資料夾下的。echarts.js和echarts-all.js區別在於後者已經把map.js打包進去了。如果網站上不用map,應該使用echarts.js,這樣因為檔案小能減少載入時間。

3、把build下的檔案拷貝到你想要放的工程目錄中,我拷貝進來後把dist改成了echarts

4、頭部引入 

<script type="text/javascript" src="../common/echarts/echarts.js"> </script>

5、然後就可以在script中使用
require.config({
            paths: {
                //echarts: 'http://echarts.baidu.com/build/dist'  百度線上地址
                echarts:'../common/echarts/'
            }
        });

6、定義一個div
<div id="mydiv" style="width:1000px;height:600px;"></div>

7、比如畫折線加柱狀圖
require(
        [
            'echarts',
            'echarts/chart/line',
            'echarts/chart/bar' // 使用柱狀圖就載入bar模組,按需載入
        ],
      function(ec) {//ec是包含echarts的物件,但不是echarts例項, comment by danielinbiti
        var myChart = ec.init(document.getElementById('mydiv'));
        myChart.setOption(option);//option似乎引數,可以參見官網的各個例項設定方式
      }
    )

到這裡,一個配置的例子就算完事了,各種圖形方式都一樣。裡面的引數設定要想做好了還是挺複雜的,很靈活。下回講解ec.init方法和setOption方法分析原始碼過程。