G2的基礎使用

let arr = []; let chart = new G2.Chart({ container:'Echats', // 唯一id forceFit: true, // 爲true時候 設置寬度不生效 height: window.innerHeight // 設置高度 }) chart.source(arr, { value: { tickCount: 5 // 設置座標軸上刻度點的個數 } }); // 數據源 chart.scale('sales', { // 爲 chart 裝載數據，返回 chart 對象。 tickInterval: 20, alias:'數據(GDP)' // 設置屬性的別名 }); chart.axis('year',{ // 座標軸配置 label:{ textStyle:{ textAlign: 'center', // 文本對齊方式 fill: '#3bf', // 文本的顏色 fontSize: '14', // 字體大小 fontWeight: '600', // 文本粗細 textBaseline: 'top' // 文本基準線 } }, tickLine:{ lineWidth: 2, // 刻度線長 stroke: '#3bf', // 刻度線的顏色 strokeOpacity: 0.8, // 刻度線顏色的透明度 length: 5, // 刻度線的長度 alignWithLabel: true //設爲負值則顯示爲category數據類型特有的樣式 } }); chart.axis('sales',{ label: { textStyle:{ fill:'#3bf' }, formatter: function formatter(text) { return text.replace(/(\d)(?=(?:\d{3})+$)/g, '$1,'); } } }) chart.interval().position('year*sales').opacity(0.8) chart.render();