jquery.echarts.js 3.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126
  1. /**
  2. * Created by Gezii on 2015/5/12.
  3. */
  4. /**
  5. * jQuery与echarts的整合插件
  6. */
  7. ;(function($,echarts){
  8. 'use strict';
  9. var Chart = function (element, options) {
  10. this.chart = null;
  11. this.options = null;
  12. this.$element = null;
  13. this.init(element, options);
  14. };
  15. Chart.VERSION = '1.0.0';
  16. Chart.TRANSITION_DURATION = 150;
  17. Chart.DEFAULTS = {
  18. showLoading: true,
  19. loadingOption : {
  20. text : "数据读取中...",
  21. effect : 'whirling',
  22. textStyle : {
  23. fontSize : 20
  24. }
  25. },
  26. onClick: function () {null;}, //绑定的单击事件,参见echarts的chart.on
  27. theme : {},
  28. option : {}, //echarts画图的option对象 或 可返回option对象的function
  29. url : "", //待加载数据的URL地址
  30. data : {} //待发送 Key/value 参数
  31. };
  32. Chart.prototype.init = function (element, options) {
  33. this.$element = $(element);
  34. this.options = options.series ? options : this.getOptions(options);
  35. this.chart = echarts.init(this.$element.get(0),this.options.theme);
  36. };
  37. Chart.prototype.getDefaults = function () {
  38. return Chart.DEFAULTS;
  39. };
  40. Chart.prototype.getOptions = function (options) {
  41. options = $.extend({}, this.getDefaults(), this.$element.data(), options);
  42. return options
  43. };
  44. Chart.prototype.getDelegateOptions = function () {
  45. var options = {};
  46. var defaults = this.getDefaults();
  47. this._options && $.each(this._options, function (key, value) {
  48. if (defaults[key] != value) options[key] = value
  49. });
  50. return options
  51. };
  52. Chart.prototype.draw = function () {
  53. var that = this;
  54. var opt = this.options;
  55. opt.showLoading ? this.chart.showLoading(opt.loadingOption) : null;
  56. if (opt.series){
  57. this.setOption(opt);
  58. return;
  59. }
  60. if (opt.url) {
  61. $.get(opt.url, opt.data, function(json){
  62. if (typeof opt.option == 'function') {
  63. var option = opt.option.call(this,json,that.chart);
  64. that.setOption(option);
  65. }
  66. });
  67. } else {
  68. var option = typeof opt.option == 'function' ?
  69. opt.option.call(this,that.chart) :
  70. opt.option;
  71. this.setOption(option);
  72. }
  73. };
  74. Chart.prototype.setOption = function(option) {
  75. var fun = this.options.onClick;
  76. if (fun instanceof Function) {
  77. this.chart.on('click', this.options.onClick); //绑定事件
  78. }
  79. this.chart.setOption(option);
  80. this.chart.hideLoading();
  81. };
  82. function Plugin(option) {
  83. return this.each(function () {
  84. var $this = $(this);
  85. var data = $this.data('jquery.echarts');
  86. var options = $.extend({}, Chart.DEFAULTS, $this.data(), typeof option == 'object' && option);
  87. if (!data) $this.data('jquery.echarts', (data = new Chart(this, options)));
  88. data.draw();
  89. })
  90. }
  91. var old = $.fn.chart;
  92. $.fn.chart = Plugin;
  93. $.fn.chart.Constructor = Chart;
  94. // chart NO CONFLICT
  95. // ===================
  96. $.fn.chart.noConflict = function () {
  97. $.fn.chart = old;
  98. return this;
  99. }
  100. })(jQuery,echarts);