帶你ECharts入個門

耗子他大哥發表於2018-07-02

首先匯入相應的 js :
echarts.min.js
china.js(需要顯示中國地圖才匯入這個)
相關js下載(上傳百度雲太麻煩,沒積分的小夥伴可以聯絡我私發 ^-^)

完成一個簡單的ECharts報表,簡單總結就這幾步:
1、在需要顯示圖表的地方定義好 div 並給定寬高,注意在初始化之前一定要給定寬高,否則即使程式碼正確最後也不會顯示。
2、初始化 div 容器:var mycharts = echarts.init(document.getElementById(“xxx”));
3、定義樣式(折線圖、柱狀圖、餅圖、散點圖等),自己不會寫程式碼可以直接去官網找,官網也提供線上編輯的功能,可以除錯後直接複製到程式碼中。根據官網上的例子只要正確獲取後臺的資料保證格式正確填入相應的位置即可。
4、將容器與樣式結合:mychart.setOption(option);
  ps:括號裡的 option 就是步驟三中定義樣式的變數名。


例:

<script>
    var mycharts = echarts.init(document.getElementById("xxx"));
    var option = {
        //...
    };
    mycharts.setOption(option);
</script>

相關文章