Echarts學習筆記

先匯入包

const chart = echarts.init(document.getElementById('chart');
const option = {};
chart.setOption(option);複製程式碼

option = {
    xAxis: {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    yAxis: {
        type: 'value'
    },
    legend: {
        data:['china', 'english', 'usa']
    },
    toolbox: {
        feature: {
            saveAsImage: {}
        }
    },
    series: [{
        data: [10,20, 1, 30, 15, 20],
        name: 'china',
        type: 'line',
        smooth: true
    }, {
        data: [7, 11, 7, 20, 1],
        name: 'english',
        type: 'line',
    }, {
        data: [42, 100, 20, 71, 20],
        name: 'usa',
        type: 'line',
        areaStyle: {},
        smooth: true,
    }, {
        data: [],
        type: 'line',
        stack: '總量',
        areaStyle: {}
    }, {
        data: [],
        type: 'line',
        stack: '總量',
        areaStyle: {},
        label: {
            normal: {
                show: true,
                position: 'top'
            }
        }
    }]
};
複製程式碼

series陣列中的每個物件表示一組資料
資料物件的type欄位為這種資料在圖表中的顯示型別
line為折線，areaStyle表示是面積圖，面積的曲邊預設是折線
加上smooth: true，則是曲線
需要x軸y軸的圖表需傳入xAxis yAxis欄位
legend屬性儲存著資料列物件的name屬性值，預設點選圖例會將該資料物件從圖表中清除
toolbox屬性中儲存著圖表工具，saveAsImage將圖表當做圖片下載
stack屬性，設定資料物件是否堆疊
label設定該資料物件的資料標籤是否顯示以及位置 inside為內部

option = {
    yAxis: {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu']
    },
    xAxis: {
        type: 'value'
    },
    series: [{
        data: [1, 2, 3, 4],
        type: 'bar',
        stack: '總量',
    }, {
        data: [1, 8, 4, 2],
        type: 'bar',
        stack: '總量',
    }, {
        data: [2, 2, 10, 6],
        type: 'bar',
    }]
};
複製程式碼

x軸y軸不對調的話，就是柱狀圖，對調就是條形圖
設定stack保持多組資料柱子堆疊在一起

option = {
    series: [
        {
            name: 'any',
            type: 'pie',
            radius: ['50%', '70%'],
            data: [
                {name: 'key1', value: 10},
                {name: 'key2', value: 20},
                {name: 'key3', value: 30}
            ]
        }
    ]
}
複製程式碼

radius: ['50%', '70%'], 表示環形圖
radius: '50%' 不填或填字串表示餅圖

option = {
    xAxis: {},
    yAxis: {},
    series: [
        {
            name: '',
            type: 'scatter',
            symbolSize: 30,
            data: [
                [10,11], [20, 11], [2, 40], [50, 30]
            ]
        }
    ]
}複製程式碼

散點圖

未完待續:)

Echarts學習筆記

相關文章