通过代码实例跟我学百度EChart图表控件——如何为百度EChart商业级数据图表添加事件的应用实例

合集下载

通过百度echarts实现数据图表展示功能

通过百度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* https:///ecomfe/echarts/blob/master/LICENSE.txt*//*** @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 firstvar PROCESSOR_STAGES = ['transform', 'filter', 'statistic'];function createRegisterEventWithLowercaseName(method) {return function (eventName, handler, context) {// Event name is all lowercaseeventName = eventName && eventName.toLowerCase();Eventful.prototype[method].call(this, eventName, handler, context);};}/*** @module echarts~MessageCenter*/function MessageCenter() {Eventful.call(this);}MessageCenter.prototype.on = createRegisterEventWithLowercaseName('on');MessageCenter.prototype.off = createRegisterEventWithLowercaseName('off');MessageCenter.prototype.one = createRegisterEventWithLowercaseName('one');zrUtil.mixin(MessageCenter, Eventful);/*** @module echarts~ECharts*/function ECharts (dom, theme, opts) {opts = opts || {};// Get theme by nameif (typeof theme === 'string') {theme = themeStorage[theme];}if (theme) {each(optionPreprocessorFuncs, function (preProcess) {preProcess(theme);});}/*** @type {string}*/this.id;/*** Group id* @type {string}*/this.group;/*** @type {HTMLDomElement}* @private*/this._dom = dom;/*** @type {module:zrender/ZRender}* @private*/this._zr = zrender.init(dom, {renderer: opts.renderer || 'canvas',devicePixelRatio: opts.devicePixelRatio});/*** @type {Object}* @private*/this._theme = zrUtil.clone(theme);/*** @type {Array.<module:echarts/view/Chart>}* @private*//*** @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 eventsthis._initEvents();// In case some people write `window.onresize = chart.resize`this.resize = zrUtil.bind(this.resize, this);}var echartsProto = ECharts.prototype;/*** @return {HTMLDomElement}*/echartsProto.getDom = function () {return this._dom;};/*** @return {module:zrender~ZRender}*/echartsProto.getZr = function () {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}*/echartsProto.getModel = function () {return this._model;};/*** @return {Object}*/echartsProto.getOption = function () {return this._model.getOption();};/*** @return {number}*/echartsProto.getWidth = function () {return this._zr.getWidth();};/*** @return {number}*/echartsProto.getHeight = function () {return this._zr.getHeight();};/*** Get canvas which has all thing rendered* @param {Object} opts* @param {string} [opts.backgroundColor]*/echartsProto.getRenderedCanvas = function (opts) {return;}opts = opts || {};opts.pixelRatio = opts.pixelRatio || 1;opts.backgroundColor = opts.backgroundColor|| this._model.get('backgroundColor');var zr = this._zr;var list = zr.storage.getDisplayList();// Stop animationszrUtil.each(list, function (el) {el.stopAnimation(true);});return zr.painter.getRenderedCanvas(opts);};/*** @return {string}* @param {Object} opts* @param {string} [opts.type='png']* @param {string} [opts.pixelRatio=1]* @param {string} [opts.backgroundColor]*/echartsProto.getDataURL = function (opts) {opts = opts || {};var excludeComponents = opts.excludeComponents;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 (!view.group.ignore) {excludesComponentViews.push(view);view.group.ignore = true;}});});var url = this.getRenderedCanvas(opts).toDataURL('image/' + (opts && opts.type || 'png'));each(excludesComponentViews, function (view) {view.group.ignore = false;});return url;};/*** @return {string}* @param {Object} opts* @param {string} [opts.type='png']* @param {string} [opts.pixelRatio=1]* @param {string} [opts.backgroundColor]*/echartsProto.getConnectedDataURL = function (opts) {if (!env.canvasSupported) {return;}var groupId = this.group;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 (chart.group === groupId) {var canvas = chart.getRenderedCanvas(zrUtil.clone(opts));var boundingRect = chart.getDom().getBoundingClientRect();left = mathMin(boundingRect.left, left);top = mathMin(boundingRect.top, top);right = mathMax(boundingRect.right, right);bottom = mathMax(boundingRect.bottom, bottom);canvasList.push({dom: canvas,left: boundingRect.left,top: boundingRect.top});}}left *= dpr;top *= dpr;right *= dpr;bottom *= dpr;var width = right - left;var height = bottom - top;var targetCanvas = zrUtil.createCanvas();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: item.top * dpr - top,image: item.dom}});zr.add(img);});zr.refreshImmediately();return targetCanvas.toDataURL('image/' + (opts && opts.type || 'png')); }else {return this.getDataURL(opts);}};/*** @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 setOptionif (!ecModel) {return;}// Fixme First time update ?ecModel.restoreData();// 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 pointcoordSysMgr.create(this._model, this._api);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 backgroundvar backgroundColor = ecModel.get('backgroundColor') || 'transparent';var painter = this._zr.painter;// TODO all use clearColor ?if (painter.isSingleCanvas && painter.isSingleCanvas()) {this._zr.configLayer(0, {clearColor: backgroundColor});}else {// In IE8if (!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 setOptionif (!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 setOptionif (!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 setOptionif (!ecModel) {return;}doLayout.call(this, ecModel, payload);invokeUpdateMethod.call(this, 'updateLayout', ecModel, payload);},/*** @param {Object} payload* @privatehighlight: 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 setOptionif (!ecModel) {return;}ecModel.eachComponent({mainType: 'series', query: payload},function (seriesModel, index) {var chartView = this._chartsMap[seriesModel.__viewId];if (chartView && chartView.__alive) {chartView[method](seriesModel, ecModel, this._api, payload);}},this);}/*** Resize the chart*/echartsProto.resize = function () {this._zr.resize();var optionChanged = this._model && this._model.resetOption('media'); updateMethods[optionChanged ? 'prepareAndUpdate' : 'update'].call(this); // Resize loading effectthis._loadingFX && this._loadingFX.resize();};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 = zrUtil.extend({}, eventObj);payload.type = eventActionMap[eventObj.type];return payload;};/*** @pubilc* @param {Object} payload* @param {string} [payload.type] Action type* @param {boolean} [silent=false] Whether trigger event.*/echartsProto.dispatchAction = function (payload, silent) {var actionWrap = actions[payload.type];if (actionWrap) {var actionInfo = actionWrap.actionInfo;var updateMethod = actionInfo.update || 'update';var payloads = [payload];var batched = false;// Batch actionif (payload.batch) {batched = true;payloads = zrUtil.map(payload.batch, function (item) {item = zrUtil.defaults(zrUtil.extend({}, item), payload);return item;});}var eventObjBatch = [];var eventObj;var isHighlightOrDownplay = payload.type === 'highlight' || payload.type === 'downplay'; for (var i = 0; i < payloads.length; i++) {var batchItem = payloads[i];// Action can specify the event by return it.eventObj = actionWrap.action(batchItem, this._model);// Emit event outsideeventObj = eventObj || zrUtil.extend({}, batchItem);// Convert type to eventTypeeventObj.type = actionInfo.event || eventObj.type;eventObjBatch.push(eventObj);// Highlight and downplay are special.isHighlightOrDownplay && updateMethods[updateMethod].call(this, batchItem);}(updateMethod !== 'none' && !isHighlightOrDownplay)&& updateMethods[updateMethod].call(this, payload);if (!silent) {// Follow the rule of action batchif (batched) {eventObj = {type: actionInfo.event || payload.type,batch: eventObjBatch};}else {eventObj = eventObjBatch[0];}this._messageCenter.trigger(eventObj.type, eventObj);}}};/*** Register event* @method*/echartsProto.on = createRegisterEventWithLowercaseName('on');echartsProto.off = createRegisterEventWithLowercaseName('off');echartsProto.one = createRegisterEventWithLowercaseName('one');/*** @param {string} methodName* @private*/function invokeUpdateMethod(methodName, ecModel, payload) {var api = this._api;// Update all componentseach(this._componentsViews, function (component) {var componentModel = component.__model;component[methodName](componentModel, ecModel, api, payload);updateZ(componentModel, component);}, this);// Upate all chartsecModel.eachSeries(function (seriesModel, idx) {var chart = this._chartsMap[seriesModel.__viewId];chart[methodName](seriesModel, ecModel, api, payload);updateZ(seriesModel, chart);}, this);}/*** Prepare view instances of charts and components* @param {module:echarts/model/Global} ecModel* @private*/function prepareView(type, ecModel) {var isComponent = type === 'component';var viewList = isComponent ? this._componentsViews : this._chartsViews;var viewMap = isComponent ? this._componentsMap : this._chartsMap;var zr = this._zr;for (var i = 0; i < viewList.length; i++) {viewList[i].__alive = false;}ecModel[isComponent ? 'eachComponent' : 'eachSeries'](function (componentType, model) { if (isComponent) {if (componentType === 'series') {return;}}else {model = componentType;}// Consider: id same and type changed.var viewId = model.id + '_' + model.type;var view = viewMap[viewId];if (!view) {var classType = ComponentModel.parseClassType(model.type);var Clazz = isComponentComponentView.getClass(classType.main, classType.sub): ChartView.getClass(classType.sub);if (Clazz) {view = new Clazz();view.init(ecModel, this._api);viewMap[viewId] = view;viewList.push(view);zr.add(view.group);}else {// Errorreturn;}}model.__viewId = viewId;view.__alive = true;view.__id = viewId;}, this);for (var i = 0; i < viewList.length;) {var view = viewList[i];if (!view.__alive) {zr.remove(view.group);view.dispose(ecModel, this._api);viewList.splice(i, 1);delete viewMap[view.__id];}else {i++;}}}/*** Processor data in each series** @param {module:echarts/model/Global} ecModel* @private*/function processData(ecModel, api) {each(PROCESSOR_STAGES, function (stage) {each(dataProcessorFuncs[stage] || [], function (process) {process(ecModel, api);});});}/*** @private*/function stackSeriesData(ecModel) {var stackedDataMap = {};ecModel.eachSeries(function (series) {var stack = series.get('stack');var data = series.getData();if (stack && data.type === 'list') {var previousStack = stackedDataMap[stack];if (previousStack) {data.stackedOn = previousStack;}stackedDataMap[stack] = data;}});}/*** Layout before each chart render there series, after visual coding and data processing ** @param {module:echarts/model/Global} ecModel* @private*/function doLayout(ecModel, payload) {var api = this._api;each(layoutFuncs, function (layout) {layout(ecModel, api, payload);});}/*** Code visual infomation from data after data processing** @param {module:echarts/model/Global} ecModel* @private*/function doVisualCoding(ecModel, payload) {each(VISUAL_CODING_STAGES, function (stage) {each(visualCodingFuncs[stage] || [], function (visualCoding) {visualCoding(ecModel, payload);});});}/*** Render each chart and component* @private*/function doRender(ecModel, payload) {var api = this._api;// Render all componentseach(this._componentsViews, function (componentView) {var componentModel = componentView.__model;componentView.render(componentModel, ecModel, api, payload);updateZ(componentModel, componentView);}, this);each(this._chartsViews, function (chart) {chart.__alive = false;}, this);// Render all chartsecModel.eachSeries(function (seriesModel, idx) {var chartView = this._chartsMap[seriesModel.__viewId];chartView.__alive = true;chartView.render(seriesModel, ecModel, api, payload);chartView.group.silent = !!seriesModel.get('silent');updateZ(seriesModel, chartView);}, this);// Remove groups of unrendered chartseach(this._chartsViews, function (chart) {if (!chart.__alive) {chart.remove(ecModel, api);}}, this);}var MOUSE_EVENT_NAMES = ['click', 'dblclick', 'mouseover', 'mouseout', 'mousedown', 'mouseup', 'globalout'];/*** @private*/echartsProto._initEvents = function () {each(MOUSE_EVENT_NAMES, function (eveName) {this._zr.on(eveName, function (e) {var ecModel = this.getModel();if (el && el.dataIndex != null) {var dataModel = el.dataModel || ecModel.getSeriesByIndex(el.seriesIndex);var params = dataModel && dataModel.getDataParams(el.dataIndex, el.dataType) || {}; params.event = e;params.type = eveName;this.trigger(eveName, params);}// If element has custom eventData of componentselse if (el && el.eventData) {this.trigger(eveName, el.eventData);}}, this);}, this);each(eventActionMap, function (actionType, eventType) {this._messageCenter.on(eventType, function (event) {this.trigger(eventType, event);}, this);}, this);};/*** @return {boolean}*/echartsProto.isDisposed = function () {return this._disposed;};/*** Clear*/echartsProto.clear = function () {this.setOption({}, true);};/*** Dispose instance*/echartsProto.dispose = function () {this._disposed = true;var api = this._api;var ecModel = this._model;each(this._componentsViews, function (component) {component.dispose(ecModel, api);});each(this._chartsViews, function (chart) {chart.dispose(ecModel, api);});this._zr.dispose();delete instances[this.id];};zrUtil.mixin(ECharts, Eventful);/*** @param {module:echarts/model/Series|module:echarts/model/Component} model* @param {module:echarts/view/Component|module:echarts/view/Chart} view* @return {string}*/function updateZ(model, view) {var z = model.get('z');var zlevel = model.get('zlevel');// Set z and zlevelview.group.traverse(function (el) {z != null && (el.z = z);zlevel != null && (el.zlevel = zlevel);});}/*** @type {Array.<Function>}* @inner*/var actions = [];/*** Map eventType to actionType* @type {Object}*/var eventActionMap = {};/*** @type {Array.<Function>}* @inner*/var layoutFuncs = [];/*** Data processor functions of each stage* @type {Array.<Object.<string, Function>>}* @inner*/var dataProcessorFuncs = {};/*** @type {Array.<Function>}* @inner*/var optionPreprocessorFuncs = [];/*** Visual coding functions of each stage* @type {Array.<Object.<string, Function>>}* @inner*/var visualCodingFuncs = {};/*** Theme storage* @type {Object.<key, Object>}*/var themeStorage = {};var instances = {};var connectedGroups = {};var idBase = new Date() - 0;var groupIdBase = new Date() - 0;var DOM_ATTRIBUTE_KEY = '_echarts_instance_';/*** @alias module:echartsvar echarts = {/*** @type {number}*/version: '3.1.10',dependencies: {zrender: '3.1.0'}};function enableConnect(chart) {var STATUS_PENDING = 0;var STATUS_UPDATING = 1;var STATUS_UPDATED = 2;var STATUS_KEY = '__connectUpdateStatus';function updateConnectedChartsStatus(charts, status) {for (var i = 0; i < charts.length; i++) {var otherChart = charts[i];otherChart[STATUS_KEY] = status;}}zrUtil.each(eventActionMap, function (actionType, eventType) {chart._messageCenter.on(eventType, function (event) {if (connectedGroups[chart.group] && chart[STATUS_KEY] !== STATUS_PENDING) { var action = chart.makeActionFromEvent(event);var otherCharts = [];for (var id in instances) {var otherChart = instances[id];if (otherChart !== chart && otherChart.group === chart.group) {otherCharts.push(otherChart);}}updateConnectedChartsStatus(otherCharts, STATUS_PENDING);each(otherCharts, function (otherChart) {if (otherChart[STATUS_KEY] !== STATUS_UPDATING) {otherChart.dispatchAction(action);}});updateConnectedChartsStatus(otherCharts, STATUS_UPDATED);}});});}/*** @param {HTMLDomElement} dom* @param {Object} [theme]* @param {Object} opts*/echarts.init = function (dom, theme, opts) {// Check versionif ((zrender.version.replace('.', '') - 0) < (echarts.dependencies.zrender.replace('.', '') - 0)) {throw new Error('ZRender ' + zrender.version+ ' is too old for ECharts ' + echarts.version+ '. Current version need ZRender '+ echarts.dependencies.zrender + '+');}if (!dom) {throw new Error('Initialize failed: invalid dom.');}var chart = new ECharts(dom, theme, opts);chart.id = 'ec_' + idBase++;instances[chart.id] = chart;dom.setAttribute &&dom.setAttribute(DOM_ATTRIBUTE_KEY, chart.id);enableConnect(chart);return chart;};/*** @return {string|Array.<module:echarts~ECharts>} groupId*/echarts.connect = function (groupId) {// Is array of chartsif (zrUtil.isArray(groupId)) {var charts = groupId;groupId = null;// If any chart has groupzrUtil.each(charts, function (chart) {if (chart.group != null) {groupId = chart.group;}});groupId = groupId || ('g_' + groupIdBase++);zrUtil.each(charts, function (chart) {chart.group = groupId;});}connectedGroups[groupId] = true;return groupId;};/*** @return {string} groupId*/echarts.disConnect = function (groupId) {connectedGroups[groupId] = false;};/*** Dispose a chart instance* @param {module:echarts~ECharts|HTMLDomElement|string} chart*/echarts.dispose = function (chart) {if (zrUtil.isDom(chart)) {chart = echarts.getInstanceByDom(chart);}else if (typeof chart === 'string') {chart = instances[chart];}if ((chart instanceof ECharts) && !chart.isDisposed()) {chart.dispose();}};* @param {HTMLDomElement} dom* @return {echarts~ECharts}*/echarts.getInstanceByDom = function (dom) {var key = dom.getAttribute(DOM_ATTRIBUTE_KEY);return instances[key];};/*** @param {string} key* @return {echarts~ECharts}*/echarts.getInstanceById = function (key) {return instances[key];};/*** Register theme*/echarts.registerTheme = function (name, theme) {themeStorage[name] = theme;};/*** Register option preprocessor* @param {Function} preprocessorFunc*/echarts.registerPreprocessor = function (preprocessorFunc) {optionPreprocessorFuncs.push(preprocessorFunc);};/*** @param {string} stage* @param {Function} processorFunc*/echarts.registerProcessor = function (stage, processorFunc) {if (zrUtil.indexOf(PROCESSOR_STAGES, stage) < 0) {throw new Error('stage should be one of ' + PROCESSOR_STAGES);}var funcs = dataProcessorFuncs[stage] || (dataProcessorFuncs[stage] = []); funcs.push(processorFunc);};/*** Usage:* registerAction('someAction', 'someEvent', function () { ... });* registerAction('someAction', function () { ... });* registerAction(* {type: 'someAction', event: 'someEvent', update: 'updateView'},* function () { ... }* );** @param {(string|Object)} actionInfo* @param {string} actionInfo.type* @param {string} [actionInfo.event]* @param {string} [actionInfo.update]* @param {string} [eventName]* @param {Function} action*/echarts.registerAction = function (actionInfo, eventName, action) {if (typeof eventName === 'function') {action = eventName;eventName = '';}var actionType = zrUtil.isObject(actionInfo)actionInfo.type: ([actionInfo, actionInfo = {event: eventName}][0]);// Event name is all lowercaseactionInfo.event = (actionInfo.event || actionType).toLowerCase();eventName = actionInfo.event;if (!actions[actionType]) {actions[actionType] = {action: action, actionInfo: actionInfo};}eventActionMap[eventName] = actionType;};/*** @param {string} type* @param {*} CoordinateSystem*/echarts.registerCoordinateSystem = function (type, CoordinateSystem) {CoordinateSystemManager.register(type, CoordinateSystem);};/*** @param {*} layout*/echarts.registerLayout = function (layout) {// PENDING All functions ?if (zrUtil.indexOf(layoutFuncs, layout) < 0) {layoutFuncs.push(layout);}};/*** @param {string} stage* @param {Function} visualCodingFunc*/echarts.registerVisualCoding = function (stage, visualCodingFunc) {if (zrUtil.indexOf(VISUAL_CODING_STAGES, stage) < 0) {throw new Error('stage should be one of ' + VISUAL_CODING_STAGES); }var funcs = visualCodingFuncs[stage] || (visualCodingFuncs[stage] = []);funcs.push(visualCodingFunc);};/*** @param {Object} opts*/echarts.extendChartView = function (opts) {return ChartView.extend(opts);};/*** @param {Object} opts*/echarts.extendComponentModel = function (opts) {return ComponentModel.extend(opts);};。

