node结合echarts后台生成图片并转成base64码

废话不多说，直接上步骤：

一、开发工具及环境

1.开发工具：webstorm、apipost（下载方法自行百度）
2.开发环境：node.js（可以去官网免费下载一路next安装即可https://nodejs.org/en/）

image.png
（1）安装后查看是否安装成功 win+R然后cmd打开命令行输入node -v和npm -v查看版本信息
image.png

二、开始写代码

用webstrom在工作目录下创建node项目

image.png
image.png

点击create
项目创建好后打开 控制台安装node-echarts依赖包（核心功能靠此包）

image.png
打开目录下的app.js删掉原有内容写下如下代码

var express = require('express');
var path = require('path');
var logger = require('morgan');
var indexRouter = require('./routes/index');
var body_parser = require("body-parser")

var app = express();

app.use(logger('dev'));
//设置请求头格式
app.use(body_parser.urlencoded({extended: false}))
app.use(body_parser.json())
//挂载静态资源
app.use(express.static(path.join(__dirname, 'public')));

app.use('/image', indexRouter);


module.exports = app;

1.在跟目录下创建目录echartsType，并创建echartsBar.js

image.png

echartsBar.js代码如下

//构造柱状图数据
var echartBar = (data) => {
    var {title,subtitle,legendData,xData,seriesData} = data;
    seriesData = seriesData.map((item,index,arr) => {
        return {
            name: item.name,
            type: "bar",
            label:{
                show:true,
                formatter: '{c}',
                position:"top"
            },
            data: item.data
        }
    })
    var option = {

        color:[
            '#ff7f50', '#87cefa', '#da70d6', '#32cd32', '#6495ed',
            '#ff69b4', '#ba55d3', '#cd5c5c', '#ffa500', '#40e0d0',
            '#1e90ff', '#ff6347', '#7b68ee', '#00fa9a', '#ffd700',
            '#6b8e23', '#ff00ff', '#3cb371', '#b8860b', '#30e0e0'
        ],
        title: {
            text: title,
            subtext: subtitle
        },

        legend: {
            data: legendData,
            right:50
        },
        xAxis: [
            {
                type: "category",
                data:xData
            }
        ],
        yAxis: [
            {
                type: "value"
            }
        ],
        series: seriesData
    }

    return option
}

module.exports = echartBar;

打开routes下的index.js开始写接口

//模块引入
const express = require('express');
const router = express.Router();
//生成echart图片模块
const node_echarts = require('node-echarts');
const path = require("path");
const fs = require("fs");
const ECHARTS_PIE = require("../echartsType/echartsPie");
const ECHARTS_BAR = require("../echartsType/echartsBar");
const ECHARTS_LINE = require("../echartsType/echartsLine")
const ECHARTS_CHINA_MAP = require("../echartsType/echartsChinaMap")

//返回结果集
var resultData = {
    status: "",
    data: {},
    msg: ""
};

//post请求柱状图
router.post('/bar', function (req, res, next) {
    var data = req.body;
    var {title, legendData, xData, seriesData} = data;
    if (title && seriesData.length !== 0 && legendData.length !== 0 && xData.length !== 0) {
        var option = ECHARTS_BAR(data);
        //生成饼图
        node_echarts({
            width: 500,
            height: 500,
            option: option,
            //创建图片地址
            path: path.join(__dirname, `../public/images/image.png`),
            enableAutoDispose: true
        });
        //读取图片并转化二进制流
        let bitmap = fs.readFileSync(path.join(__dirname, '../public/images/image.png'));
        //将图片转成base64编码
        resultData.data = `data:image/png;base64,` + Buffer.from(bitmap, 'binary').toString('base64');
        resultData.status = 200;
        resultData.msg = "柱状图获取成功";
        res.send(resultData);
        res.end();
        //删除生成图片，清理痕迹
        //fs.unlinkSync(path.join(__dirname, '../public/images/image.png'));
    } else {
        resultData.data = "";
        resultData.status = 400;
        resultData.msg = "必传字段不可为空";
        res.send(resultData);
        res.end();
    }
});

module.exports = router;

控制台运行程序接口为http://localhost:3000/image/bar
请求数据为

{
    "title":"柱状图",
    "subtitle":"副标题",
    "legendData":[
        "蒸发量",
        "降水量"
    ],
    "xData":[
        "1月",
        "2月",
        "3月",
        "4月",
        "5月",
        "6月",
        "7月",
        "8月",
        "9月",
        "10月",
        "11月",
        "12月"
    ],
    "seriesData":[
        {
            "name":"蒸发量",
            "data":[
                2,
                4.9,
                7,
                23.2,
                25.6,
                76.7,
                135.6,
                162.2,
                32.6,
                20,
                6.4,
                3.3
            ]
        },
        {
            "name":"降水量",
            "data":[
                2.6,
                5.9,
                9,
                26.4,
                28.7,
                70.7,
                175.6,
                182.2,
                48.7,
                18.8,
                6,
                2.3
            ]
        }
    ]
}

用apipost测试接口

image.png

public下的images会生成图片

image.png