数据类型

我这里用了三种数据类型

饼图

 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>

念念不忘,必有回响,不完美的事情,期待着完美的结果.后期再完善

Echarts通用饼图、柱状图、折线图封装相关推荐

Echarts实现堆叠柱状图+折线图
Echarts实现堆叠柱状图+折线图,以便后续使用时复制 //堆疊Bar圖+折線圖 option = {title: {text: '动态数据',subtext: '纯属虚构'},tooltip: { ...
QT绘制饼图+柱状图+折线图
项目需要使用到不同的统计图案的方法来显示统计数据包括:饼图.柱状图.折线图. 饼图的实现具体实现代码如下: 首先需要一个QChartView来存放饼图,实现如下: 拖拽一个QGraphicsVie ...
Echarts 教学渐变柱状图折线图嵌套饼图标签
哈哈最近在用Echarts 做东西顺便研究了一下Echarts 总结了一些比较常用的代码话不多说直接放代码这是取json的方式生成图表 myChart.showLoading(); // e ...
java使用poi在word中生成柱状图、折线图、饼图、柱状图+折线图组合图、动态表格、文本替换、图片替换、更新内置Excel数据、更新插入的文本框内容、合并表格单元格；
本文参考地址:https://blog.csdn.net/wangxiaoyingWXY/article/details/95377533 在参考文章的基础上,增加了扩展.感谢被参考的妹子.另外该博客 ...
echarts 其他样式折线重叠_echarts 同一div同时显示饼图和折线图且两图联动望大佬赐教...
需求是一个div同时显示饼图和折线图我在echarts官网找到了这样得模板但是问题是他的数据都是写死得而我的是异步获取不知道怎么弄请各位大佬赐教下为代码和需求图片 setTimeout( ...
Excel柱状图，饼图，折线图
1. 打开文件用Excel打开"Test1"文件 2. 选择数据按住鼠标左键,选中指定数据区域 3. 数据选中之后,点击EXCEL菜单的"INSERT"选项 ...
【python科研绘图】双y轴并列柱状图+折线图+数据表结合，并封装图形绘制函数
双y轴并列柱状图+折线图+数据表结合 1. 论文原图 2 数据准备 3 代码实现步骤拆解 3.1 导入第三方库 3.2 数据赋值 3.3 数据绘图 4 函数封装手动反爬虫: 原博地址 https:/ ...
Echarts实现折线图+柱状图+折线图填充
用Echarts练习实现折线图+柱状图+折线图填充,以便后续使用时可直接复制 option = {title: {text: '动态数据',subtext: '纯属虚构'},tooltip: {tri ...
Echarts 双侧双表头柱状图折线图
Echarts 双侧双表头柱状图折线图带箭头区分颜色成品图片(如需折线图自行更改) 废话不多say 上代码
echarts：多组折线-图
Echarts是一个基于JavaScript的开源可视化库,它可以用来绘制各种类型的图表,包括折线图.柱状图.饼图等等.在本文中,我们将使用Echarts绘制一个多组折线-图的完整示例. echart ...

Echarts通用饼图、柱状图、折线图封装

简单封装Echarts js不熟可能有问题,学习之后在完善

数据类型

实现代码

具体调用

Echarts通用饼图、柱状图、折线图封装相关推荐

最新文章

热门文章

Echarts通用饼图、柱状图、折线图封装

简单封装Echarts js不熟 可能有问题,学习之后在完善

数据类型

实现代码

具体调用

Echarts通用饼图、柱状图、折线图封装相关推荐

最新文章

热门文章

简单封装Echarts js不熟可能有问题,学习之后在完善