ECharts · Example

// 虛擬構造同橫縱坐標的兩組數據
var sData1 = (function () {
    var d = [];
    var len = 40;
    var value;
    while (len--) {
        d.push([
            Math.round(Math.random()*10) * (Math.round(Math.random()*10) > 5 ? 1 : -1),
            Math.round(Math.random()*10) * (Math.round(Math.random()*10) > 5 ? 1 : -1),
            Math.round(Math.random()*20)
        ]);
    }
    return d;
})();
var sData2 = (function () {
    var d = [];
    var len = sData1.length;
    for (var i = 0; i < len; i++) {
        d.push([
            sData1[i][0],
            sData1[i][1],
            Math.round(Math.random()*15)
        ]);
    }
    return d;
})();

option = {
    color : ['rgba(255, 69, 0, 0.5)', 'rgba(30, 144, 255, 0.5)'],
    title : {
        text: '餅圖代替散點',
        subtext : '混搭'
    },
    tooltip : {
        trigger: 'item',
         formatter: "{b} : {c} ({d}%)"
    },
    toolbox: {
        show : true,
        feature : {
            mark : {show: true},
            dataView : {show: true, readOnly: false},
            restore : {show: true},
            saveAsImage : {show: true}
        }
    },
    xAxis : [
        {
            type : 'value',
            splitNumber: 2
        }
    ],
    yAxis : [
        {
            type : 'value',
            splitNumber: 2
        }
    ],
    animation: false,
    series : [
        {
            type:'scatter',
            symbol: 'none',
            data: sData1
        },
        {
            type:'scatter',
            symbol: 'none',
            data: sData2
        }
    ]
};

切換主題