Echarts常用功能總結

之前做過柱形圖和折線圖，被前任引入的舊版本文件坑不少，再次做的時候都有些遺忘，趁項目不急的時候總結一下~

一、非模塊化——單文件引入：

1、首先毫無疑問通過script標簽引入echarts文件，官網http://echarts.baidu.com/echarts2/index.html可以下載

2、通過官網的例子結合實際補充說明

// srcipt標簽式引入
var myChart = echarts.init(document.getElementById('main'));

// 過渡---------------------
myChart.showLoading({
    text: '正在努力的讀取數據中...',    //loading話術
});

// ajax getting data...............

// ajax callback
myChart.hideLoading();

// 圖表使用-------------------
var option = {
    legend: {                                   // 圖例配置
        padding: 5,                             // 圖例內邊距，單位px，默認上下左右內邊距為5
        itemGap: 10,                            // Legend各個item之間的間隔，橫向布局時為水平間隔，縱向布局時為縱向間隔
        data: ['ios', 'android']
    },
    tooltip: {                                  // 氣泡提示配置
        trigger: 'item',                        // 觸發類型，默認數據觸發，可選為：'axis'
    },
    xAxis: [                                    // 直角坐標系中橫軸數組
        {
            type: 'category',                   // 坐標軸類型，橫軸默認為類目軸，數值軸則參考yAxis說明
            data: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
        }
    ],
    yAxis: [                                    // 直角坐標系中縱軸數組
        {
            type: 'value',                      // 坐標軸類型，縱軸默認為數值軸，類目軸則參考xAxis說明
            boundaryGap: [0.1, 0.1],            // 坐標軸兩端空白策略，數組內數值代表百分比
            splitNumber: 4                      // 數值軸用，分割段數，默認為5
        }
    ],
    series: [
        {
            name: 'ios',                        // 系列名稱
            type: 'line',                       // 圖表類型，折線圖line、散點圖scatter、柱狀圖bar、餅圖pie、雷達圖radar
            data: [112, 23, 45, 56, 233, 343, 454, 89, 343, 123, 45, 123]
        },
        {
            name: 'android',                    // 系列名稱
            type: 'line',                       // 圖表類型，折線圖line、散點圖scatter、柱狀圖bar、餅圖pie、雷達圖radar
            data: [45, 123, 145, 526, 233, 343, 44, 829, 33, 123, 45, 13]
        }
    ]
};
myChart.setOption(option);

...

// 增加些數據------------------
option.legend.data.push('win');
option.series.push({
        name: 'win',                            // 系列名稱
        type: 'line',                           // 圖表類型，折線圖line、散點圖scatter、柱狀圖bar、餅圖pie、雷達圖radar
        data: [112, 23, 45, 56, 233, 343, 454, 89, 343, 123, 45, 123]
});
myChart.setOption(option);

...

// 圖表清空-------------------
myChart.clear();

// 圖表釋放-------------------
myChart.dispose();

legend：圖例，每個圖表最多僅有一個圖例，下圖中頂部中間

toolbox：工具箱，每個圖表最多僅有一個工具箱，下圖中頂部最右邊

xAxis：橫軸數組

yAxis：縱軸數組 axisLine是數組中通用屬性  [{axisLine:{ *** }}]

 3、API說明

　　http://echarts.baidu.com/echarts2/doc/doc.html#AxisAxisline

二、模塊化包引入：

通過require引入，這里說一下require的使用背景

實現JS文件文件的異步加載，避免網頁失去響應

管理模塊之間的依賴性，便於代碼的編寫和維護

 

 

 

引入require考慮到加載時長，可以放到網頁底部，也可以用async屬性，IE不支持，只支持defer，如下寫就可以（data-main指定網頁程序主模塊，若主模塊依賴於其他模塊，需要使用AMD規范定義的的defer()函數）

<script src="js/require.js" defer async="true"  data-main="js/main" ></script>
// main.js
require(['moduleA', 'moduleB', 'moduleC'], function (moduleA, moduleB, moduleC){

　　// some code here

});  

 

下面是echarts官網上的引入的例子：

//from echarts example
require.config({
    packages: [
        {
            name: 'echarts',
            location: '../../src',
            main: 'echarts'
        },
        {
            name: 'zrender',
            location: '../../../zrender/src', // zrender與echarts在同一級目錄
            main: 'zrender'
        }
    ]
});