通过代码实例跟我学百度EChart图表控件——百度EChart商业级数据图表控件相关的应用技术

1.1通过代码实例跟我学百度EChart图表控件——在J2EE Web应用系统中应用EChart图表控件的实例1.1.1常用报表开发工具介绍1、常用的报表技术及工具jFreeChart（/jfreechart/download.html）FusionChart（/）HighChart（/）EChart（/index.html）2、从不同角度说明这4个报表工具。

（1）应用场景在应用场景上，因为jFreeChart是一个封装好的Jar包，所以支持在应用程序客户端使用，也可以在网站上使用。

而FusionChart、HighChart、EChart都是用于J2EE平台（说白了就是做网站）的报表呈现，不能在客户端使用。

因此，如果不是在网站上使用，而是想在自己的桌面应用程序上呈现报表，那么就只能选择jFreeChart了。

（2）实现技术在实现技术上，jFreeChart产生的报表是通过Java的绘图工具进行绘制的，而在网站页面的时候，jFreeChart将其转化成一张图片。

而FusionChart是通过JS代码进行编写，最终通过Flash呈现报表，而HighChart、EChart 都是通过最新的HTML5技术实现的。

（3）资源丰富在实现效果方面，基本上所有的报表工具都能实现基本的柱形图、饼图、曲线图等基本的图形。

