crm/public/static/ueditor/_parse/charts.js

UE.parse.register("charts", function(utils) {
  utils.cssRule(
    "chartsContainerHeight",
    ".edui-chart-container { height:" +
      (this.chartContainerHeight || 300) +
      "px}"
  );
  var resourceRoot = this.rootPath,
    containers = this.root,
    sources = null;

  //不存在指定的根路径， 则直接退出
  if (!resourceRoot) {
    return;
  }

  if ((sources = parseSources())) {
    loadResources();
  }

  function parseSources() {
    if (!containers) {
      return null;
    }

    return extractChartData(containers);
  }

  /**
     * 提取数据
     */
  function extractChartData(rootNode) {
    var data = [],
      tables = rootNode.getElementsByTagName("table");

    for (var i = 0, tableNode; (tableNode = tables[i]); i++) {
      if (tableNode.getAttribute("data-chart") !== null) {
        data.push(formatData(tableNode));
      }
    }

    return data.length ? data : null;
  }

  function formatData(tableNode) {
    var meta = tableNode.getAttribute("data-chart"),
      metaConfig = {},
      data = [];

    //提取table数据
    for (var i = 0, row; (row = tableNode.rows[i]); i++) {
      var rowData = [];

      for (var j = 0, cell; (cell = row.cells[j]); j++) {
        var value = cell.innerText || cell.textContent || "";
        rowData.push(cell.tagName == "TH" ? value : value | 0);
      }

      data.push(rowData);
    }

    //解析元信息
    meta = meta.split(";");
    for (var i = 0, metaData; (metaData = meta[i]); i++) {
      metaData = metaData.split(":");
      metaConfig[metaData[0]] = metaData[1];
    }

    return {
      table: tableNode,
      meta: metaConfig,
      data: data
    };
  }

  //加载资源
  function loadResources() {
    loadJQuery();
  }

  function loadJQuery() {
    //不存在jquery， 则加载jquery
    if (!window.jQuery) {
      utils.loadFile(
        document,
        {
          src: resourceRoot + "/third-party/jquery-1.10.2.min.js",
          tag: "script",
          type: "text/javascript",
          defer: "defer"
        },
        function() {
          loadHighcharts();
        }
      );
    } else {
      loadHighcharts();
    }
  }

  function loadHighcharts() {
    //不存在Highcharts， 则加载Highcharts
    if (!window.Highcharts) {
      utils.loadFile(
        document,
        {
          src: resourceRoot + "/third-party/highcharts/highcharts.js",
          tag: "script",
          type: "text/javascript",
          defer: "defer"
        },
        function() {
          loadTypeConfig();
        }
      );
    } else {
      loadTypeConfig();
    }
  }

  //加载图表差异化配置文件
  function loadTypeConfig() {
    utils.loadFile(
      document,
      {
        src: resourceRoot + "/dialogs/charts/chart.config.js",
        tag: "script",
        type: "text/javascript",
        defer: "defer"
      },
      function() {
        render();
      }
    );
  }

  //渲染图表
  function render() {
    var config = null,
      chartConfig = null,
      container = null;

    for (var i = 0, len = sources.length; i < len; i++) {
      config = sources[i];

      chartConfig = analysisConfig(config);

      container = createContainer(config.table);

      renderChart(container, typeConfig[config.meta.chartType], chartConfig);
    }
  }

  /**
     * 渲染图表
     * @param container 图表容器节点对象
     * @param typeConfig 图表类型配置
     * @param config 图表通用配置
     * */
  function renderChart(container, typeConfig, config) {
    $(container).highcharts(
      $.extend({}, typeConfig, {
        credits: {
          enabled: false
        },
        exporting: {
          enabled: false
        },
        title: {
          text: config.title,
          x: -20 //center
        },
        subtitle: {
          text: config.subTitle,
          x: -20
        },
        xAxis: {
          title: {
            text: config.xTitle
          },
          categories: config.categories
        },
        yAxis: {
          title: {
            text: config.yTitle
          },
          plotLines: [
            {
              value: 0,
              width: 1,
              color: "#808080"
            }
          ]
        },
        tooltip: {
          enabled: true,
          valueSuffix: config.suffix
        },
        legend: {
          layout: "vertical",
          align: "right",
          verticalAlign: "middle",
          borderWidth: 1
        },
        series: config.series
      })
    );
  }

  /**
     * 创建图表的容器
     * 新创建的容器会替换掉对应的table对象
     * */
  function createContainer(tableNode) {
    var container = document.createElement("div");
    container.className = "edui-chart-container";

    tableNode.parentNode.replaceChild(container, tableNode);

    return container;
  }

  //根据config解析出正确的类别和图表数据信息
  function analysisConfig(config) {
    var series = [],
      //数据类别
      categories = [],
      result = [],
      data = config.data,
      meta = config.meta;

    //数据对齐方式为相反的方式， 需要反转数据
    if (meta.dataFormat != "1") {
      for (var i = 0, len = data.length; i < len; i++) {
        for (var j = 0, jlen = data[i].length; j < jlen; j++) {
          if (!result[j]) {
            result[j] = [];
          }

          result[j][i] = data[i][j];
        }
      }

      data = result;
    }

    result = {};

    //普通图表
    if (meta.chartType != typeConfig.length - 1) {
      categories = data[0].slice(1);

      for (var i = 1, curData; (curData = data[i]); i++) {
        series.push({
          name: curData[0],
          data: curData.slice(1)
        });
      }

      result.series = series;
      result.categories = categories;
      result.title = meta.title;
      result.subTitle = meta.subTitle;
      result.xTitle = meta.xTitle;
      result.yTitle = meta.yTitle;
      result.suffix = meta.suffix;
    } else {
      var curData = [];

      for (var i = 1, len = data[0].length; i < len; i++) {
        curData.push([data[0][i], data[1][i] | 0]);
      }

      //饼图
      series[0] = {
        type: "pie",
        name: meta.tip,
        data: curData
      };

      result.series = series;
      result.title = meta.title;
      result.suffix = meta.suffix;
    }

    return result;
  }
});