通过百度echarts实现数据图表展⽰功能
现在我们在⼯作中，在开发中都会或多或少的⽤到图表统计数据显⽰给⽤户。通过图表可以很直观的，直接的将数据呈现出来。这⾥我就介绍说⼀下利⽤百度开源的echarts图表技术实现的具体功能。
1、对于不太理解echarts是个怎样技术的开发者来说，可以到进⾏学习了解，官⽹有详细的API⽂档和实例供⼤家参考学习。
2、以下是我在⼯作中实现整理出来的实例源码：
公⽤的⽀持js⽂件 echarts.js、echarts.min.js，还有其他的图表需要⽀持的js⽂件也可以到官⽹下载
echarts.js
/*!
* ECharts, a javascript interactive chart library.
*
* Copyright (c) 2015, Baidu Inc.
* All rights reserved.
*
* LICENSE
* github/ecomfe/echarts/blob/
*/
/**
* @module echarts
*/
define(function (require) {
var GlobalModel = require('./model/Global');
var ExtensionAPI = require('./ExtensionAPI');
var CoordinateSystemManager = require('./CoordinateSystem');
var OptionManager = require('./model/OptionManager');
var ComponentModel = require('./model/Component');
var SeriesModel = require('./model/Series');
var ComponentView = require('./view/Component');
var ChartView = require('./view/Chart');
var graphic = require('./util/graphic');
var zrender = require('zrender');
var zrUtil = require('zrender/core/util');
var colorTool = require('zrender/tool/color');
var env = require('zrender/core/env');
var Eventful = require('zrender/mixin/Eventful');
var each = zrUtil.each;
var VISUAL_CODING_STAGES = ['echarts', 'chart', 'component'];
// TODO Transform first or filter first
var PROCESSOR_STAGES = ['transform', 'filter', 'statistic'];
function createRegisterEventWithLowercaseName(method) {
return function (eventName, handler, context) {
// Event name is all lowercase
eventName = eventName && LowerCase();
Eventful.prototype[method].call(this, eventName, handler, context);
};
}
/**
* @module echarts~MessageCenter
*/
function MessageCenter() {
Eventful.call(this);
}
= createRegisterEventWithLowercaseName('on');
MessageCenter.prototype.off = createRegisterEventWithLowercaseName('off');
= createRegisterEventWithLowercaseName('one');
zrUtil.mixin(MessageCenter, Eventful);
/
**
* @module echarts~ECharts
*/
function ECharts (dom, theme, opts) {
opts = opts || {};
// Get theme by name
if (typeof theme === 'string') {
theme = themeStorage[theme];
}
if (theme) {
each(optionPreprocessorFuncs, function (preProcess) {
preProcess(theme);
});
}
/**
* @type {string}
*/
this.id;
/**
* Group id
* @type {string}
*/
/**
* @type {HTMLDomElement}
* @private
*/
this._dom = dom;
/**
* @type {module:zrender/ZRender}
* @private
*/
this._zr = zrender.init(dom, {
renderer: derer || 'canvas',
devicePixelRatio: opts.devicePixelRatio
});
/**
* @type {Object}
* @private
*/
this._theme = zrUtil.clone(theme);
/**
* @type {Array.<module:echarts/view/Chart>}
* @private
*/
this._chartsViews = [];
/**
* @type {Object.<string, module:echarts/view/Chart>}
* @private
*/
this._chartsMap = {};
/**
* @type {Array.<module:echarts/view/Component>}
* @private
*/
this._componentsViews = [];
/**
* @type {Object.<string, module:echarts/view/Component>}
* @private
*/
this._componentsMap = {};
/**
* @type {module:echarts/ExtensionAPI}
* @private
*/
this._api = new ExtensionAPI(this);
/
**
* @type {module:echarts/CoordinateSystem}
* @private
*/
this._coordSysMgr = new CoordinateSystemManager();
Eventful.call(this);
/**
* @type {module:echarts~MessageCenter}
* @private
*/
this._messageCenter = new MessageCenter();
/
/ Init mouse events
this._initEvents();
// In case some people write `size = size`
}
var echartsProto = ECharts.prototype;
/**
* @return {HTMLDomElement}
*/
return this._dom;
};
/**
* @return {module:zrender~ZRender}
*/
return this._zr;
};
/**
* @param {Object} option
* @param {boolean} notMerge
* @param {boolean} [notRefreshImmediately=false] Useful when setOption frequently.    */
echartsProto.setOption = function (option, notMerge, notRefreshImmediately) {
if (!this._model || notMerge) {
this._model = new GlobalModel(
null, null, this._theme, new OptionManager(this._api)
);
}
this._model.setOption(option, optionPreprocessorFuncs);
updateMethods.prepareAndUpdate.call(this);
!notRefreshImmediately && this._zr.refreshImmediately();
};
/**
* @DEPRECATED
*/
echartsProto.setTheme = function () {
console.log('ECharts#setTheme() is DEPRECATED in ECharts 3.0');
};
/**
* @return {module:echarts/model/Global}
*/
return this._model;
};
/
**
* @return {Object}
*/
return this._Option();
};
/**
* @return {number}
*/
return this._zr.getWidth();
};
/**
* @return {number}
*/
return this._zr.getHeight();
};
/**
* Get canvas which has all thing rendered
* @param {Object} opts
* @param {string} [opts.backgroundColor]
*/
if (!env.canvasSupported) {
return;
}
opts = opts || {};
opts.pixelRatio = opts.pixelRatio || 1;
opts.backgroundColor = opts.backgroundColor
|| this._('backgroundColor');
var zr = this._zr;
var list = DisplayList();
/
/ Stop animations
zrUtil.each(list, function (el) {
el.stopAnimation(true);
});
return RenderedCanvas(opts);
};
/**
* @return {string}
* @param {Object} opts
* @param {string} [pe='png']
* @param {string} [opts.pixelRatio=1]
* @param {string} [opts.backgroundColor]
*/
opts = opts || {};
var excludeComponents = ludeComponents;
var ecModel = this._model;
var excludesComponentViews = [];
var self = this;
each(excludeComponents, function (componentType) {
ecModel.eachComponent({
mainType: componentType
}, function (component) {
var view = self._componentsMap[component.__viewId];
if (!up.ignore) {
excludesComponentViews.push(view);
}
});
});
var url = RenderedCanvas(opts).toDataURL(
'image/' + (opts && pe || 'png')
);
each(excludesComponentViews, function (view) {
});
return url;
};
/**
* @return {string}
* @param {Object} opts
* @param {string} [pe='png']
* @param {string} [opts.pixelRatio=1]
* @param {string} [opts.backgroundColor]
*/
if (!env.canvasSupported) {
return;
}
var groupId = up;
var mathMin = Math.min;
var mathMax = Math.max;
var MAX_NUMBER = Infinity;
if (connectedGroups[groupId]) {
var left = MAX_NUMBER;
var top = MAX_NUMBER;
var right = -MAX_NUMBER;
var bottom = -MAX_NUMBER;
var canvasList = [];
var dpr = (opts && opts.pixelRatio) || 1;
for (var id in instances) {
var chart = instances[id];
if (up === groupId) {
var canvas = RenderedCanvas(
zrUtil.clone(opts)
);
var boundingRect = Dom().getBoundingClientRect();
left = mathMin(boundingRect.left, left);
top = p, top);
right = mathMax(boundingRect.right, right);
bottom = mathMax(boundingRect.bottom, bottom);
canvasList.push({
dom: canvas,
left: boundingRect.left,
top: p
});
}
}
left *= dpr;
top *= dpr;
right *= dpr;
bottom *= dpr;
var width = right - left;
var height = bottom - top;
var targetCanvas = ateCanvas();
targetCanvas.width = width;
targetCanvas.height = height;
var zr = zrender.init(targetCanvas);
each(canvasList, function (item) {
var img = new graphic.Image({
style: {
x: item.left * dpr - left,
y: p * dpr - top,
image: item.dom
}
});
zr.add(img);
});
DataURL('image/' + (opts && pe || 'png'));        }
else {
DataURL(opts);
}
};
var updateMethods = {
/**
* @param {Object} payload
* @private
*/
update: function (payload) {
/
/ console.time && console.time('update');
var ecModel = this._model;
var api = this._api;
var coordSysMgr = this._coordSysMgr;
// update before setOption
if (!ecModel) {
return;
}
// Fixme First time update ?
// TODO
/
/ Save total ecModel here for undo/redo (after restoring data and before processing data).            // Undo (restoration of total ecModel) can be carried out in 'action' or outside API call.
// Create new coordinate system each update
// In LineView may save the old coordinate system and use it to get the orignal point
processData.call(this, ecModel, api);
stackSeriesData.call(this, ecModel);
coordSysMgr.update(ecModel, api);
doLayout.call(this, ecModel, payload);
doVisualCoding.call(this, ecModel, payload);
doRender.call(this, ecModel, payload);
// Set background
var backgroundColor = ('backgroundColor') || 'transparent';
var painter = this._zr.painter;
// TODO all use clearColor ?
if (painter.isSingleCanvas && painter.isSingleCanvas()) {
this._zr.configLayer(0, {
clearColor: backgroundColor
});
}
else {
// In IE8
if (!env.canvasSupported) {
var colorArr = colorTool.parse(backgroundColor);
backgroundColor = colorTool.stringify(colorArr, 'rgb');
if (colorArr[3] === 0) {
backgroundColor = 'transparent';
}
}
backgroundColor = backgroundColor;
this._dom.style.backgroundColor = backgroundColor;
}
// console.time && console.timeEnd('update');
},
/
/ PENDING
/**
* @param {Object} payload
* @private
*/
updateView: function (payload) {
var ecModel = this._model;
// update before setOption
if (!ecModel) {
return;
}
doLayout.call(this, ecModel, payload);
doVisualCoding.call(this, ecModel, payload);
invokeUpdateMethod.call(this, 'updateView', ecModel, payload);
},
/**
* @param {Object} payload
* @private
*/
updateVisual: function (payload) {
var ecModel = this._model;
// update before setOption
if (!ecModel) {
return;
}
doVisualCoding.call(this, ecModel, payload);
invokeUpdateMethod.call(this, 'updateVisual', ecModel, payload);
},
/**
* @param {Object} payload
* @private
*/
updateLayout: function (payload) {
var ecModel = this._model;
// update before setOption
if (!ecModel) {
return;
}
doLayout.call(this, ecModel, payload);
invokeUpdateMethod.call(this, 'updateLayout', ecModel, payload);
},
/**
* @param {Object} payload
* @private
*/
highlight: function (payload) {
toggleHighlight.call(this, 'highlight', payload);
},
/**
* @param {Object} payload
* @private
*/
downplay: function (payload) {
toggleHighlight.call(this, 'downplay', payload);
},
/
**
* @param {Object} payload
* @private
*/
prepareAndUpdate: function (payload) {
var ecModel = this._model;
prepareView.call(this, 'component', ecModel);
prepareView.call(this, 'chart', ecModel);
updateMethods.update.call(this, payload);
}
};
/
**
* @param {Object} payload
* @private
*/
function toggleHighlight(method, payload) {
var ecModel = this._model;
// dispatchAction before setOption
if (!ecModel) {
return;
}
ecModel.eachComponent(
{mainType: 'series', query: payload},
function (seriesModel, index) {
setoption
var chartView = this._chartsMap[seriesModel.__viewId];
if (chartView && chartView.__alive) {
chartView[method](
seriesModel, ecModel, this._api, payload
);
}
},
this
);
}
/**
* Resize the chart
*/
this._zr.resize();
var optionChanged = this._model && this._setOption('media');        updateMethods[optionChanged ? 'prepareAndUpdate' : 'update'].call(this);        // Resize loading effect
this._loadingFX && this._size();
};
var defaultLoadingEffect = require('./loading/default');
/**
* Show loading effect
* @param  {string} [name='default']
* @param  {Object} [cfg]
*/
echartsProto.showLoading = function (name, cfg) {
if (zrUtil.isObject(name)) {
cfg = name;
name = 'default';
}
this.hideLoading();
var el = defaultLoadingEffect(this._api, cfg);
var zr = this._zr;
this._loadingFX = el;
zr.add(el);
};
/**
* Hide loading effect
*/
echartsProto.hideLoading = function () {
this._loadingFX && this._zr.remove(this._loadingFX);
this._loadingFX = null;
};
/
**
* @param {Object} eventObj
* @return {Object}
*/
echartsProto.makeActionFromEvent = function (eventObj) {
var payload = d({}, eventObj);
return payload;
};
/**
* @pubilc
* @param {Object} payload
* @param {string} [pe] Action type
* @param {boolean} [silent=false] Whether trigger event.
*/
echartsProto.dispatchAction = function (payload, silent) {
var actionWrap = pe];
if (actionWrap) {
var actionInfo = actionWrap.actionInfo;
var updateMethod = actionInfo.update || 'update';
var payloads = [payload];
var batched = false;
/
/ Batch action
if (payload.batch) {
batched = true;
payloads = zrUtil.map(payload.batch, function (item) {
item = zrUtil.d({}, item), payload);
item.batch = null;

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。