但是如果要求更高的展现方式，比如通过地图展示，那或许只能通过FusionChart和EChart 了。

而EChart因为是百度的开源项目，所以地图方面做得还不错，。

（4）是否收费jFreeCharts使用免费（也是开源项目），但是API文档和实例是要收费的（囧）。

FusionChart基本功能免费，但是有些功能也是需要收费的。

HighChart个人用是免费的，商用需要授权收费。

Echart是百度的一个开源项目，完全没费。

（5）特色功能ECharts可以通过地图呈现更加震撼的效果，而这是其他三个报表根据所没有的一个展示方式。

运用Echarts组件和Ajax技术展现商业图表

ｌｚｓｇ中商集团１２０００二、下载ＥＣｈａｒｔｓ组件包，解压到指定目录，并在页面文件（如ｄｅｍｏ．ｐｈｐ）的头部引入ｅｓ１．ｊｓ。
运用Ｅｃｈａｒｔｓ组件和Ａｊａｘ技术展现商业图表
王洪九
江汉大学机电与建筑工程学院【摘
湖北武汉
４３０本框架结构，并结合应用实例的开发，介绍了运用Ｅｃｈａｔｓ组件和Ａｊａｘ技术在Ｗｅｂ应用和Ｗｅｂ网站中
ＣｕｓｔｏｍｅｒＮａｍｅ（ｖｃｈａｒ（３０））Ａｍｏｕｎｔ（ｌｆｏａｔ）家乐福２ｏ０ｏ０可多超市８０ｏＯ沃尔玛１６０ｏＯ武商集团１５ｏｏＯ中百便民１８００ｏ中百仓储２３０ｏＯ
实现商业图表展示的方法。【关键词】Ｅｃｈａｒｔｓａｊａｘ图表组件Ｗｅｂ应用中图分类号：ＴＰ３９３文献标识码：Ｂ文章编号：１００９－４０６７（２０１４）２３ — ３６ — ０１
目前，在新一代的ｗｅｂ应用中，需要更多地关注用户体验（ＵｓｅｒＥｘｐｅｒｉｅｎｃｅ），即如何利用计算机和网络技术，为用户提供一个界面美观、
一
其中ＴｅｓｔＤＢ．ｐｈｐ文件用于执行数据查询并返回给调用程序。五、利用ＥＣｈａｒｔｓ组件展现后台数据Ｅｃｈａｒｔｓ提供了许多组件选项用于控制选择图表类型、ｘ轴设置、Ｙ轴设置、数据来源、图表标题、提示文字等。利用这些选项可以轻松实现操纵图表中个组成要素，得到用户满意的各类图表对象。完整的技术文档可参考Ｅｅｈａｒｔｓ在线帮助文档（ｈｔｔｐ：／／ｅｅｈａｒｔｓ．ｂａｉｄｕ．ｃｏ

