echarts的兩種渲染

1. npm install echarts
   客戶端渲染 —— ECharts是一個使用 JavaScript 實現(xiàn)的開源可視化庫?；?html5 的 canvas 繪圖實現(xiàn)。
   實現(xiàn)效果如下：
   
   canvas客戶端渲染.png

因平時項目使用多，故不做詳細描述

2. npm install node-echarts
   服務(wù)端渲染 —— 最終生成一張指定圖片返回

新建 demo/index.js 文件

var node_echarts = require('node-echarts');
node_echarts({
  width: 500, // Image width, type is number.
  height: 500, // Image height, type is number.
  option: {
    xAxis: {
      type: 'category',
      data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    yAxis: {
      type: 'value'
    },
    series: [{
      data: [820, 932, 901, 934, 1290, 1330, 1320],
      type: 'line'
    }]
  }, // Echarts configuration, type is Object.
  //If the path  is not set, return the Buffer of image.
  path: __dirname + '/demo.png', // Path is filepath of the image which will be created.
  enableAutoDispose: true //Enable auto-dispose echarts after the image is created.
})

終端進入demo文件夾執(zhí)行 node index.js 后查看 demo 文件夾生成一張命名為 demo 的png圖片

node_echarts 生成圖片.png

原生canvas

使用canvas繪制線條

ctx.beginPath();
ctx.moveTo(125,125);
ctx.lineTo(125,45);
ctx.lineTo(45,125);
ctx.closePath();
ctx.stroke(); // 實際地繪制出通過 moveTo() 和 lineTo() 方法定義的路徑, 畫出當前路徑的邊框

如何使用 canvas 繪制以下圖形

canvas 繪制圖像.png

function draw() {
  var canvas = document.getElementById('canvas');
  if (canvas.getContext){
  var ctx = canvas.getContext('2d');
    
    
  var option = {
    TimeLine: ['0min 開始構(gòu)建', '10min 開始測試', '15min 結(jié)束'],
    xAxis: ['0min', '20min', '30min'], // x軸數(shù)據(jù)
    yAxis: [10, 16, 15], // y軸數(shù)據(jù)
    // height: 400, // 圖片高度（默認500）
    // width: 400, // 圖片寬度 （默認500）
  }
    
    
  // 繪制時間軸
  var TimeLine = option.TimeLine
  TimeLine.map((item, index) => {
    ctx.fillText(item, 20, 20*(index+1))
  })
    
  
  // 繪制折線圖
  var chartTop = 20*(TimeLine.length+1) // 圖表頂部起始高度
  var chartLeft = 20 // 圖表左側(cè)起始寬度
  var canvasBottom = option.height || 500 // canvas整體高度
  var canvasRight = option.width || 500 // canvas整體寬度
    
   // 繪制邊框線
  ctx.beginPath();
  ctx.moveTo(chartLeft,chartTop);
  ctx.lineTo(chartLeft,canvasBottom);
  ctx.lineTo(canvasRight,canvasBottom);
  ctx.stroke();
  
  
  var chartWidth = canvasRight - 20 // 圖表x軸實際寬度
  var chartHeight = canvasBottom - chartTop // 圖表y軸實際高度
 
  // 坐標軸原始數(shù)據(jù)
  var x = option.xAxis
  var y = option.yAxis
  // 坐標軸渲染數(shù)據(jù)
  var xAxis = []
  var yAxis = []
  var offset = 20 // label偏移量
 
    
  // 繪制x軸
  var xSection = chartWidth/x.length
  var xOffset = xSection / 2 // 中心點偏移量
  x.map((item, index) => {
    ctx.fillText(item, xSection * (index+1) - xOffset, canvasBottom + offset)
    xAxis.push(xSection * (index+1) - xOffset)
  })
    
  // 繪制y軸
  var max = Math.max(...y) // y軸最大值
  var interval = 5 // 自定義y軸間隔
  
  /**
  * 原代碼
  * var sectionNum = max / interval // y軸切割份數(shù)
  * 若interval=5, max=16時，max應(yīng)該為20
  * 所以 切割份數(shù)必須向上取整，然后再根據(jù)切割份數(shù)重新定義y軸最大值
  */
  var sectionNum = Math.ceil(max / interval) // y軸切割份數(shù)
  max = interval * sectionNum // 根據(jù)切割份數(shù)重新定義最大值
  
    
  var ySection = chartHeight / sectionNum // y軸每個間隔區(qū)域的高度
  var yOffset = ySection / 2 // 中心點偏移量
 
  for (var i=0;i<sectionNum;i++) {
    var itemy = canvasBottom - ySection * (i + 1) // y軸分割線y坐標
    ctx.fillText( interval * (i+1), chartLeft - offset, itemy)
    yAxis.push(canvasBottom - chartHeight/max*(y[i]))
    
    // 繪制y軸間隔線
    ctx.beginPath();
    ctx.moveTo(chartLeft, itemy);
    ctx.lineTo(canvasRight, itemy);
    ctx.strokeStyle = "#eee";//線條的顏色
    ctx.stroke();
  }
  
  // 繪制圖表坐標點
  ctx.beginPath();
  xAxis.map((item, index) => {
    ctx.lineTo(item,yAxis[index])
    ctx.strokeStyle = "#dc4e4e";//線條的顏色
  })
  ctx.stroke();  
  }
}

實際運行效果

node-canvas

1. brew install pkg-config cairo pango libpng jpeg giflib
   此時執(zhí)行 npm install canvas 安裝失敗
   
   安裝失敗.png

2. 執(zhí)行 brew install libffi 然后分別按照提示執(zhí)行以下步驟
   brew reinstall libffi
export PKG_CONFIG_PATH="/usr/local/opt/libffi/lib/pkgconfig"
   
   安裝環(huán)境成功.png

3. npm install canvas 安裝成功

4. 新建 demo/canvas.js 文件

const { createCanvas, loadImage } = require('canvas')
var fs = require('fs')
var resolve = require('path').resolve


const canvas = createCanvas(200, 200)
const ctx = canvas.getContext('2d')

// Write "Awesome!"
ctx.font = '30px Impact'
ctx.rotate(0.1)
ctx.fillText('Awesome!', 50, 100)

// Draw line under text
var text = ctx.measureText('Awesome!')
ctx.strokeStyle = 'rgba(0,0,0,0.5)'
ctx.beginPath()
ctx.lineTo(50, 102)
ctx.lineTo(50 + text.width, 102)
ctx.stroke()


var outPath = resolve(__dirname, 'rectangle.png')
canvas.createPNGStream().pipe(fs.createWriteStream(outPath))

5. 終端執(zhí)行 node canvas.js 成功生成圖片
   
   node_canvas 生成圖片.png

具體使用方式參考https://github.com/Automattic/node-canvas
或demo示例https://github.com/Automattic/node-canvas/tree/master/examples