| /* |
| title: Large Scale Bar Chart |
| category: bar |
| titleCN: 大数据量柱图 |
| difficulty: 5 |
| */ |
| |
| |
| const dataCount = 5e5; |
| const data = generateData(dataCount); |
| |
| option = { |
| title: { |
| text: echarts.format.addCommas(dataCount) + ' Data', |
| left: 10 |
| }, |
| toolbox: { |
| feature: { |
| dataZoom: { |
| yAxisIndex: false |
| }, |
| saveAsImage: { |
| pixelRatio: 2 |
| } |
| } |
| }, |
| tooltip: { |
| trigger: 'axis', |
| axisPointer: { |
| type: 'shadow' |
| } |
| }, |
| grid: { |
| bottom: 90 |
| }, |
| dataZoom: [{ |
| type: 'inside' |
| }, { |
| type: 'slider' |
| }], |
| xAxis: { |
| data: data.categoryData, |
| silent: false, |
| splitLine: { |
| show: false |
| }, |
| splitArea: { |
| show: false |
| } |
| }, |
| yAxis: { |
| splitArea: { |
| show: false |
| } |
| }, |
| series: [{ |
| type: 'bar', |
| data: data.valueData, |
| // Set `large` for large data amount |
| large: true |
| }] |
| }; |
| |
| function generateData(count: number) { |
| let baseValue = Math.random() * 1000; |
| let time = +new Date(2011, 0, 1); |
| let smallBaseValue: number; |
| |
| function next(idx: number) { |
| smallBaseValue = idx % 30 === 0 |
| ? Math.random() * 700 |
| : (smallBaseValue + Math.random() * 500 - 250); |
| baseValue += Math.random() * 20 - 10; |
| return Math.max( |
| 0, |
| Math.round(baseValue + smallBaseValue) + 3000 |
| ); |
| } |
| |
| const categoryData = []; |
| const valueData = []; |
| |
| for (let i = 0; i < count; i++) { |
| categoryData.push(echarts.format.formatTime('yyyy-MM-dd\nhh:mm:ss', time, false)); |
| valueData.push(next(i).toFixed(2)); |
| time += 1000; |
| } |
| |
| return { |
| categoryData: categoryData, |
| valueData: valueData |
| }; |
| } |
| |
| export {} |