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

最新推荐文章于 2024-10-01 21:01:25 发布

qwa865595014

最新推荐文章于 2024-10-01 21:01:25 发布

阅读量866

点赞数 3

分类专栏： Echarts学习文章标签： Echarts 数据可视化饼图柱状图折线图

本文链接：https://blog.csdn.net/qwa865595014/article/details/89402771

版权

这篇博客介绍了如何封装Echarts的饼图、柱状图和折线图，提供了三种数据类型，并展示了具体的实现代码。通过swiftcharts.init方法初始化图表，接受图标类型、主数据、图表标题和DOM ID作为参数。同时，swiftcharts.initParams方法用于设置额外选项。文章还提及了数据展示和导出Excel的功能。

摘要由CSDN通过智能技术生成

数据类型

我这里用了三种数据类型

饼图

 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]</