echart.js 參數解釋

Data參數

獲取容器對象

var canvas = document.getElementById("myCanvas");

渲染

var ctx = canvas.getContext('2d');
var myNewChart = new Chart(ctx);

myNewChart.Line(data); //這種方式是只加載數據集，（缺省options）不修改默認參數（簡稱法一）

數據結構（數據參數設置）

var data = {
            //折線圖需要為每個數據點設置一標簽。這是顯示在X軸上。
            labels: ["January", "February", "March", "April", "May", "June", "July"],
            //數據集（y軸數據范圍隨數據集合中的data中的最大或最小數據而動態改變的）
            datasets: [{
                fillColor: "rgba(220,220,220,0.5)", //背景填充色
                strokeColor: "rgba(220,220,220,1)", //路徑顏色
                pointColor: "rgba(220,220,220,1)", //數據點顏色
                pointStrokeColor: "#fff", //數據點邊框顏色
                data: [10, 59, 90, 81, 56, 55, 40] //對象數據
            }, {
                fillColor: "rgba(151,187,205,0.5)",
                strokeColor: "rgba(151,187,205,1)",
                pointColor: "rgba(151,187,205,1)",
                pointStrokeColor: "#fff",
                data: [28, 48, 40, 19, 96, 27, 200]
            }]
        };
    }); //數據結構（數據參數設置）
    var data = {
        //折線圖需要為每個數據點設置一標簽。這是顯示在X軸上。
        labels: ["January", "February", "March", "April", "May", "June", "July"],
        //數據集（y軸數據范圍隨數據集合中的data中的最大或最小數據而動態改變的）
        datasets: [{
            fillColor: "rgba(220,220,220,0.5)", //背景填充色
            strokeColor: "rgba(220,220,220,1)", //路徑顏色
            pointColor: "rgba(220,220,220,1)", //數據點顏色
            pointStrokeColor: "#fff", //數據點邊框顏色
            data: [10, 59, 90, 81, 56, 55, 40] //對象數據
        }, {
            fillColor: "rgba(151,187,205,0.5)",
            strokeColor: "rgba(151,187,205,1)",
            pointColor: "rgba(151,187,205,1)",
            pointStrokeColor: "#fff",
            data: [28, 48, 40, 19, 96, 27, 200]
        }]
    };
    //圖標參數
    Line.defaults = {
        //網格線是否在數據線的上面
        scaleOverlay: false,
        //是否用硬編碼重寫y軸網格線
        scaleOverride: false,
        //** Required if scaleOverride is true **
        //y軸刻度的個數
        scaleSteps: null,
        //y軸每個刻度的寬度
        scaleStepWidth: 20,
        // Y 軸的起始值
        scaleStartValue: null,
        // Y/X軸的顏色
        scaleLineColor: "rgba(0,0,0,.1)",
        // X,Y軸的寬度
        scaleLineWidth: 1,
        // 刻度是否顯示標簽, 即Y軸上是否顯示文字
        scaleShowLabels: true,
        // Y軸上的刻度,即文字
        scaleLabel: "<%=value%>",
        // 字體
        scaleFontFamily: "'Arial'",
        // 文字大小
        scaleFontSize: 16,
        // 文字樣式
        scaleFontStyle: "normal",
        // 文字顏色
        scaleFontColor: "#666",
        // 是否顯示網格
        scaleShowGridLines: true,
        // 網格顏色
        scaleGridLineColor: "rgba(0,0,0,.05)",
        // 網格寬度
        scaleGridLineWidth: 2,
        // 是否使用貝塞爾曲線? 即:線條是否彎曲
        bezierCurve: true,
        // 是否顯示點數
        pointDot: true,
        // 圓點的大小
        pointDotRadius: 5,
        // 圓點的筆觸寬度, 即:圓點外層白色大小
        pointDotStrokeWidth: 2,
        // 數據集行程(連線路徑)
        datasetStroke: true,
        // 線條的寬度, 即:數據集
        datasetStrokeWidth: 2,
        // 是否填充數據集
        datasetFill: true,
        // 是否執行動畫
        animation: true,
        // 動畫的時間
        animationSteps: 60,
        // 動畫的特效
        animationEasing: "easeOutQuart",
        // 動畫完成時的執行函數
        /*onAnimationComplete: null*/
    }