Skip to content

E
echarts

alon@wen / echarts
与 Fork 源项目一致

从无法访问的项目Fork

通知 1
Star 1
Fork 0
E
echarts

体验新版 GitCode，发现更多精彩内容 >>

提交 73ecf4aa 编写于 作者: L lang
浏览文件
操作

Component

上级 cc6d2c41
隐藏空白更改
内联 并排
Showing with 272 addition and 130 deletion
src/CoordinateSystem.js
浏览文件 @ 73ecf4aa
......@@ -16,9 +16,9 @@ define(function(require) {
update: function (ecModel, api) {
var coordinateSystems = {};
zrUtil.each(coordinateSystemCreators, function (coordinateSystemCreator, type) {
coordinateSystems[type] = coordinateSystemCreator.create(ecModel, api);
}, this);
for (var type in coordinateSystemCreators) {
coordinateSystems[type] = coordinateSystemCreators[type].create(ecModel, api);
}
this._coordinateSystems = coordinateSystems;
},
......
src/chart/ChartView.js
浏览文件 @ 73ecf4aa
......@@ -53,13 +53,12 @@ define(function (require) {
/**
* Create a chart by a given option
*/
Chart.create = function (option) {
var chartType = option.type;
Chart.create = function (chartType) {
var ExtendedChart = chartClassStore[chartType];
if (! ExtendedChart) {
// Error
}
return new ExtendedChart(option);
return new ExtendedChart();
};
return Chart;
......
src/chart/bar/BarView.js
浏览文件 @ 73ecf4aa
......@@ -4,8 +4,6 @@ define(function (require) {
type: 'bar',
init: function () {},
render: function (seriesModel, ecModel, api) {
var coordinateSystemType = seriesModel.get('coordinateSystem');
......
src/component/ComponentView.js
浏览文件 @ 73ecf4aa
define(function (require) {
var zrUtil = require('zrender/core/util');
var Group = require('zrender/container/Group');
var Component = function () {};
var Component = function () {
/**
* @type {module:zrender/container/Group}
* @readOnly
*/
this.group = new Group();
};
Component.prototype = {
......@@ -10,7 +18,7 @@ define(function (require) {
init: function () {},
render: function () {},
render: function (componentModel, ecModel, api) {},
dispose: function () {}
};
......@@ -49,7 +57,7 @@ define(function (require) {
zrUtil.each(componentTypeList, cb, context);
};
Component.create = function (type, option) {
Component.create = function (type) {
var Component = componentClassStore[type];
if (! Component) {
// Error
......
src/component/dataZoom/LegendModel.js 已删除 100644 → 0
浏览文件 @ cc6d2c41
define(function(require) {
'use strict';
return require('../model/Model').extend({
type: 'legend',
init: function (option) {
option.selected = option.selected || {};
},
select: function (name) {
this.option.selected[name] = true;
},
unSelect: function (name) {
this.option.selected[name] = false;
},
isSelected: function (name) {
var selected = this.option.selected;
return !((name in selected) && selected[name]);
}
});
});
\ No newline at end of file
src/component/grid.js 0 → 100644
浏览文件 @ 73ecf4aa
define(function(require) {
'use strict';
// Grid view
require('./ComponentView').extend({
render: function (gridModel, ecModel) {
}
});
});
\ No newline at end of file
src/component/legend.js 0 → 100644
浏览文件 @ 73ecf4aa
/**
* Legend component entry file8
*/
define(function (require) {
require('./legend/LegendModel');
require('./legend/LegendView');
var echarts = require('../echarts');
// Series Filter
echarts.registerProcessor(function (ecModel) {
var legendModel = ecModel.getComponent('legend');
if (legendModel) {
ecModel.filterSeries(function (series) {
return legendModel.isSelected(series.name);
});
}
});
// Series color
echarts.registerVisualCoding(function (ecModel) {
var legendModel = ecModel.getComponent('legend');
if (legendModel) {
var legendData = legendModel.getData();
ecModel.eachSeries(function (series) {
var data = legendData.getByName(series.name);
var color = data && data.get('itemStyle.normal.color');
if (color) {
series.setVisual('color', color);
}
});
}
});
});
\ No newline at end of file
src/component/legend/LegendModel.js
浏览文件 @ 73ecf4aa
......@@ -2,26 +2,76 @@ define(function(require) {
'use strict';
var List = require('../../data/List');
return require('../../model/Component').extend({
type: 'legend',
init: function (option, parentModel, ecModel) {
this.mergeDefaultAndTheme(option, ecModel);
option.selected = option.selected || {};
this._data = List.fromArray(option.data);
},
/**
* @return {module:echarts/data/List}
*/
getData: function () {
return this._data;
},
/**
* @param {string} name
*/
select: function (name) {
this.option.selected[name] = true;
},
/**
* @param {string} name
*/
unSelect: function (name) {
this.option.selected[name] = false;
},
/**
* @param {string} name
*/
isSelected: function (name) {
var selected = this.option.selected;
return !((name in selected) && selected[name]);
},
defaultOption: {
zlevel: 0, // 一级层叠
z: 4, // 二级层叠
show: true,
orient: 'horizontal', // 布局方式，默认为水平布局，可选为：
// 'horizontal' ¦ 'vertical'
x: 'center', // 水平安放位置，默认为全图居中，可选为：
// 'center' ¦ 'left' ¦ 'right'
// ¦ {number}（x坐标，单位px）
y: 'top', // 垂直安放位置，默认为全图顶端，可选为：
// 'top' ¦ 'bottom' ¦ 'center'
// ¦ {number}（y坐标，单位px）
backgroundColor: 'rgba(0,0,0,0)',
borderColor: '#ccc', // 图例边框颜色
borderWidth: 0, // 图例边框线宽，单位px，默认为0（无边框）
padding: 5, // 图例内边距，单位px，默认各方向内边距为5，
// 接受数组分别设定上右下左边距，同css
itemGap: 10, // 各个item之间的间隔，单位px，默认为10，
// 横向布局时为水平间隔，纵向布局时为纵向间隔
itemWidth: 20, // 图例图形宽度
itemHeight: 14, // 图例图形高度
textStyle: {
color: '#333' // 图例文字颜色
},
selectedMode: true // 选择模式，默认开启图例开关
// selected: null, // 配置默认选中状态，可配合LEGEND.SELECTED事件做动态数据载入
// data: [], // 图例内容（详见legend.data，数组中每一项代表一个item
}
});
});
\ No newline at end of file
src/component/legend/seriesFilter.js 已删除 100644 → 0
浏览文件 @ cc6d2c41
define(function (require) {
return function (ecModel) {
var legendModel = ecModel.getComponent('legend');
return ecModel.filterSeries(function (series) {
return legendModel.isSelected(series.name);
}, this);
}
});
\ No newline at end of file
src/processor/AxisRangeFilter.js → src/component/title.js
浏览文件 @ 73ecf4aa
define(function(require) {
'use strict';
return function (ecModel) {
};
});
\ No newline at end of file
src/coord/cartesian/Grid.js
浏览文件 @ 73ecf4aa
......@@ -67,10 +67,10 @@ define(function(require, factory) {
var gridWidth = parsePercent(grid.get('width'), viewportWidth);
var gridHeight = parsePercent(grid.get('height'), viewportHeight);
if (isNaN(gridWidth)) {
gridWidth = gridX2 - gridX;
gridWidth = viewportWidth - gridX2 - gridX;
}
if (isNaN(gridHeight)) {
gridHeight = gridY2 - gridY;
gridHeight = viewportHeight - gridY2 - gridY;
}
this._x = gridX;
......@@ -203,11 +203,6 @@ define(function(require, factory) {
}, this);
this._updateCartesianFromSeries(ecModel);
// Set axis from option
zrUtil.each(axesList, function (axis) {
axis.scale.niceExtent();
});
},
/**
......@@ -266,6 +261,11 @@ define(function(require, factory) {
yAxis.scale.setExtentFromData(axisData.y);
}
});
// Set axis from option
zrUtil.each(this._axesList, function (axis) {
axis.scale.niceExtent();
});
}
};
......
src/coord/cartesian/GridModel.js
浏览文件 @ 73ecf4aa
// Grid 是在有直角坐标系的时候必须要存在的
// 所以这里也要被 Cartesian2D 依赖
define(function(require) {
'use strict';
......@@ -9,10 +11,10 @@ define(function(require) {
defaultOption: {
zlevel: 0, // 一级层叠
z: 0, // 二级层叠
x: '0%',
y: '0%',
x2: '100%',
y2: '100%',
x: 80,
y: 60,
x2: 80,
y2: 60,
// width: {totalWidth} - x - x2,
// height: {totalHeight} - y - y2,
backgroundColor: 'rgba(0,0,0,0)',
......
src/data/List.js
浏览文件 @ 73ecf4aa
......@@ -25,6 +25,10 @@ define(function(require) {
}
}
/**
* @name echarts/data/List~Entry
* @extends {module:echarts/model/Model}
*/
var Entry = Model.extend({
layout: null,
......@@ -193,14 +197,17 @@ define(function(require) {
}
},
getItemByName: function (name) {
// var elements = this.elements;
// for (var i = 0; i < elements.length; i++) {
// if (elements[i].name === name) {
// return elements[i];
// }
// }
// TODO
/**
* @return {module:echarts/data/List~Entry}
*/
getByName: function (name) {
// TODO deep hierarchy
var elements = this.elements;
for (var i = 0; i < elements.length; i++) {
if (elements[i].name === name) {
return elements[i];
}
}
},
clone: function () {
......@@ -219,12 +226,12 @@ define(function(require) {
});
});
List.fromArray = function (data, dimension, parentModel, ecModel) {
List.fromArray = function (data, dimension, parentModel) {
var list = new List();
// Normalize data
list.elements = zrUtil.map(data, function (dataItem, index) {
var entry = new Entry(dataItem, parentModel, ecModel, index);
entry.dimension = dimension;
var entry = new Entry(dataItem, parentModel, null, index);
entry.dimension = dimension || 1;
return entry;
});
return list;
......
src/echarts.js
浏览文件 @ 73ecf4aa
/**
* TODO processor的优先级
* TODO restore
* TODO setTheme
*/
define(function (require) {
var GlobalModel = require('./model/Global');
var zrUtil = require('zrender/core/util');
var Chart = require('./chart/ChartView');
var Component = require('./component/ComponentView');
var ExtensionAPI = require('./api/ExtensionAPI');
var CoordinateSystemManager = require('./CoordinateSystem');
var zrender = require('zrender');
var zrUtil = require('zrender/core/util');
/**
* @inner
......@@ -18,9 +23,12 @@ define(function (require) {
/**
* @module echarts~ECharts
*/
var ECharts = function (dom, theme) {
var ECharts = function (dom, theme, opts) {
opts = opts || {};
this._zr = zrender.init(dom);
this._zr = zrender.init(dom, {
renderer: opts.renderer || 'canvas'
});
this._theme = zrUtil.clone(theme);
......@@ -45,12 +53,17 @@ define(function (require) {
return this._zr;
},
setOption: function (option, merge) {
setOption: function (option, notMerge) {
option = zrUtil.clone(option, true);
var ecModel = new GlobalModel(option, null, this._theme);
this._model = ecModel;
var ecModel = this._model;
if (! ecModel || notMerge) {
ecModel = new GlobalModel(option, null, this._theme);
this._model = ecModel;
}
else {
ecModel.mergeOption(option);
}
this._prepareComponents(ecModel);
......@@ -59,14 +72,24 @@ define(function (require) {
this.updateImmediately();
},
setTheme: function (theme) {
},
getCoordinateSystem: function (type, idx) {
return this._coordinateSystem.get(type, idx);
},
/**
* @return {number}
*/
getWidth: function () {
return this._zr.getWidth();
},
/**
* @return {number}
*/
getHeight: function () {
return this._zr.getHeight();
},
......@@ -91,43 +114,55 @@ define(function (require) {
},
resize: function () {
var ecModel = this._model;
// var ecModel = this._model;
this._coordinateSystem.resize(ecModel, this._extensionAPI);
// this._coordinateSystem.resize(ecModel, this._extensionAPI);
this._doLayout(ecModel);
// this._doVisualCoding(ecModel);
this._doRender(ecModel);
// this._doLayout(ecModel);
// this._doRender(ecModel);
this.updateImmediately();
},
_prepareCharts: function (ecModel) {
var chartUsedMap = {};
zrUtil.each(ecModel.get('series'), function (series, idx) {
var id = getSeriesId(series, idx);
chartUsedMap[id] = true;
var chart = this._chartsMap[id];
var chartsList = this._chartsList;
var chartsMap = this._chartsMap;
for (var i = 0; i < chartsList.length; i++) {
chartsList[i].__keepAlive = false;
}
ecModel.eachSeries(function (seriesModel, idx) {
var id = getSeriesId(seriesModel.option, idx);
var chart = chartsMap[id];
if (! chart) {
chart = Chart.create(series);
chart = Chart.create(seriesModel.type);
if (chart) {
chart.init(this._extensionAPI);
this._chartsMap[id] = chart;
this._chartsList.push(chart);
chartsMap[id] = chart;
chartsList.push(chart);
}
else {
// Error
}
}
chart.__id__ = id;
chart.__keepAlive = true;
chart.__id = id;
}, this);
for (var i = 0; i < this._chartsList.length;) {
var chart = this._chartsList[i];
if (! chartUsedMap[chart.__id__]) {
for (var i = 0; i < chartsList.length;) {
var chart = chartsList[i];
if (! chart.__keepAlive) {
this._zr.remove(chart.group);
chart.dispose();
this._chartsList.splice(i, 1);
delete this._chartsMap[chart.__id__];
chartsList.splice(i, 1);
delete chartsMap[chart.__id];
}
else {
i++;
......@@ -136,30 +171,47 @@ define(function (require) {
},
_prepareComponents: function (ecModel) {
var componentsMap = this._componentsMap;
var componentsList = this._componentsList;
for (var i = 0; i < componentsList.length; i++) {
componentsList[i].__keepAlive = true;
}
Component.eachAvailableComponent(function (componentType) {
var componentsMap = this._componentsMap;
var componentsList = this._componentsList;
var componentOption = ecModel.get(componentType);
var component = componentsMap[componentType];
if (componentOption) {
ecModel.eachComponent(componentType, function (componentModel, idx) {
var id = componentType + '_' + idx;
var component = componentsMap[id];
if (! component) {
// Create and add component
component = Component.create(componentType, componentOption);
component = Component.create(componentType, componentModel);
component.init(this._extensionAPI);
componentsMap[componentType] = component;
componentsMap[id] = component;
componentsList.push(component);
this._zr.add(component.group);
}
component.__id = id;
component.__keepAlive = true;
// Used in rendering
component.__model = componentModel;
}, this);
}, this);
for (var i = 0; i < componentsList.length;) {
var component = componentsList[i];
if (! component.__keepAlive) {
this._zr.remove(component.group);
component.dispose();
componentsList.splice(i, 1);
delete componentsMap[component.__id];
}
else {
if (component) {
// Remove and dispose component
component.dispose();
delete componentsMap[componentType];
componentsList.splice(zrUtil.indexOf(componentsList, component));
}
i++;
}
}, this);
};
},
/**
......@@ -202,21 +254,23 @@ define(function (require) {
* Render each chart and component
*
*/
_doRender: function (ecModel, stateModel) {
_doRender: function (ecModel) {
var api = this._extensionAPI;
// Render all components
zrUtil.each(this._components, function (component) {
component.render(ecModel, stateModel, api);
zrUtil.each(this._componentsList, function (component) {
component.render(component.__model, ecModel, api);
}, this);
// Remove groups of charts
zrUtil.each(this._chartsList, function (chart) {
this._zr.remove(chart.group);
}, this);
// Render all charts
ecModel.eachSeries(function (seriesModel, idx) {
var id = getSeriesId(seriesModel.option, idx);
var chart = this._chartsMap[id];
var group = chart.render(seriesModel, ecModel, api);
this._zr.add(group);
chart.render(seriesModel, ecModel, api);
this._zr.add(chart.group);
}, this);
// TODO
// Remove group of unused chart
},
dispose: function () {
......@@ -243,8 +297,8 @@ define(function (require) {
*/
var echarts = {
init: function (dom, theme) {
return new ECharts(dom, theme);
init: function (dom, theme, opts) {
return new ECharts(dom, theme, opts);
},
/**
......@@ -273,13 +327,11 @@ define(function (require) {
}
},
registerVisualCoding: function (visualCodingFunc) {
visualCodingFuncs.push(visualCodingFunc);
}
};
echarts.registerVisualCoding(require('./visual/defaultColor'));
return echarts;
......
src/model/globalDefault.js
浏览文件 @ 73ecf4aa
......@@ -8,6 +8,9 @@ define({
'#1e90ff','#ff6347','#7b68ee','#00fa9a','#ffd700',
'#6699FF','#ff6666','#3cb371','#b8860b','#30e0e0'],
// 默认需要 Grid 配置项
grid: {},
EVENT: {
// -------全局通用
REFRESH: 'refresh',
......
test/bar.html
浏览文件 @ 73ecf4aa
......@@ -12,28 +12,46 @@
}
</style>
<div id="main"></div>
<script>
require(['echarts', 'echarts/chart/bar'], function (echarts) {
require(['echarts', 'echarts/chart/bar', 'echarts/component/legend'], function (echarts) {
var chart = echarts.init(document.getElementById('main'));
chart.setOption({
grid: {
var xAxisData = [];
var data = [];
for (var i = 0; i < 10000; i++) {
xAxisData.push(Math.random());
data.push(Math.random());
}
console.profile('setOption');
chart.setOption({
legend: {
data: [{
name: 'bar',
itemStyle: {
normal: {
color: 'blue'
}
}
}]
},
xAxis: {
data: ['类目1', '类目2', '类目3', '类目4', '类目5',]
// data: ['类目1', '类目2', '类目3', '类目4', '类目5',]
data: xAxisData
},
yAxis: {
},
series: [{
name: 'bar',
type: 'bar',
data: [0, 1, 2, 3, 4]
// data: [0, 1, 2, 3, 4]
data: data
}]
});
console.profileEnd('setOption');
})
</script>
......
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或