通过代码实例跟我学百度EChart图表控件——百度EChart商业级数据图表控件图表选项和实例方法的应用实例

1.1通过代码实例跟我学百度EChart图表控件——百度EChart商业级数据图表控件图表选项和实例方法的应用实例1.1.1EChart图表选项option1、EChart图表选项主要包括公共选项、组件选项和数据选项三种类型2、EChart采用多级控制设计由于EChart采用多级控制设计，因此可以通过这三级来满足不同层次的定制和个性化需求：（1）通过option.* 设置全局统一配置；（2）通过option.series.* 设置特定系列（比如为饼图）系列图特殊配置，其优先级高于option 内的同名配置；（3）通过option.series.data.* 设置特定数据项的特殊配置，最高优先级；3、主要的图表选项说明1.1.2EChart实例方法的功能说明echarts实例中的非get接口方法均返回自身self（echarts实例本身），因此支持链式调用。

1、{self} setOption方法该方法的参数为两个，第1个参数为{Object} option，第2个参数为{boolean=} notMerge。

该方法为万能接口，配置图表实例任何可配置选项，多次调用时option选项默认是合并（merge）的，merge的设计可以让setOption很方便的成为更新任何属性的万能方法——比如如果仅需要改title文字，则仅需要：setOption({title : {text : '新标题'}});如果不需要合并（merge）的功能效果，可以通过notMerger参数为true阻止与上次option 的合并，如多次setOption间数据改变、长度不一致等的场景。

