chart-kit.js 2.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130
  1. // npm install echarts canvas
  2. // const fs = require('fs');
  3. const { createCanvas } = require('canvas');
  4. const echarts = require('echarts');
  5. module.exports = class ChartKit {
  6. static printBar(yData, xDataLeft, xDataRight) {
  7. // 创建一个 canvas 实例
  8. const width = 3840; // 宽度
  9. const height = 2160; // 高度
  10. const canvas = createCanvas(width, height);
  11. // 初始化 ECharts 实例
  12. const chart = echarts.init(canvas);
  13. let option = {
  14. tooltip: {
  15. trigger: 'axis',
  16. axisPointer: {
  17. type: 'shadow'
  18. }
  19. },
  20. legend: {
  21. data: ['Profit', 'Expenses', 'Income']
  22. },
  23. grid: {
  24. left: '3%',
  25. right: '4%',
  26. bottom: '3%',
  27. containLabel: true
  28. },
  29. xAxis: [
  30. {
  31. type: 'value'
  32. }
  33. ],
  34. yAxis: [
  35. {
  36. type: 'category',
  37. axisTick: {
  38. show: false
  39. },
  40. data: yData
  41. }
  42. ],
  43. series: [
  44. {
  45. name: 'Expenses',
  46. type: 'bar',
  47. stack: 'Total',
  48. label: {
  49. show: false,
  50. position: 'left'
  51. },
  52. emphasis: {
  53. focus: 'series'
  54. },
  55. data: xDataLeft
  56. },
  57. {
  58. name: 'Income',
  59. type: 'bar',
  60. stack: 'Total',
  61. label: {
  62. show: false
  63. },
  64. emphasis: {
  65. focus: 'series'
  66. },
  67. data: xDataRight
  68. }
  69. ]
  70. };
  71. // 设置图表的配置项和数据
  72. chart.setOption(option);
  73. // 等待图表渲染完毕
  74. // setTimeout(() => {
  75. // const buffer = canvas.toBuffer('image/png');
  76. // fs.writeFileSync('chart.png', buffer);
  77. // chart.dispose(); // 释放图表实例,防止内存泄漏
  78. // console.log('图表已保存为 chart.png');
  79. // }, 1000); // 设置一个延时以确保图表渲染完成
  80. return option
  81. }
  82. // dataList : [[x1,y1], [x2,y2], ...]
  83. static printPointChart(dataList) {
  84. // 创建一个 canvas 实例
  85. const width = 3840; // 宽度
  86. const height = 2160; // 高度
  87. const canvas = createCanvas(width, height);
  88. // 初始化 ECharts 实例
  89. const chart = echarts.init(canvas);
  90. // ECharts 配置项
  91. let option = {
  92. title: {
  93. text: '散点图'
  94. },
  95. xAxis: {},
  96. yAxis: {},
  97. series: [
  98. {
  99. symbolSize: 10,
  100. data: dataList,
  101. type: 'scatter'
  102. }
  103. ]
  104. };
  105. // 设置图表的配置项和数据
  106. chart.setOption(option);
  107. // 等待图表渲染完毕
  108. // setTimeout(() => {
  109. // const buffer = canvas.toBuffer('image/png');
  110. // fs.writeFileSync('chart.png', buffer);
  111. // chart.dispose(); // 释放图表实例,防止内存泄漏
  112. // console.log('图表已保存为 chart.png');
  113. // }, 1000); // 设置一个延时以确保图表渲染完成
  114. return option
  115. }
  116. }