廢話不多說(shuō)赫粥，直接上步驟：
一舀寓、開(kāi)發(fā)工具及環(huán)境
1.開(kāi)發(fā)工具：webstorm蔗候、apipost（下載方法自行百度）
2.開(kāi)發(fā)環(huán)境：node.js（可以去官網(wǎng)免費(fèi)下載一路next安裝即可https://nodejs.org/en/）
image.png
（1）安裝后查看是否安裝成功 win+R然后cmd打開(kāi)命令行輸入node -v和npm -v查看版本信息
image.png
二垒酬、開(kāi)始寫(xiě)代碼
用webstrom在工作目錄下創(chuàng)建node項(xiàng)目
image.png
image.png
點(diǎn)擊create
項(xiàng)目創(chuàng)建好后打開(kāi) 控制臺(tái)安裝node-echarts依賴包（核心功能靠此包）
image.png
打開(kāi)目錄下的app.js刪掉原有內(nèi)容寫(xiě)下如下代碼
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'));
//設(shè)置請(qǐng)求頭格式
app.use(body_parser.urlencoded({extended: false}))
app.use(body_parser.json())
//掛載靜態(tài)資源
app.use(express.static(path.join(__dirname, 'public')));
app.use('/image', indexRouter);
module.exports = app;
1.在跟目錄下創(chuàng)建目錄echartsType王带，并創(chuàng)建echartsBar.js
image.png
echartsBar.js代碼如下
//構(gòu)造柱狀圖數(shù)據(jù)
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;
打開(kāi)routes下的index.js開(kāi)始寫(xiě)接口
//模塊引入
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")
//返回結(jié)果集
var resultData = {
status: "",
data: {},
msg: ""
};
//post請(qǐng)求柱狀圖
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,
//創(chuàng)建圖片地址
path: path.join(__dirname, `../public/images/image.png`),
enableAutoDispose: true
});
//讀取圖片并轉(zhuǎn)化二進(jìn)制流
let bitmap = fs.readFileSync(path.join(__dirname, '../public/images/image.png'));
//將圖片轉(zhuǎn)成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;
控制臺(tái)運(yùn)行程序接口為http://localhost:3000/image/bar
請(qǐng)求數(shù)據(jù)為
{
"title":"柱狀圖",
"subtitle":"副標(biāo)題",
"legendData":[
"蒸發(fā)量",
"降水量"
],
"xData":[
"1月",
"2月",
"3月",
"4月",
"5月",
"6月",
"7月",
"8月",
"9月",
"10月",
"11月",
"12月"
],
"seriesData":[
{
"name":"蒸發(fā)量",
"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測(cè)試接口
image.png
public下的images會(huì)生成圖片
image.png