从2.0.0版本开始支持timeline组件，option中包含timeline时每一个独立的option应该放置到命名为options的数组内，如myCharts.setOption({timeline : {...},options : [{ // option1的定义参数title : {...},series : [...]},{...}, // option2的定义参数...]});2、{Object} getOption方法该方法返回void，主要的功能是返回内部持有的当前显示option克隆（拷贝）。

开源echarts案例

1. 背景介绍ECharts是百度开源的一款基于JavaScript的数据可视化库，它提供了丰富的图表类型和交互功能，可以帮助开发者快速构建各种复杂的可视化应用。

ECharts支持的图表类型包括折线图、柱状图、饼图、雷达图、地图等，还可以实现数据的动态更新、缩放、平移等交互操作。

在本文中，我们将介绍一个关于全国各省份GDP增长情况的案例。

通过使用ECharts，我们可以将各省份的GDP增长率以柱状图的形式展示出来，并提供交互功能，使用户可以自由选择查看不同年份的数据。

2. 案例过程2.1 数据准备首先，我们需要准备好用于展示的数据。

假设我们有一份包含了全国各省份从2010年到2020年的GDP增长率数据的CSV文件。

文件的格式如下：省份,2010,2011,2012,2013,2014,2015,2016,2017,2018,2019,2020北京,10.1,9.5,8.3,7.8,7.2,6.5,6.0,5.5,5.0,4.5,4.0上海,11.2,10.6,9.4,8.9,8.3,7.6,7.1,6.6,6.1,5.6,5.1广东,12.3,11.7,10.5,10.0,9.4,8.7,8.2,7.7,7.2,6.7,6.2...我们可以使用Python的pandas库来读取CSV文件，并将数据转换为ECharts所需的格式。

import pandas as pddata = pd.read_csv('gdp_growth.csv')2.2 页面布局接下来，我们需要创建一个HTML页面来展示图表。

页面的基本结构如下：<!DOCTYPE html><html><head><meta charset="utf-8"><title>GDP增长率</title><script src=""></script></head><body><div id="chart" style="width: 800px; height: 600px;"></div><script>// JavaScript代码将在这里编写</script></body></html>在页面中，我们引入了ECharts的JavaScript文件，并创建了一个具有一定宽高的div元素用于展示图表。

echart实现图例legend绑定数据

echart实现图例legend绑定数据Echarts是一种用于创建交互式图表和数据可视化的JavaScript库，它提供了一系列灵活且功能强大的图表类型和可视化选项。

其中，图例（legend）是指图表中用来标识不同数据系列的符号和说明。

在Echarts中，可以通过设置legend组件的数据来绑定图例。

图例数据通常与图表的数据系列对应，用于展示每个数据系列的名称和样式。

要使用Echarts的图例功能，首先要确定要显示的数据系列有哪些。

例如，假设我们要创建一个柱状图，包含两个数据系列A和B，分别用红色和蓝色表示。

首先，我们需要在Echarts的option配置项中添加一个legend组件，并设置它的data属性。

data属性是一个数组，包含了每个数据系列的名称。

```option =...legend:data: ['系列A', '系列B']},...```接下来，我们需要设置图表的数据系列。

在Echarts中，数据系列通过series属性来设置。

对于柱状图，需要使用series.bar属性，并设置其data属性。

data属性是一个二维数组，包含每个数据系列的数据。

```option =...series:name: '系列A',type: 'bar',data: [100, 200, 300, 400, 500]},name: '系列B',type: 'bar',data: [200, 300, 400, 500, 600]}],...```通过设置name属性，可以将每个数据系列与图例中的对应项关联起来。

最后，将option配置项应用到图表中即可实现图例绑定数据的效果。

```var myChart = echarts.init(document.getElementById('chart'));myChart.setOption(option);```这样，就可以在图表中看到对应的图例，并且图例的样式与数据系列的样式一致。

echarts数据可视化方法

echarts数据可视化方法ECharts是一种使用JavaScript实现的开源可视化库，可以用于生成各种类型的图表和数据可视化效果。

下面是一些使用ECharts进行数据可视化的基本步骤：1. 引入ECharts库：首先，你需要在你的网页中引入ECharts库。

你可以从ECharts官网下载最新版本的库文件，并将其引入到你的HTML文件中。

2. 准备DOM容器：在开始可视化之前，你需要准备一个DOM容器，用于放置生成的图表。

你需要为这个容器指定一个唯一的ID，以便ECharts能够找到它。

3. 初始化图表：使用ECharts提供的API，初始化一个图表实例。

你需要指定图表的类型、配置项和数据。

4. 配置图表选项：根据需要，你可以配置图表的标题、图例、提示框等。

你还可以通过设置数据轴的选项来控制图表的数据展示方式。

5. 渲染图表：最后，使用ECharts提供的渲染方法，将图表渲染到指定的DOM容器中。

具体来说，以下是一个简单的使用ECharts生成柱状图的示例代码：```javascript// 引入ECharts库var echarts = require('echarts');// 准备DOM容器var myChart = (('main'));// 配置图表选项和数据var option = {title: {text: 'ECharts 示例'},tooltip: {},legend: {data: ['销量']},xAxis: {data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"] },yAxis: {},series: [{name: '销量',type: 'bar',data: [5, 20, 36, 10, 10, 20]}]};// 将配置项设置给图表实例对象(option);```在这个示例中，我们首先引入了ECharts库，然后使用`()`方法初始化了一个名为`myChart`的图表实例。

echarts使用指导

echarts使用指导ECharts 是一个由百度开发的基于 JavaScript 的数据可视化库，它可以用来创建丰富多彩的图表和数据展示。

下面我会从安装、基本用法和常见图表类型等方面来介绍 ECharts 的使用指导。

1. 安装：首先，你可以通过 npm 或 yarn 进行安装，也可以直接下载 ECharts 的压缩包。

如果你使用 npm，可以在命令行中输入以下命令来安装 ECharts：npm install echarts --save。

安装完成后，你就可以在项目中引入 ECharts 来使用了。

2. 基本用法：在页面中引入 ECharts 的 JavaScript 文件，然后创建一个用来展示图表的 DOM 元素，接着通过 JavaScript 代码初始化ECharts 实例并设置图表的配置项和数据，最后将图表实例和数据绑定到 DOM 元素上即可显示图表。

3. 常见图表类型：ECharts 支持多种常见的图表类型，包括折线图、柱状图、饼图、散点图、雷达图等。

你可以根据自己的需求选择合适的图表类型，并且通过配置项来自定义图表的样式和交互效果。

4. 数据更新与交互：ECharts 提供了丰富的 API 和事件处理机制，可以实现图表的数据更新、图表之间的联动以及用户交互等功能。

你可以通过调用 API 来更新图表的数据，也可以监听事件来实现图表之间的联动和交互效果。

总的来说，ECharts 是一个功能强大、灵活多样的数据可视化库，通过学习官方文档和示例，你可以更深入地了解其使用方法和特性，从而更好地应用于实际项目中。

希望这些信息能够帮助你更好地使用 ECharts。

echarts 范例 -回复

echarts 范例-回复"echarts 范例"，以中括号内的内容为主题，写一篇1500-2000字文章，一步一步回答。

第一步：介绍echartsecharts是一款基于JavaScript的可视化图表库，由百度开发并维护。

它具备强大的功能和灵活的配置，可以轻松地创建漂亮而交互式的图表，以展示数据的分布、趋势和关系。

echarts支持多种常见的图表类型，包括折线图、柱状图、饼图、散点图等，同时也支持地图、热力图以及3D 图表等。

第二步：引入echarts要使用echarts库，首先需要将echarts的脚本文件引入到HTML页面中。

可以通过script标签来引入，可以使用CDN链接也可以下载到本地引入。

同时，也需要在页面中添加一个具备固定大小的DOM元素，作为图表的容器。

第三步：创建图表实例在引入echarts之后，就可以创建一个echarts实例，用于后续的图表配置和渲染操作。

一般情况下，可以通过调用echarts.init方法，并传入一个DOM元素，来创建一个初始化的echarts实例。

第四步：配置图表选项创建echarts实例后，需要定义图表的展示选项。

可以通过设置一个options对象来配置图表的各种属性，包括标题、图例、数据等等。

例如，可以设置图表的标题文本、副标题文本、图标的颜色、数据等。

第五步：设置数据echarts支持多种数据格式，可以根据具体的需求选择合适的数据格式。

常见的数据格式包括JSON数组、CSV、JSON对象等。

根据所选的数据格式，将相应的数据传递给图表的options对象，以便图表根据数据进行渲染。

第六步：渲染图表在配置完成后，可以通过调用echarts实例的setOption方法，将配置好的选项传递给echarts实例，以便实例能够渲染出对应的图表。

同时，还可以通过调用echarts实例的resize方法，对图表的大小进行调整。

第七步：交互和动态更新echarts还支持各种交互和动态更新的功能。

echarts 范例

ECharts 是一个使用 JavaScript 实现的开源可视化库，可以生成各种丰富的图表。

以下是一些 ECharts 的示例：1. 折线图：```javascriptvar option = {title: {text: '折线图堆叠'},tooltip: {trigger: 'axis'},legend: {data: ['邮件营销', '联盟广告', '视频广告', '直接访问', '搜索引擎']},grid: {left: '3%',right: '4%',bottom: '3%',containLabel: true},toolbox: {feature: {saveAsImage: {}}},xAxis: {type: 'category',boundaryGap: false,data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']},yAxis: {type: 'value'},series: [{name: '邮件营销',type: 'line',stack: '总量',data: [120, 132, 101, 134, 90, 230, 210]},{name: '联盟广告',type: 'line',stack: '总量',data: [220, 182, 191, 234, 290, 330, 310]},{name: '视频广告',type: 'line',stack: '总量',data: [150, 232, 201, 154, 190, 330, 410]},{name: '直接访问',type: 'line',stack: '总量',data: [320, 332, 301, 334, 390, 330, 320]},{name: '搜索引擎',type: 'line',stack: '总量',data: [820, 932, 901, 934, 1290, 1330, 1320]}]};```这个示例展示了如何创建一个堆叠的折线图，其中包含5种不同来源的访问数据。

百度EChar图代码实现

主页面注意红色部分引用。

本人也是经过数实践，才把代码动态集成到项目里，希望喜欢的下载，应用到项目中，如果不明白请留言沟通。

<!DOCTYPE html><html xmlns="/1999/xhtml"><head><title></title><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/><script src="../../../JQuery/jquery-1.8.3.js"></script><script src="../../../JQuery/echarts/js/esl.js"></script><link href="../../../JQuery-easyui/themes/icon.css" rel="stylesheet" type="text/css" /><link href="../../../JQuery-easyui/themes/default/easyui.css" rel="stylesheet" type="text/css"/> <script src="../../../JQuery-easyui/jquery.min.js"></script><script src="../../../JQuery-easyui/jquery.easyui.min.js" type="text/javascript"></script><script src="../../../JQuery-easyui/locale/easyui-lang-zh_CN.js"></script><script src="../../../JQuery/My97Date/WdatePicker.js"></script><script type="text/javascript">$("#loadCover").remove();</script></head><body><div data-options="region:'north'" style="height: 65px"><div class="easyui-panel" fit="true" title="查询条件"><div style="float: left; padding-top: 8px">  起始年月：</div><div style="float: left; padding-top: 4px"><input id="StartYear" name="StartYear" data-controltype="My97Date" style="width: 50px; line-height: 20px;" onclick="WdatePicker({ dateFmt: 'yyyy-MM' })" /></div><div style="float: left; padding-top: 8px">  截止年月：</div><div style="float: left; padding-top: 4px"><input id="EndYear" name="EndYear" data-controltype="My97Date" style="width: 50px; line-height: 20px;" onclick="WdatePicker({ dateFmt: 'yyyy-MM' })" /></div><div style="float: left; padding-left: 5px"><a id="btnSearch" href="#" class="easyui-linkbutton" data-options="iconCls:'icon-search'">查询</a></div></div></div><div id="myLine4" style="width:1200px; height:380px;margin:0 auto; padding-top:60px; "></div></body></html><script type="text/javascript">//起始日期var date = new Date();var a = date.getFullYear() + "-01";$("#StartYear").val(a);//终止日期var b = date.getFullYear() + "-" + pad(date.getMonth() + 1, 2);$("#EndYear").val(b);function pad(num, n) {varlen = num.toString().length;while (len< n) {num = "0" + num;len++;}returnnum;}varfileLocation = '../../../JQuery/echarts/js/echarts'; require.config({paths: {echarts: fileLocation,'echarts/chart/bar': fileLocation}});// 作为入口require(['echarts','echarts/chart/bar'],displayChartinit);functiondisplayChartinit(ec) {var barChart4 = ec.init(document.getElementById('myLine4'));$.ajax({type: "post",dataType: "text", traditional: true,data: { state: "get_montn", stdate: a, enddate: b },url: "../../../SubMod/RXM/RXM_201601041329/RXM_1329_Handler.ashx", async: false,//表示同步执行success: function (data, textStatus) {if (data != "") {varstrJson = JSON.parse(data);//日期var array = [];varstr = strJson[0].sdate;varaa = str.split(',');for (vari = 0; i<aa.length; i++)array.push(aa[i]);vararrayD = [];varstrD = strJson[0].ssum;varaaD = strD.split(',');for (vari = 0; i<aaD.length; i++)arrayD.push(aaD[i]);var option3 = {title: {text: '',subtext: ''},tooltip: {trigger: 'axis'},legend: {data: ['物资采购招标量分析']},toolbox: {show: true,feature: {mark: { show: true },dataView: { show: true, readOnly: false },magicType: { show: true, type: ['line', 'bar'] },restore: { show: true },saveAsImage: { show: true }}},calculable: true,xAxis: [{type: 'category',data: array}],yAxis: [{type: 'value'}],series: [{name: '物资采购招标量分析',type: 'bar',data: arrayD,markPoint: {data: [{ type: 'max', name: '最大值' },{ type: 'min', name: '最小值' }]},markLine: {data: [{ type: 'average', name: '平均值' }]},itemStyle: {normal: {label: {show: true,position: 'top',formatter: '{c}'}}}}]};barChart4.hideLoading();barChart4.setOption(option3, true);}}});}$('#btnSearch').click(function () {initchar();});functioninitchar() {varfileLocation = '../../../JQuery/echarts/js/echarts';require.config({paths: {echarts: fileLocation,'echarts/chart/bar': fileLocation}});// 作为入口require(['echarts','echarts/chart/bar'],displayChart);}functiondisplayChart(ec) {var barChart4 = ec.init(document.getElementById('myLine4'));$.ajax({type: "post",dataType: "text", traditional: true,data: { state: "get_montn", stdate:$("#StartYear").val(),enddate:$("#EndYear").val()}, url: "../../../SubMod/RXM/RXM_201601041329/RXM_1329_Handler.ashx", async: false,//表示同步执行success: function (data, textStatus) {if (data != "") {varstrJson = JSON.parse(data);//日期var array = [];varstr = strJson[0].sdate;varaa = str.split(',');for (vari = 0; i<aa.length; i++)array.push(aa[i]);vararrayD = [];varstrD = strJson[0].ssum;varaaD = strD.split(',');for (vari = 0; i<aaD.length; i++)arrayD.push(aaD[i]);var option3 = {title: {text: '',subtext: ''},tooltip: {trigger: 'axis'},legend: {data: ['物资采购招标量分析']},toolbox: {show: true,feature: {mark: { show: true },dataView: { show: true, readOnly: false },magicType: { show: true, type: ['line', 'bar'] },restore: { show: true },saveAsImage: { show: true }}},calculable: true,xAxis: [{type: 'category',data: array}],yAxis: [{type: 'value'}],series: [{name: '物资采购招标量分析',type: 'bar',data: arrayD,markPoint: {data: [{ type: 'max', name: '最大值' },{ type: 'min', name: '最小值' }]},markLine: {data: [{ type: 'average', name: '平均值' }]},itemStyle: {normal: {label: {show: true,position: 'top',formatter: '{c}'}}}}]};barChart4.hideLoading();barChart4.setOption(option3, true);}}});}</script>RXM_1329_Handler.ashx处理页面：<%@ WebHandler Language="C#" Class="RXM_1329_Handler" %>using System;usingSystem.Web;usingSystem.Text;usingSystem.Data;public class RXM_1329_Handler : IHttpHandler{public void ProcessRequest(HttpContext context){context.Response.ContentType = "application/json";context.Response.AddHeader("Pragma", "No-Cache");context.Response.CacheControl = "no-cache";string state = context.Request.Params["state"], strJson = string.Empty; switch (state){case "get_montn":strJson = Get_Montn(context);break;}context.Response.Write(strJson);}private string Get_Montn(HttpContext context){var s = context.Request.Params["stdate"];var d = context.Request.Params["enddate"]; StringBuildersmonth = new StringBuilder();if (s != "" & d != ""){string[] s_lis = s.Split('-');string[] d_lis = d.Split('-');intinm = int.Parse(s_lis[0]);intinm_t = int.Parse(s_lis[1]);intiny = int.Parse(d_lis[0]);intiny_y = int.Parse(d_lis[1]);if (s_lis[0] == d_lis[0]){for (inti = 1; i<= iny_y; i++){if (i> 9)smonth.Append("," + iny + "-" + i);elsesmonth.Append("," + iny + "-0" + i);}}else if (inm<iny){for (int y = 0; y <iny - inm; y++){intynumt = inm + y;for (inti = inm_t; i<= 12; i++){if (i> 9)smonth.Append("," + ynumt + "-" + i);elsesmonth.Append("," + ynumt + "-0" + i);}}for (inti = 1; i<= iny_y; i++){if (i> 9)smonth.Append("," + iny + "-" + i);elsesmonth.Append("," + iny + "-0" + i);}}else{return "";}}StringBuildersb = new StringBuilder();if (smonth.ToString() != ""){string[] bb = smonth.ToString().Substring(1).Split(',');var entity = new Enpower.DLL.Globle.DataEntity();string strCsum = "";//数量string strDate = "";//日期for (int j = 0; j <bb.Length; j++){//这是正式sql// entity.sqlText = "select CSUM,SORT_DATE from (SELECT COUNT(*) CSUM, SORT_DATE " +// " FROM (SELECT S.P_CODE, " +// " S.P_NAME, " +// " P_CODE, " +// " S.PROJ_CODE, " +// " TO_CHAR(MIN(O.FOUND_DATE), 'yyyy-MM') SORT_DATE " +// " FROM INV_SCHEME S, INV_TENDER_DOC D, INV_DOC_OUT O " +// " WHERE S.ID = D.MAIN_ID " +// " AND D.BID_STATUS = '已批准' " +// " AND S.ID = O.MAIN_ID " +// " GROUP BY S.P_CODE, S.P_NAME, P_CODE, S.PROJ_CODE) A " +//" WHERE 1=1 " +// " GROUP BY SORT_DATE ) where sort_date='" + bb[j] + "' ";entity.sqlText = "select CSUM,SORT_DATE from test_zhongbiaoliang t where sort_date>='"+s+"' and sort_date<='"+d+"'";Enpower.DLL.Facade.IDbHelper helper = new Enpower.DLL.Facade.DbHelper();entity = helper.askEntry(entity);System.Data.DataTabledt = entity.dataSet.Tables[0];//这里是测试写法for (inti = 0; i<dt.Rows.Count; i++){System.Data.DataRowdr = dt.Rows[i];strCsum += "," + dr["CSUM"].ToString();strDate += "," + dr["SORT_DATE"].ToString();}//这是正式写法//if (dt != null &dt.Rows.Count != 0)// strCsum += "," + dt.Rows[0]["CSUM"].ToString();//else// strCsum += ",0";}sb.Append("[{");if (strCsum != "" &smonth.ToString() != ""){sb.Append("\"ssum\":\"" + strCsum.Substring(1) + "\",");sb.Append("\"sdate\":\"" + smonth.ToString().Substring(1) + "\"");}else{sb.Append("\"ssum\":\"\",");sb.Append("\"sdate\":\"\"");}sb.Append("}]");}returnsb.ToString();}/// <summary>/// 统一构造List的jon方法/// </summary>/// <param name="dt"></param>/// <returns></returns>public string DataJosn(System.Data.DataTabledt){System.Text.StringBuildersbt = new StringBuilder();for (inti = 0; i<dt.Rows.Count; i++){DataRowdrw = dt.Rows[i];System.Text.StringBuilderttt = new System.Text.StringBuilder();sbt.Append(",{");for (int j = 0; j <dt.Columns.Count; j++){stringscolname = dt.Columns[j].ToString();if ((dt.Columns[j].DataType).FullName == "System.String")ttt.Append(",\"" + scolname + "\":\"" + drw[scolname].ToString() + "\"");else if ((dt.Columns[j].DataType).FullName == "System.DateTime"){if (drw[scolname].ToString() != "")ttt.Append(",\"" + scolname + "\":\"" + Convert.ToDateTime(drw[scolname].ToString()).ToShortDateString() + "\"");}elsettt.Append(",\"" + scolname + "\":\"" + drw[scolname].ToString() + "\"");}sbt.Append(ttt.ToString().Substring(1));sbt.Append("}");}stringstmp = "";if (sbt.ToString() != "")stmp = "[" + sbt.ToString().Substring(1) + "]";elsestmp = "[]"; returnstmp;} publicboolIsReusable { get {return false;}}}。

echart css代码

ECharts 是一个使用JavaScript 编写的开源可视化库，用于在网页上生成各种图表。

CSS 代码通常用于样式化HTML 元素，包括 ECharts 生成的图表。

如果你想使用CSS 来定制ECharts 图表，你需要首先理解ECharts 是如何生成图表的。

ECharts 生成的图表实际上是一个HTML 元素，你可以像操作任何其他HTML 元素一样操作它。

例如，如果你想改变图表的背景颜色，你可以使用CSS 选择器来选择这个元素，并设置它的背景颜色。

假设你的ECharts 图表有一个 id "myChart"，你可以这样做：
```css
#myChart {
background-color: #f0f0f0;
}
```
这个 CSS 代码将选择 id 为 "myChart" 的元素，并将其背景颜色设置为灰色。

请注意，这只是一种可能的方法。

实际上，ECharts 提供了许多配置选项，允许你定制图表的样式，而无需使用 CSS。

例如，你可以使用ECharts 的`backgroundColor` 配置选项来设置图表的背景颜色：
```javascript
var myChart = echarts.init(document.getElementById('main'));
myChart.setOption({
backgroundColor: '#f0f0f0'
});
```
这个 JavaScript 代码将设置 ECharts 图表的背景颜色为灰色。

这通常比使用 CSS 更直接和灵活。

echart的基本使用方法

ECharts 是一个由百度开发的开源 JavaScript 数据可视化库，用于在网页上创建交互式的图表和数据可视化。

以下是 ECharts 的基本使用方法：
步骤：
1.引入 ECharts 库：
在 HTML 文件中引入 ECharts 库。

可以从官方网站下载 ECharts 或者通过CDN 引入。

2.准备一个容器：
在 HTML 文件中创建一个用于显示图表的容器。

这通常是一个div元素。

3.初始化图表实例：
在 JavaScript 中，使用 ECharts 初始化一个图表实例。

4.配置图表选项：
配置图表的各种选项，包括图表类型、数据、样式等。

5.设置图表选项并渲染：
将配置好的图表选项设置给图表实例，并调用setOption方法进行渲染。

至此，已经完成了一个简单的 ECharts 图表的创建和渲染。

完整示例：
这个例子创建了一个简单的柱状图。

可以根据需要修改配置选项，创建折线图、饼图等不同类型的图表。

详细的配置和图表类型可以在 ECharts 官方文档中找到。

echarts数据可视化代码

echarts数据可视化代码【原创实用版】目录1.ECharts 简介2.ECharts 的优势和特点3.ECharts 的使用方法和基本语法4.ECharts 的数据可视化示例5.ECharts 的发展前景和应用场景正文一、ECharts 简介ECharts，即 Enterprise Charts，是一款开源的、基于 HTML5 Canvas 技术的数据可视化图表库。

它拥有丰富的图表类型，能够满足各种数据展示需求，如折线图、柱状图、饼图、散点图等。

ECharts 具有轻量级、易于使用、易于定制和强大的功能等特点，因此在数据可视化领域受到了广泛的关注和使用。

二、ECharts 的优势和特点1.轻量级：ECharts 使用 HTML5 Canvas 技术，占用资源少，加载速度快，能够在网页上快速展示图表。

2.丰富的图表类型：ECharts 支持多种图表类型，可以满足不同场景下的数据展示需求。

3.易于使用：ECharts 提供了简单的 API 和基本的语法，用户只需几行代码即可实现数据可视化。

4.易于定制：ECharts 允许用户自由定制图表样式，如颜色、字体等，以满足个性化展示需求。

5.强大的功能：ECharts 具备丰富的插件和扩展功能，如数据区域缩放、数据过滤等，可以满足高级用户的需求。

三、ECharts 的使用方法和基本语法ECharts 的使用方法非常简单，只需按照以下基本步骤进行操作：1.引入 ECharts 库：在 HTML 文件中引入 ECharts 库，可以通过CDN 或者下载到本地。

2.创建一个图表容器：在 HTML 文件中创建一个 div 元素，设置宽度和高度，作为图表的容器。

3.初始化 ECharts 实例：在 JavaScript 中，创建一个 ECharts 实例，并配置相关参数。

4.设置图表选项：根据需求，设置图表的选项，如标题、图例、坐标轴等。

5.设置数据和图表类型：根据需求，设置数据和图表类型，如折线图、柱状图等。

echarts使用指导

echarts使用指导（实用版）目录1.ECharts 简介2.ECharts 的基本使用3.ECharts 的图表类型4.ECharts 的配置选项5.ECharts 的实战案例正文【1.ECharts 简介】ECharts 是由百度开发的开源的可视化图表库，采用 HTML5Canvas 技术，能够提供直观、交互丰富、可定制的数据可视化展示。

ECharts 支持各种常见的统计图表类型，如饼图、柱状图、折线图等，同时还支持多个图表的联动以及动态数据更新等功能，使得 ECharts 在数据分析、业务监控、数据报表等场景下有着广泛的应用。

【2.ECharts 的基本使用】要使用 ECharts，首先需要在 HTML 文件中引入 ECharts 的 CSS 和 JS 文件，然后在 HTML 中创建一个用于绘制图表的 Canvas 元素。

接下来，通过 JS 代码初始化 ECharts 实例，并使用相应的配置项设置图表的属性。

最后，使用 ECharts 的 API 添加数据和图表类型，即可完成一个基本的 ECharts 图表。

【3.ECharts 的图表类型】ECharts 支持多种图表类型，包括饼图、柱状图、折线图、散点图、面积图、雷达图等。

每种图表类型都有各自的特点和适用场景，例如饼图适合展示各类别数据占比，柱状图适合比较各项数据大小，折线图适合展示数据随时间变化的趋势等。

【4.ECharts 的配置选项】ECharts 提供了丰富的配置选项，可以满足各种定制化的需求。

例如，可以通过设置图表的标题、图例、坐标轴、数据标签等属性，来修改图表的显示效果；可以通过设置数据区间、分组、序列等属性，来控制图表的数据展示方式；还可以通过设置动画、交互、工具栏等属性，来提升图表的交互性和可用性。

【5.ECharts 的实战案例】以下是一个使用 ECharts 的实战案例，用于展示某电商平台最近一周的销售额数据。

首先，在 HTML 文件中引入 ECharts 的 CSS 和 JS 文件，并在HTML 中创建一个用于绘制图表的 Canvas 元素。

echart实例

echart实例一、什么是echartechart是一款由百度开发的优秀的数据可视化工具，它提供了丰富的图表展示效果和交互功能，帮助用户更好地展示数据，发现数据中的规律和趋势。

二、echart的特点echart具有以下几个特点：1. 轻量级echart采用了模块化设计，提供了丰富的图表组件，但是整个库的体积相对较小，加载和使用都非常方便。

2. 多样化的图表类型echart提供了多种图表类型，包括折线图、柱状图、散点图、饼图等等，用户可以根据自身需求选择合适的图表类型进行展示。

3. 强大的交互功能echart支持用户进行缩放、悬停、点击等交互操作，可以通过设置监听事件来实现与其他组件的联动。

4. 可定制化echart提供了丰富的配置项，用户可以根据自身需求对图表进行个性化定制，调整颜色、样式、标签等等，使得图表更加符合要求。

三、echart的使用步骤使用echart实现图表展示的步骤如下：1. 引入echart库在HTML文件的标签中引入echart库的JS文件。

<div id="chart-container"></div>3. 初始化echart对象在JS文件中，通过调用echarts.init()方法，传入容器的DOM对象获取echart 对象。

var chart = echarts.init(document.getElementById('chart-container'));4. 配置图表参数通过设置echart对象的option属性，配置图表的样式、数据、交互等参数。

chart.setOption({// 配置项...});5. 渲染图表调用echart对象的setOption()方法，渲染图表到容器中。

开源echarts案例

开源echarts案例【实用版】目录1.ECharts 简介2.开源 ECharts 案例的优势3.ECharts 案例的具体应用4.ECharts 案例的展望正文1.ECharts 简介ECharts，即 Enterprise Charts，是一款基于 HTML5 Canvas 技术的图表库，由百度开发并开源。

ECharts 具有灵活性、易用性和丰富的图表类型，能够满足各种数据可视化的需求。

它采用纯 JavaScript 编写，兼容各种浏览器，并且提供了丰富的插件和扩展，使得开发者可以轻松地实现各种定制化的数据可视化效果。

2.开源 ECharts 案例的优势开源 ECharts 案例具有以下几个优势：（1）丰富的图表类型：ECharts 提供了包括折线图、柱状图、饼图、散点图等在内的 20 多种图表类型，能够满足各种数据可视化的需求。

（2）插件和扩展：ECharts 具有丰富的插件和扩展，例如数据区域缩放、数据过滤、数据联动等，使得开发者可以轻松地实现各种定制化的数据可视化效果。

（3）易用性和灵活性：ECharts 采用纯 JavaScript 编写，兼容各种浏览器，并且提供了简单易用的 API，使得开发者可以轻松地实现数据可视化。

3.ECharts 案例的具体应用ECharts 案例在各个领域都有广泛的应用，例如企业数据分析、网站数据统计、金融数据可视化等。

以下是一些具体的 ECharts 案例：（1）企业数据分析：企业可以使用 ECharts 对销售数据、用户数据等进行可视化分析，以便更好地了解业务状况和趋势。

（2）网站数据统计：网站可以使用 ECharts 对访问量、用户行为等数据进行统计和分析，以便更好地了解用户需求和优化网站体验。

（3）金融数据可视化：金融行业可以使用 ECharts 对股票走势、基金净值等数据进行可视化展示，以便投资者更好地了解市场状况和做出投资决策。

4.ECharts 案例的展望随着数据可视化技术的发展和应用场景的丰富，ECharts 案例在未来将会有更广泛的应用和更大的发展空间。

echarts 级数曲面

ECharts 是一个基于JavaScript 的开源可视化库，用于创建交互式的数据可视化图表。

在ECharts 中，"级数曲面"（Surface Chart）是一种用来展示三维数据的图表类型。

级数曲面图由一个平面或者网格构成，其中平面上每个点的高度对应于数据中的一个值。

具体来说，级数曲面图由x 轴、y 轴和z 轴组成，其中x 和y 轴表示坐标平面的位置，z 轴表示该位置对应的数值。

要创建一个级数曲面图，首先需要确定每个点的位置和高度。

这个可以通过一个二维数组或矩阵来表示，数组的每个元素代表一个坐标点。

然后，可以使用ECharts 的`series`配置项中的`type`属性设置为`'surface'`来创建级数曲面图。

下面是一个简单的例子，展示了如何使用ECharts 创建一个级数曲面图：```javascript// 数据var data = [[0, 0, 0], [0, 1, 1], [0, 2, 2], [0, 3, 3],[1, 0, 1], [1, 1, 2], [1, 2, 3], [1, 3, 4],[2, 0, 2], [2, 1, 3], [2, 2, 4], [2, 3, 5],[3, 0, 3], [3, 1, 4], [3, 2, 5], [3, 3, 6]];// 创建ECharts 实例var myChart = echarts.init(document.getElementById('chart'));// 配置项var option = {tooltip: {show: true},xAxis3D: {},yAxis3D: {},zAxis3D: {},grid3D: {},series: [{type: 'surface',data: data}]};// 渲染图表myChart.setOption(option);```在这个例子中，我们使用了一个简单的4x4 的数据矩阵，每个点的坐标和高度都由输入数据给出。

1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。

<title>EChart（单文件模块化）应用示例页面</title>
<link href="./css/demoOne.css" rel="stylesheet" type="text/css">

<script src="Javascript/lib/jquery-2.1.3.min.js" type="text/javascript"></script>
*/
barChartObject = ec.init(document.getElementById('echartWarperDivTagID'));
var ecConfig = require('echarts/config');
/** 为目标图表设置相关的参数
*/
var option = {
tooltip: { show: true
};
</script>
<script src="Javascript/demo/echartEventDemoOne.js" type="text/javascript"></script>
<body>
杨教授工作室，版权所1有，盗版必究， 1/7 页
杨教授工作室精心创作的优秀程序员职业提升必读系列资料
 <div id="echartWarperDivTagID"> </div> <input type="text" id="xAxisDataTextTagID" /> </body> </html> 2、echartEventDemoOne.js 的 JS 程序代码 $(function(){
杨教授工作室精心创作的优秀程序员职业提升必读系EChart 商业级数据图表添加事件的应用实例
1、相关的示例 HTML 页面代码
<!doctype html>
<html>
<head>
<meta charset="utf-8">
//鼠标指向图表时将显示出相关的动态数据
},
legend: {
/** legend 设置图表的图例，其中的 data 代表图例内容数组，数组项通常为{string}，每一项代表一个系列的 name。因此需要与下面的
series 选项中的 name 定义保持一致性。
*/ data:['每周下载量']
表模块（为图表设置相关的参数和创建出目标图表对象）。目前只需要柱状图，如果还需要其它类型的只需要引入相关的图表模块（如
'echarts/chart/line','echarts/chart/map'等示例）。 */ require( [ 'echarts',
杨教授工作室，版权所2有，盗版必究， 2/7 页
/** （3）为模块加载器配置 echarts 的路径（从当前的 HTML 页面链接到 echarts.js 文件的
相对目录关系），定义所需图表路径 */ var barChartObject; require.config({ paths: { /** 下面的语句也可以采用如此形式：'echarts': './Javascript/lib' */ echarts: './Javascript/lib' } }); /** （4）动态加载 echarts 和按需加载相关的图表模块，然后在回调函数中开始使用目标图
务器端或者在 JSP 页面中从 request 对象中获得
*/
var barDataArrayObject_JSon ={
"xAxisDataValueObject":["C 语言","C++语言","Java 语言","C#语言","JavaScript 语言
","Ruby 语言"],
"seriesDataValueObject":[5, 20, 40, 10, 10, 20]
<meta
name="viewport"
content="target-densitydpi=devth,initial-scale=1,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no">
<meta name="format-detection" content="telephone=no" />
杨教授工作室精心创作的优秀程序员职业提升必读系列资料
'echarts/chart/bar', ], showdatacllback );
/** 下面为前面的回调函数体的定义
*/
function showdatacllback(ec) {
/** 基于显示图表的 HTML Div 标签的 ID 初始化 echarts 图表对象，并创建出该图表对象
<script src="./Javascript/lib/echarts.js" type="text/javascript"></script>
<script type="text/javascript">
/**
创建与 xAxis 和 series 相关的 JSon 对象的数据，该 JSon 对象的数据可以来自 Web 服
},
xAxis : [
杨教授工作室，版权所3有，盗版必究， 3/7 页
杨教授工作室精心创作的优秀程序员职业提升必读系列资料
{ type : 'category', //横坐标轴为类目型 data : barDataArrayObject_JSon.xAxisDataValueObject
} ], yAxis : [
{ type : 'value'
} ], series : [
{ /** 设置图表所需要的类型和相关的数据值 */ "name":"每周下载量", "type":"bar", "data": barDataArrayObject_JSon.seriesDataValueObject
} ] }; /** 为所创建出的图表对象关联相关的工作参数和加载图表的数据 */ barChartObject.setOption(option); /** 为条状图添加鼠标点击事件，在点击事件中获得当前图表对象的 Option 对象，然后再获得当前所点击的位置处的相关数据 */ barChartObject.on(ecConfig.EVENT.CLICK, clickBarEventResponseFunction);