数据类型
我这里用了三种数据类型
- 饼图
var pieData = [{'name' : 'aaa', 'value' : 2},{'name' : 'bbb', 'value' : 2},{'name' : 'vvv', 'value' : 2},{'name' : 'ddd', 'value' : 2}];
2.柱状图或者折现图(Echarts的DataSet格式1)；
var barOrLine1 = [["product","当前任务数","当前商品数","完成任务数","完成商品数"],["挑货",3,12,0,0],["出库",0,0,0,0],["放置",0,0,0,0],["打标",0,0,0,0]];
3.柱状图或者折现图(Echarts的DataSet格式2)；
var barOrLine2 = [{"product":"2019-04-12","创业A订单数":"0","创业A产量":"0"},{"product":"2019-04-13","创业A订单数":"0","创业A产量":"0"},{"product":"2019-04-14","创业A订单数":"0","创业A产量":"0"},{"product":"2019-04-15","创业A订单数":"0","创业A产量":"0"}]
实现代码
var swiftcharts = swiftcharts || (function() {
var utils = {
dataShow: function(JSONData, chartsType) {
// this._includeLinkStyle('');
var table = '<table class="table table-hover table-bordered table-striped text-center" style="color:#000">';
var arrData = typeof JSONData != 'object' ? JSON.parse(JSONData) : JSONData;
var row = "<tr>";
if (arrData.length >= 2) {
if (arrData[1] instanceof Array) {
for (var i = 0,
l = arrData[0].length; i < l; i++) {
row += "<th class='text-center'>" + (arrData[0][i] == 'product' ? '': arrData[0][i]) + '</th>';
}
} else {
if (chartsType === _chartsType[0]) {
var rowTd = "<tr>";
for (var i = 0,
l = arrData.length; i < l; i++) {
row += "<th class='text-center'>" + (arrData[i].name) + '</th>';
rowTd += "<td class='text-center'>" + (arrData[i].value) + '</td>';
}
table += row + "</tr>";
table += rowTd + "</tr>";
table += "</table>";
return table;
}
var ShowLabel = new Array();
if (JSONData != null) {
var keySet = Object.keys(JSONData[0]);
for (key in keySet) {
if (typeof(keySet[key]) == 'string') {
ShowLabel.push(keySet[key]);
}
}
};
for (var i = 0,
l = ShowLabel.length; i < l; i++) {
row += "<th class='text-center'>" + (ShowLabel[i] == 'product' ? '': ShowLabel[i]) + '</th>';
}
}
}
table += row + "</tr>";
for (var i = 1; i <= arrData.length; i++) {
var row = "<tr>";
for (var index in arrData[i]) {
var value = arrData[i][index] === "." ? "": arrData[i][index];
row += '<td>' + value + '</td>';
}
table += row + "</tr>";
}
table += "</table>";
return table;
},
dataExport: function(JSONData, chartsType) {
var excel = this.dataShow(JSONData, chartsType);
this.dataExportUrtils(excel, 'report');
},
dataExportUrtils: function(excel, FileName) {
var excelFile = "<html xmlns:o='urn:schemas-microsoft-com:office:office' xmlns:x='urn:schemas-microsoft-com:office:excel' xmlns='http://www.w3.org/TR/REC-html40'>";
excelFile += '<meta http-equiv="content-type" content="application/vnd.ms-excel; charset=UTF-8">';
excelFile += '<meta http-equiv="content-type" content="application/vnd.ms-excel';
excelFile += '; charset=UTF-8">';
excelFile += "<head>";
excelFile += "<!--[if gte mso 9]>";
excelFile += "<xml>";
excelFile += "<x:ExcelWorkbook>";
excelFile += "<x:ExcelWorksheets>";
excelFile += "<x:ExcelWorksheet>";
excelFile += "<x:Name>";
excelFile += "{worksheet}";
excelFile += "</x:Name>";
excelFile += "<x:WorksheetOptions>";
excelFile += "<x:DisplayGridlines/>";
excelFile += "</x:WorksheetOptions>";
excelFile += "</x:ExcelWorksheet>";
excelFile += "</x:ExcelWorksheets>";
excelFile += "</x:ExcelWorkbook>";
excelFile += "</xml>";
excelFile += "<![endif]-->";
excelFile += "</head>";
excelFile += "<body>";
excelFile += excel;
excelFile += "</body>";
excelFile += "</html>";
var uri = 'data:application/vnd.ms-excel;charset=utf-8,' + encodeURIComponent(excelFile);
var link = document.createElement("a");
link.href = uri;
link.style = "visibility:hidden";
link.download = FileName + ".xls";
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
}
};
var _chartsType = ['pie', 'line', 'bar'];
var _privateParams = {
"title": {},
"legend": {},
"grid": {},
"color": {},
"tooltip": {},
"toolbox": {},
"series": {},
"dataset": {},
"xAxis": {},
"yAxis": {}
};
var _includeLinkStyle = function(url) {
var link = document.createElement("link");
link.rel = "stylesheet";
link.type = "text/css";
link.href = url;
document.getElementsByTagName("head")[0].appendChild(link);
};
function initParams(opts) {
_privateParams = Object.assign(_privateParams, opts);
};
function jsonIsEmpty(json) {
var arr = Object.keys(json);
if (arr.length == 0) {
return true;
}
return false;
};
function getSeries(mainData, chartsType){
var serierList = new Array();
var seriesLength = 0;
if(mainData.length >=2){
if (mainData[1] instanceof Array) {
seriesLength = mainData[0].length-1;
}else{
if (chartsType === _chartsType[0]) {
serierList.push({
name: '详细数据',
type: 'pie',
radius: '50%',
center: ['50%', '50%'],
data: mainData,
itemStyle: {
emphasis: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
},
label: {
normal: {
show: false
}
}
});
return serierList;
}
seriesLength = (Object.keys(mainData[0]).length) -1
}
}
for(var i=0; i<seriesLength; i++){
serierList.push({
type: chartsType,
itemStyle : {
normal: {
label : {
show: true,
position: 'top',
textStyle : {
color : '#000',
fontSize : 15
}
},
barBorderRadius: 7
},
emphasis: {
barBorderRadius: 7
}
}
}
);
}
return serierList;
};
function getOptions(chartsType, mainData, chartsTitle, series) {
var _option = null;
var _title = jsonIsEmpty(_privateParams.title) ? {
title: {
text: chartsTitle,
x: '10%',
textStyle: {
color: '#000'
}
}
}: _privateParams.title;
_tooltip = jsonIsEmpty(_privateParams.tooltip) ? {
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
}
}: _privateParams.tooltip,
_legend = jsonIsEmpty(_privateParams.legend) ? {
legend: {}
}: _privateParams.legend,
_grid = jsonIsEmpty(_privateParams.grid) ? {
grid: {
backgroundColor: '#000'
}
}: _privateParams.grid,
_color = jsonIsEmpty(_privateParams.color) ? {
color: ['#e24241', '#f19d11', '#f06e3c', '#1563ac', '#f8d84b', '#89e5b0', '#03a5c1', '#e24241', '#f19d11', '#007e09', '#1563ac', '#ff35f8', '#f8d84b', '#779d85', '#6e1bde', '#f78686', '#f8ff3c', '#3cef88', '#1b1bde', '#d0146c', '#ff613c', '#0be00b', '#268ff2', '#47e7ff', '#ff3c3c', '#bcf411', '#608ae9']
}: _privateParams.color,
_toolbox = jsonIsEmpty(_privateParams.toolbox) ? {
toolbox: {
x: '80%',
show: true,
feature: {
mark: {
show: true
},
dataView: {
show: true,
readOnly: false,
optionToContent: function(opt) {
var _json_source;
if (mainData.length >= 2) {
if (chartsType === _chartsType[0]) {
_json_source = opt.series[0].data;
return utils.dataShow(_json_source, chartsType);
}
_json_source = opt.dataset[0].source;
return utils.dataShow(_json_source, chartsType);
}
}
},
magicType: {
show: true,
type: ['line', 'bar', 'stack', 'tiled']
},
restore: {
show: true
},
saveAsImage: {
show: true
},
myTool: {
show: true,
title: '导出Excel',
icon: 'path://M825.6 376.2H697.8v78.3h127.8v-78.3z m0 100.6H697.8v79.9h127.8v-79.9z m0-201.3H697.8v78.3h127.8v-78.3z m0 397.7H697.8v79.9h127.8v-79.9z m59.1-477.5H578.1c-3.2 0-6.4 0-9.6 1.6v-84.6l-455.2 91v618.1l453.6 89.4v-81.4c3.2 1.6 6.4 1.6 9.6 1.6h306.6c16 0 27.2-12.8 27.2-28.7V224.4c1.5-15.9-11.2-28.7-25.6-28.7zM420 644.5l-54.3-3.2-41.5-103.8-44.7 97.4-51.1-3.2 65.5-118.2-59.1-129.4 51.1-3.2 35.1 97.4h6.4l38.3-103.8 54.3-3.2-68.7 137.3L420 644.5z m456.7 151.7H566.9v-43.1h103.8v-79.9H566.9v-17.6h103.8v-78.3H566.9v-20.8h103.8v-79.9H566.9v-22.4h103.8v-78.3H566.9v-20.8h103.8v-78.3H566.9v-44.7h309.8v564.1z m-51.1-218.8H697.8v78.3h127.8v-78.3z m0 0',
onclick: function() {
utils.dataExport(mainData, chartsType);
}
}
}
}
}: _privateParams.toolbox,
_dataset = jsonIsEmpty(_privateParams.dataset) ? {
dataset: {
source: mainData
}
}: _privateParams.dataset,
_series = jsonIsEmpty(_privateParams.series) ? {
series: getSeries(mainData, chartsType)
}: _privateParams.series,
_xAxis = jsonIsEmpty(_privateParams.xAxis) ? {
xAxis: [{
type: 'category',
axisTick: {
alignWithLabel: true
},
splitLine: {
show: false
},
axisLabel: {
textStyle: {
color: '#000',
}
}
}]
}: _privateParams.xAxis,
_yAxis = jsonIsEmpty(_privateParams.yAxis) ? {
yAxis: [{
type: 'value',
axisLabel: {
textStyle: {
color: '#000',
}
},
splitLine: {
show: true
},
}]
}: _privateParams.yAxis;
var assignOpt = function() {
var _opt = Object.assign(_title, _legend, _grid, _color, _tooltip, _toolbox, _series, _dataset, _xAxis, _yAxis);
return _opt;
}
switch (chartsType) {
case _chartsType[0]:
_dataset = null;
_xAxis = null;
_yAxis = null;
_tooltip = jsonIsEmpty(_privateParams.tooltip) ? {
tooltip: {
trigger: 'item',
formatter: "{a} <br/>{b} : {c} ({d}%)"
}
}: _privateParams.tooltip;
return assignOpt();
case _chartsType[1]:
return assignOpt();
case _chartsType[2]:
return assignOpt();
};
};
var init = function(chartsType, mainData, chartsTitle, domId) {
debugger
$.ajaxSettings.async = false;
$.getScript('/js/echarts/echarts.js', function() {
let dom = document.getElementById(domId),
myCharts = echarts.init(dom),
optionVal = getOptions(chartsType, mainData, chartsTitle);
myCharts.clear();
myCharts.setOption(optionVal);
});
$.ajaxSettings.async = true;
};
return {
init,initParams
};
}) ();
最终开放两个方法接口
- swiftcharts.init(chartsType, mainData, chartsTitle, domId)
- chartsType : 图标类型 [饼图 : pie, 柱状图 : bar , 折线图 : line]
- mainData : 主数据 详见上面 数据类型
- chartsTitle : 图标标题
- domId : html页面的容器ID
- swiftcharts.initParams(opts)
- opts : {};
- 格式为 (key: 对应实现代码中的_privateParams 中的key; value则为对象形式: {color : [‘red’, ‘red’, ‘red’, ‘red’]})
{"color": {color : ['red', 'red', 'red', 'red']}} - utils.dataShow 实现了Echarts dataShow的重写,使用bootstrop的样式展示
- utils.dataExport 增加了当前图标数据导出Excel
具体调用
// 引入js
<script type="text/javascript" src="/js/echarts/echarts.common.init.js"></script>
<script>
....
// 模拟数据
var barOrLine1 = [["product","当前任务数","当前商品数","完成任务数","完成商品数"],["挑货",3,12,0,0],["出库",0,0,0,0],["放置",0,0,0,0],["打标",0,0,0,0]];
//初始化参数
swiftcharts.initParams({"color": {color : ['red', 'red', 'red', 'red']}});
//调用 param1 : 折线类型, param2 : 主数据, param3 : 标题, param4 : 容器id 一般为div的ID
// 多说一句 请给容器div一个width和height,要不然无法展示
swiftcharts.init('line', barOrLine2, '这是展示的标题', '这是容器的Id');
....
</script>
念念不忘,必有回响,不完美的事情,期待着完美的结果.后期再完善