在开发中，我们会遇到需要在前端显示图表的业务需求。在本文中将介绍如何使用echart插件绘制业务需求的图表，包括：“绘制饼状图”、“绘制折线图”、“绘制柱状图”。
1、绘制饼状图。
前端HTML代码：
<div class="report_pie">
<div id="pie"></div>
</div>
Js请求后端代码：
//销售大类数据绘图
function salesPie (date1, date2, shopID) {
var categoryParentNameArr = [];
var message = new Array();
$.ajax({
url: retailTrade_url,
type: mothod_post,
async: true,
dataType: "json",
data: { "datetimeStart": date1, "datetimeEnd": date2, "shopID": shopID },
success: function succFunction (data) {
console.log(data);
if (data.ERROR == "EC_NoError") {
if (data.reportList.length > 0) {
for (var i = 0; i < data.reportList.length; i++) {
var totalAmountSummaryarr = {};
categoryParentNameArr[i] = data.reportList[i].totalAmountSummary.toFixed(2) < 0 ? data.reportList[i].categoryParentName + "(退货)" : data.reportList[i].categoryParentName;;
totalAmountSummaryarr["value"] = data.reportList[i].totalAmountSummary.toFixed(2) < 0 ? Math.abs(data.reportList[i].totalAmountSummary.toFixed(2)) : data.reportList[i].totalAmountSummary.toFixed(2);
totalAmountSummaryarr["name"] = data.reportList[i].totalAmountSummary.toFixed(2) < 0 ? data.reportList[i].categoryParentName + "(退货)" : data.reportList[i].categoryParentName;
message.push(totalAmountSummaryarr);
}
$(".noData").remove();
//绘图
pie(categoryParentNameArr, message);
} else {
$(".noData").remove();
pie(categoryParentNameArr, message);
$("#pie").append("<div class=\'noData\'><i class=\'layui-icon layui-icon-loading\' style=\'font-size: 60px; color: #1E9FFF;\'></i> <br>暂时无销售数据</div>");
}
}
},
error: function (XMLHttpRequest, textStatus, errorThrown) {
layer.msg("服务器错误");
}
})
}
首先声明两个数组变量：
var categoryParentNameArr = [];
var message = new Array();
然后请求服务器后端，返回数据，例如返回数据如下：
遍历后端返回的数据，将分类名称放到categoryParentNameArr数组。声明一个对象totalAmountSummaryarr，对象的value存储总额，对象的name存储分类名称。然后将对象totalAmountSummaryarr放到message数组中。
遍历完成后，调用pie函数，传入categoryParentNameArr和message数组作为参数：
pie(categoryParentNameArr, message);
//饼图
function pie (categoryParentNameArr, totalAmountSummaryarr) {
var myChart = echarts.init($(\'#pie\').get(0))
// 指定图表的配置项和数据
option = {
title: {
text: \'销售汇总\',
x: \'left\'
},
tooltip: {
trigger: \'item\',
formatter: "{a} <br/>{b} : {c} ({d}%)"
},
legend: {
type: \'scroll\',
orient: \'vertical\',
right: 0,
top: 50,
bottom: 20,
data: categoryParentNameArr,
zlevel: 0,
},
series: [
{
name: \'销售大类占比\',
type: \'pie\',
radius: \'60%\',
center: [\'40%\', \'60%\'],
data: totalAmountSummaryarr,
zlevel: 1,
itemStyle: {
emphasis: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: \'rgba(0, 0, 0, 0.5)\'
}
},
label: {//将数量与百分比一起显示
show: true
// normal: {
// formatter: \'{b}:{c}: ({d}%)\',
// textStyle: {
// fontWeight: \'normal\',
// fontSize: 15
// }
// }
},
}
]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
}
初始化echart和配置图表option：
var myChart = echarts.init($(\'#pie\').get(0))
// 指定图表的配置项和数据
option =
……
设置标题title、提示框tooltip、自定义文本说明legend、数据绑定series，显示图表：
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
效果图如下：
2、绘制折线图。
前端HTML代码：
<!--月销售走势-->
<br />
<div class="salesTrends">
<h5>2019-02-18日近七天销售走势</h5>
<hr />
<div id="sell"></div>
</div>
JS请求后端代码：
function yeardate (date1, date2, shopID) {
var totalAmountArrar = new Array();
var totalGrossArrar = new Array();
var sum = 0;
$.ajax({
url: MonthlyReportSummary_URL,
type: mothod_post,
async: true,
dataType: "json",
data: { "datetimeStart": date1, "datetimeEnd": date2, "shopID": shopID },
success: function succFunction (data) {
console.log(data);
//渲染绘图数据
if (data[\'reportList\'].length != 0) {
for (var i = 1; i <= 12; i++) {
$.each(data[\'reportList\'], function (j, val) {
if (i == val[\'dateTime\'].substring(5, 7)) {
totalAmountArrar[sum] = val[\'totalAmount\'].toFixed(2);
totalGrossArrar[sum] = val[\'totalGross\'].toFixed(2);
return false;
} else {
totalAmountArrar[sum] = "0.00";
totalGrossArrar[sum] = "0.00";
}
});
sum++;
}
sketch(monthArrar, totalAmountArrar, totalGrossArrar);//绘图
sum = 0;
} else {
for (var i = 1; i <= 12; i++) {
monthArrar[sum] = i + "月";
totalAmountArrar[sum] = "0.00";
totalGrossArrar[sum] = "0.00";
sum++;
}
sketch(monthArrar, totalAmountArrar, totalGrossArrar);//绘图
sum = 0;
}
},
error: function (XMLHttpRequest, textStatus, errorThrown) {
layer.msg("服务器错误");
}
})
}
声明两个数组：
var totalAmountArrar = new Array();
var totalGrossArrar = new Array();
然后请求服务器后端，返回数据，例如返回数据如下：
遍历返回的数据，totalAmountArrar数组存放销售额，totalGrossArrar数组存放毛利率：
for (var i = 1; i <= 12; i++) {
$.each(data[\'reportList\'], function (j, val) {
if (i == val[\'dateTime\'].substring(5, 7)) {
totalAmountArrar[sum] = val[\'totalAmount\'].toFixed(2);
totalGrossArrar[sum] = val[\'totalGross\'].toFixed(2);
return false;
} else {
totalAmountArrar[sum] = "0.00";
totalGrossArrar[sum] = "0.00";
}
});
sum++;
}
遍历完后，调用sketch函数：
sketch(monthArrar, totalAmountArrar, totalGrossArrar);//绘图monthArrar为常量：
const monthArrar = [\'1月\', \'2月\', \'3月\', \'4月\', \'5月\', \'6月\', \'7月\', \'8月\', \'9月\', \'10月\', \'11月\', \'12月\'];|sketch函数，使用echart绘制折线图：
//业绩图
function sketch (arr, arr1, arr2) {
var myChart = echarts.init($(\'#sell\').get(0))
// 指定图表的配置项和数据
var trendsoption = {
title: {
},
tooltip: {},
grid: {//控制图表大小
left: \'4%\',
right: \'4%\',
bottom: \'3%\',
containLabel: true
},
legend: {
data: [\'销量额\', \'销售毛利\'],
y: \'top\',
icon: "circle"
},
xAxis: {
data: arr
},
yAxis: {},
series: [{
name: \'销量额\',
type: \'line\',
label: {
normal: {
show: true,
position: \'top\'
}
},
data: arr1
},
{
name: \'销售毛利\',
type: \'line\',
label: {
normal: {
show: true,
position: \'top\'
}
},
data: arr2
}
]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(trendsoption);
}
效果图如下：
3、绘制柱状图。
前端HTML代码：
<!--业绩对比-->
<br />
<div class="results">
<br>
<div id="salesPerformance"></div>
</div>
JS请求后端代码：
//销售人员的业绩绘图
function salesPerformanceOfSalesStaff (date1, date2, shopID) {
var staffName = [];
var totalAmount = [];
var NO = [];
var grossMargin = [];
$.ajax({
url: retailTradeDailyReportByStaff_url,
type: mothod_post,
async: true,
dataType: "json",
data: { "datetimeStart": date1, "datetimeEnd": date2, "shopID": shopID },
success: function succFunction (data) {
console.log(data);
if (data.ERROR == "EC_NoError") {
if (data.retailTradeDailyReportByStaff.length > 0) {
for (var i = 0; i < data.retailTradeDailyReportByStaff.length; i++) {
staffName[i] = data.retailTradeDailyReportByStaff[i].staffName;
totalAmount[i] = data.retailTradeDailyReportByStaff[i].totalAmount.toFixed(2);
NO[i] = data.retailTradeDailyReportByStaff[i].NO;
grossMargin[i] = data.retailTradeDailyReportByStaff[i].grossMargin.toFixed(2);
}
$(".performance").remove();
results(staffName, totalAmount, NO, grossMargin);
} else {
$(".performance").remove();
results(staffName, totalAmount, NO, grossMargin);
$("#salesPerformance").append("<div class=\'performance\'><i class=\'layui-icon layui-icon-loading\' style=\'font-size: 60px; color: #1E9FFF;\'></i> <br>暂无销售业绩</div>");
}
} else {
if (data.msg == "" || data.msg) {
layer.msg(服务器错误);
} else {
layer.msg(data.msg);
}
}
},
error: function (XMLHttpRequest, textStatus, errorThrown) {
layer.msg("服务器错误");
}
})
}
声明了四个数组：
var staffName = [];
var totalAmount = [];
var NO = [];
var grossMargin = [];
然后请求服务器后端，返回数据，例如返回数据如下：
遍历返回的数据，staffName数组存员工名称，totalAmount数组存放销售额，NO数组存放销售笔数、grossMargin数组存放销售毛利：
for (var i = 0; i < data.retailTradeDailyReportByStaff.length; i++) {
staffName[i] = data.retailTradeDailyReportByStaff[i].staffName;
totalAmount[i] = data.retailTradeDailyReportByStaff[i].totalAmount.toFixed(2);
NO[i] = data.retailTradeDailyReportByStaff[i].NO;
grossMargin[i] = data.retailTradeDailyReportByStaff[i].grossMargin.toFixed(2);
}
遍历完成后，调用results函数：
results(staffName, totalAmount, NO, grossMargin);result函数，使用echart绘制柱状图：
查看代码
//销售人员业绩图
function results (staffName, totalAmount, NO, grossMargin) {
var myChart = echarts.init($(\'#salesPerformance\').get(0))
// 指定图表的配置项和数据
var posList = [
\'left\', \'right\', \'top\', \'bottom\',
\'inside\',
\'insideTop\', \'insideLeft\', \'insideRight\', \'insideBottom\',
\'insideTopLeft\', \'insideTopRight\', \'insideBottomLeft\', \'insideBottomRight\'
];
myChart.configParameters = {
rotate: {
min: -90,
max: 90
},
align: {
options: {
left: \'left\',
center: \'center\',
right: \'right\'
}
},
verticalAlign: {
options: {
top: \'top\',
middle: \'middle\',
bottom: \'bottom\'
}
},
position: {
options: echarts.util.reduce(posList, function (map, pos) {
map[pos] = pos;
return map;
}, {})
},
distance: {
min: 0,
max: 100
}
};
myChart.config = {
rotate: 90,
align: \'left\',
verticalAlign: \'middle\',
position: \'insideBottom\',
distance: 15,
onChange: function () {
var labelOption = {
normal: {
rotate: app.config.rotate,
align: app.config.align,
verticalAlign: app.config.verticalAlign,
position: app.config.position,
distance: app.config.distance
}
};
myChart.setOption({
series: [{
label: labelOption
}, {
label: labelOption
}, {
label: labelOption
}, {
label: labelOption
}]
});
}
};
var labelOption = {
normal: {
show: true,
position: myChart.config.position,
distance: myChart.config.distance,
align: myChart.config.align,
verticalAlign: myChart.config.verticalAlign,
rotate: myChart.config.rotate,
formatter: \'{c} {name|{a}}\',
fontSize: 14,
rich: {
name: {
textBorderColor: \'#fff\'
}
}
}
};
option = {
title: {
text: \'销售业绩对比图\',
x: \'left\'
},
color: [\'#003366\', \'#006699\', \'#4cabce\'],
tooltip: {
trigger: \'axis\',
axisPointer: {
type: \'shadow\'
}
},
grid: {//控制图表大小
left: \'2%\',
right: \'2%\',
bottom: \'1%\',
containLabel: true
},
legend: {
data: [\'销售总额\', \'销售毛利\', \'销售笔数\']
},
// toolbox: {
// show: true,
// orient: \'vertical\',
// left: \'right\',
// top: \'center\',
// feature: {
// mark: { show: true },
// dataView: { show: true, readOnly: false },
// magicType: { show: true, type: [\'line\', \'bar\', \'stack\', \'tiled\'] },
// restore: { show: true },
// saveAsImage: { show: true }
// }
// },
calculable: true,
xAxis: [
{
type: \'category\',
axisTick: { show: false },
data: staffName,
axisPointer: {
type: "shadow"
}
}
],
yAxis: [
{
type: \'value\',
name: \'销售金额\',
min: 0,
max: function (value) {
return value.max;
},
axisLabel: {
formatter: \'{value}\'
},
nameLocation: \'center\',
nameGap: 50,
splitLine: { show: false },
axisLine: {
lineStyle: {
color: {
type: \'linear\',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [{
offset: 0, color: \'#003366\' // 0% 处的颜色
}, {
offset: 1, color: \'#4cabce\' // 100% 处的颜色
}],
global: false // 缺省为 false
}
}
}
},
{
type: \'value\',
name: \'销售笔数\',
min: 0,
max: function (value) {
return value.max;
},
axisLabel: {
formatter: \'{value}\'
},
nameLocation: \'center\',
nameGap: 30,
nameRotate: -90,
nameTextStyle: {
color: "#4cabce"
},
splitLine: { show: false },
axisLine: {
lineStyle: {
color: "#4cabce"
}
}
}
],
series: [
{
name: \'销售总额\',
type: \'bar\',
barGap: 0,
barWidth: 30,
label: labelOption,
data: totalAmount
},
{
name: \'销售毛利\',
type: \'bar\',
barWidth: 30,
label: labelOption,
data: grossMargin
},
{
name: \'销售笔数\',
type: \'bar\',
barWidth: 30,
label: labelOption,
data: NO,
yAxisIndex: 1,
}
]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
}效果图如下：