提交 9b9c01d0 编写于 作者: L lang

Pie legend

上级 5ba32706
......@@ -2,8 +2,8 @@ define(function(require) {
'use strict';
var List = require('../../data/List');
var SeriesModel = require('../../model/Series');
var createListFromArray = require('../helper/createListFromArray');
return SeriesModel.extend({
......@@ -12,7 +12,7 @@ define(function(require) {
dependencies: ['grid', 'polar'],
getInitialData: function (option, ecModel) {
return List.fromArray(option.data, this, ecModel);
return createListFromArray(option.data, this, ecModel);
},
defaultOption: {
......
......@@ -151,11 +151,11 @@ define(function (require) {
data.eachItemGraphicEl(function (el, idx) {
var itemModel = data.getItemModel(idx);
var itemStyle = itemModel.getModel('itemStyle.normal').getItemStyle();
// delete itemStyle.color;
// delete itemStyle.symbolSize;
zrUtil.extend(
el.style,
itemModel.getModel('itemStyle.normal').getItemStyle(['color'])
);
zrUtil.extend(el.style, itemStyle);
graphic.setHoverStyle(
el,
itemModel.getModel('itemStyle.emphasis').getItemStyle()
......
define(function(require) {
'use strict';
var List = require('../../data/List');
/**
* Helper function to create a list from option data
*/
return function (data, seriesModel, ecModel) {
var coordinateSystem = seriesModel.get('coordinateSystem');
var dimensions;
var categoryAxisModel;
// FIXME
// 这里 List 跟几个坐标系和坐标系 Model 耦合了
if (coordinateSystem === 'cartesian2d') {
var xAxisModel = ecModel.getComponent('xAxis', seriesModel.get('xAxisIndex'));
var yAxisModel = ecModel.getComponent('yAxis', seriesModel.get('yAxisIndex'));
if (xAxisModel.get('type') === 'category') {
dimensions = [{
name: 'x',
type: 'int'
}, {
name: 'y',
stackable: true
}];
categoryAxisModel = xAxisModel;
}
else if (yAxisModel.get('type') === 'category') {
dimensions = [{
name: 'y',
type: 'int'
}, {
name: 'x',
stackable: true
}];
categoryAxisModel = yAxisModel;
}
else {
// PENDING
var dimSize = data[0] && data[0].length;
// FIXME
var dimensionNames = ['x', 'y', 'z', 'a', 'b', 'c', 'd', 'e'];
if (dimSize >= 2) {
dimensions = dimensionNames.slice(0, dimSize);
}
}
}
else if (coordinateSystem === 'polar') {
var axisFinder = function (axisModel) {
return axisModel.get('polarIndex') === polarIndex;
}
var polarIndex = seriesModel.get('polarIndex') || 0;
var angleAxisModel = ecModel.findComponent('angleAxis', axisFinder);
var radiusAxisModel = ecModel.findComponent('radiusAxis', axisFinder);
if (angleAxisModel.get('type') === 'category') {
dimensions = [{
name: 'angle',
type: 'int'
}, {
name: 'radius',
stackable: true
}];
categoryAxisModel = angleAxisModel;
}
else if (radiusAxisModel.get('type') === 'category') {
dimensions = [{
name: 'radius',
type: 'int'
}, {
name: 'angle',
stackable: true
}];
categoryAxisModel = radiusAxisModel;
}
else {
// PENDING
var dimSize = data[0] && data[0].length;
if (dimSize === 2) {
dimensions = ['radius', 'angle'];
}
else if (dimSize === 3) {
dimensions = ['radius', 'angle', 'value'];
}
}
}
var nameList = [];
if (categoryAxisModel) {
var categories = categoryAxisModel.get('data');
if (categories) {
var dataLen = data.length;
// Ordered data is given explicitly like
// [[1, 0.2], [2, 0.3], [3, 0.15]]
// Pick the category
if (data[0] && data[0].length > 1 && categories.length > dataLen) {
nameList = [];
for (var i = 0; i < dataLen; i++) {
nameList[i] = categories[data[i][0]];
}
}
else {
nameList = categories.slice();
}
}
}
var list = new List(dimensions, seriesModel);
list.initData(data, nameList);
return list;
};
});
\ No newline at end of file
......@@ -2,7 +2,7 @@ define(function(require) {
'use strict';
var List = require('../../data/List');
var createListFromArray = require('../helper/createListFromArray');
var SeriesModel = require('../../model/Series');
return SeriesModel.extend({
......@@ -12,7 +12,7 @@ define(function(require) {
dependencies: ['grid', 'polar'],
getInitialData: function (option, ecModel) {
return List.fromArray(option.data, this, ecModel);
return createListFromArray(option.data, this, ecModel);
},
defaultOption: {
......
......@@ -11,4 +11,6 @@ define(function (require) {
echarts.registerLayout(zrUtil.curry(
require('../layout/pie'), 'pie'
));
echarts.registerProcessor(require('./pie/dataItemFilter'));
});
\ No newline at end of file
......@@ -4,11 +4,33 @@ define(function(require) {
var List = require('../../data/List');
var SeriesModel = require('../../model/Series');
var zrUtil = require('zrender/core/util');
return SeriesModel.extend({
type: 'series.pie',
init: function (option, parentModel, ecModel, dependentModels, seriesIndex) {
SeriesModel.prototype.init.call(
this, option, parentModel, ecModel, dependentModels, seriesIndex
);
// FIXME Keep selected status?
var dataOptMap = {};
zrUtil.each(option.data, function (dataOpt) {
dataOptMap[dataOpt.name] = dataOpt;
});
this._dataOptMap = dataOptMap;
// Enable legend selection for each data item
// Use a function instead of direct access because data reference may changed
this.legendDataProvider = function () {
return this._dataBeforeProcessed;
}
},
getInitialData: function (option, ecModel) {
var list = new List([{
name: 'x',
......@@ -18,6 +40,40 @@ define(function(require) {
return list;
},
/**
* @param {string} name
*/
select: function (name) {
var dataOpt = this._dataOptMap[name];
dataOpt && (dataOpt.selected = true);
},
/**
* @param {string} name
*/
unSelect: function (name) {
var dataOpt = this._dataOptMap[name];
dataOpt && (dataOpt.selected = false);
},
/**
* @param {string} name
*/
toggleSelected: function (name) {
var dataOpt = this._dataOptMap[name];
if (dataOpt != null) {
return dataOpt.selected = !dataOpt.selected;
}
},
/**
* @param {string} name
*/
isSelected: function (name) {
var dataOpt = this._dataOptMap[name];
return dataOpt && dataOpt.selected;
},
defaultOption: {
zlevel: 0,
z: 2,
......
......@@ -3,6 +3,31 @@ define(function (require) {
var graphic = require('../../util/graphic');
var zrUtil = require('zrender/core/util');
function selectData(seriesModel) {
var data = seriesModel.getData();
var dataIndex = this.dataIndex;
var name = data.getName(dataIndex);
updateSelected(this, seriesModel.toggleSelected(name));
}
function updateSelected(el, isSelected) {
var shape = el.shape;
var midAngle = (shape.startAngle + shape.endAngle) / 2;
var dx = Math.cos(midAngle);
var dy = (shape.clockwise ? 1 : -1) * Math.sin(midAngle);
var offset = isSelected ? shape.r * 0.1 : 0;
// animateTo will stop revious animation like update transition
el.animate()
.when(200, {
position: [dx * offset, dy * offset]
})
.start('bounceOut');
}
var Pie = require('../../view/Chart').extend({
type: 'pie',
......@@ -11,19 +36,44 @@ define(function (require) {
var data = seriesModel.getData();
var oldData = this._data;
var group = this.group;
var hasAnimation = ecModel.get('animation');
var isFirstRender = !oldData;
var firstSector;
var onSectorClick = zrUtil.curry(selectData, seriesModel);
data.diff(oldData)
.add(function (idx) {
var layout = data.getItemLayout(idx);
var sector = new graphic.Sector({
shape: data.getItemLayout(idx)
shape: zrUtil.extend({}, layout)
});
data.setItemGraphicEl(idx, sector);
if (hasAnimation && !isFirstRender) {
sector.shape.endAngle = layout.startAngle;
sector.animateTo({
shape: {
endAngle: layout.endAngle
}
}, 300, 'cubicOut');
}
sector.on('click', onSectorClick);
data.setItemGraphicEl(idx, sector);
group.add(sector);
firstSector = firstSector || sector;
})
.update(function (newIdx, oldIdx) {
var sector = oldData.getItemGraphicEl(oldIdx);
sector.animateTo({
shape: data.getItemLayout(newIdx)
}, 300, 'cubicOut');
group.add(sector);
data.setItemGraphicEl(newIdx, sector);
})
.remove(function (idx) {
var sector = oldData.getItemGraphicEl(idx);
......@@ -31,8 +81,25 @@ define(function (require) {
})
.execute();
if (hasAnimation && isFirstRender && firstSector) {
var shape = firstSector.shape;
var r = Math.max(api.getWidth(), api.getHeight()) / 2;
var removeClipPath = zrUtil.bind(group.removeClipPath, group);
group.setClipPath(this._createClipPath(
shape.cx, shape.cy, r, shape.startAngle, shape.clockwise, removeClipPath
));
}
this._updateAll(data, seriesModel);
this._data = data;
},
_updateAll: function (data, seriesModel) {
data.eachItemGraphicEl(function (sector, idx) {
var itemModel = data.getItemModel(idx);
sector.setStyle(
zrUtil.extend(
{
......@@ -41,12 +108,35 @@ define(function (require) {
itemModel.getModel('itemStyle.normal').getItemStyle()
)
);
graphic.setHoverStyle(
sector,
itemModel.getModel('itemStyle.emphasis').getItemStyle()
);
updateSelected(sector, itemModel.get('selected'));
});
},
_createClipPath: function (cx, cy, r, startAngle, clockwise, cb) {
var clipPath = new graphic.Sector({
shape: {
cx: cx,
cy: cy,
r0: 0,
r: r,
startAngle: startAngle,
endAngle: startAngle,
clockwise: clockwise
}
});
clipPath.animateTo({
shape: {
endAngle: startAngle + Math.PI * 2
}
}, 1000, 'cubicOut', cb);
return clipPath;
},
dispose: function () {}
......
define(function () {
return function (ecModel) {
var legendModel = legendModel.getComponent('legend');
var legendModel = ecModel.getComponent('legend');
if (!legendModel) {
return;
}
ecModel.eachSeriesByType('pie', function (series) {
series.getData().filterSelf(function (dataItem) {
return legendModel.isSelected(dataItem.name);
var data = series.getData();
data.filterSelf(function (idx) {
return legendModel.isSelected(data.getName(idx));
}, this);
}, this);
};
......
......@@ -4,9 +4,13 @@ define(function (require) {
ecModel.eachSeriesByType('pie', function (seriesModel) {
var colorList = ecModel.get('color');
var data = seriesModel.getData();
var dataAll = seriesModel.getDataAll();
data.each(function (idx) {
data.setItemVisual(idx, 'color', colorList[idx]);
var rawIdx = data.getRawIndex(idx);
var color = colorList[rawIdx % colorList.length];
// Legend use the visual info in data before processed
dataAll.setItemVisual(rawIdx, 'color', color);
data.setItemVisual(idx, 'color', color);
});
});
}
......
......@@ -2,7 +2,7 @@ define(function (require) {
'use strict';
var List = require('../../data/List');
var createListFromArray = require('../helper/createListFromArray');
var SeriesModel = require('../../model/Series');
return SeriesModel.extend({
......@@ -12,7 +12,7 @@ define(function (require) {
dependencies: ['grid', 'polar'],
getInitialData: function (option, ecModel) {
var list = List.fromArray(option.data, this, ecModel);
var list = createListFromArray(option.data, this, ecModel);
// Not holding the data anymore so it can be removed in momory
// PENDING
option.data = null;
......
......@@ -9,7 +9,7 @@ define(function(require) {
type: 'legend',
// dependencies: ['series'],
dependencies: ['series'],
init: function (option, parentModel, ecModel) {
this.mergeDefaultAndTheme(option, ecModel);
......@@ -25,13 +25,20 @@ define(function(require) {
return new Model(dataItem, this);
}, this);
var availableNames = zrUtil.map(ecModel.getSeriesAll(), function (series) {
return series.name;
});
ecModel.eachSeries(function (seriesModel) {
if (seriesModel.legendDataProvider) {
var data = seriesModel.legendDataProvider();
availableNames = availableNames.concat(data.map(data.getName));
}
});
/**
* @type {Array.<string>}
* @private
*/
// this._seriesNames = zrUtil.map(ecModel.getSeriesAll(), function (series) {
// return series.name;
// });
this._availableNames = availableNames;
},
/**
......@@ -60,7 +67,8 @@ define(function(require) {
*/
toggleSelected: function (name) {
var selected = this.option.selected;
if (! (name in selected)) {
// Default is true
if (!(name in selected)) {
selected[name] = true;
}
selected[name] = !selected[name];
......@@ -71,8 +79,8 @@ define(function(require) {
*/
isSelected: function (name) {
var selected = this.option.selected;
return !((name in selected) && !selected[name]);
// && this._seriesNames.indexOf(name) >= 0
return !((name in selected) && !selected[name])
&& this._availableNames.indexOf(name) >= 0;
},
defaultOption: {
......
......@@ -25,13 +25,14 @@ define(function (require) {
},
render: function (legendModel, ecModel, api) {
var enableSelect = legendModel.get('selectedMode');
var selectMode = legendModel.get('selectedMode');
var itemWidth = legendModel.get('itemWidth');
var itemHeight = legendModel.get('itemHeight');
var itemAlign = legendModel.get('align');
var group = this.group;
var x = legendModel.get('x');
var y = legendModel.get('y');
var itemAlign = legendModel.get('align');
var parsePercent = numberUtil.parsePercent;
group.position = [
parsePercent(x, api.getWidth()),
......@@ -43,9 +44,13 @@ define(function (require) {
itemAlign = group.position[0] / api.getWidth() < 0.7 ? 'left' : 'right';
}
var legendDataMap = {};
zrUtil.each(legendModel.getData(), function (itemModel) {
var seriesName = itemModel.get('name');
var seriesModel = ecModel.getSeriesByName(seriesName, true);
legendDataMap[seriesName] = true;
if (!seriesModel) {
// Series not exists
return;
......@@ -58,33 +63,42 @@ define(function (require) {
color = LEGEND_DISABLE_COLOR;
}
var itemGroup = new graphic.Group();
this._createSymbol(
data, 0, 0, itemWidth, itemHeight, color, itemGroup
// Using rect symbol defaultly
var legendSymbolType = data.getVisual('legendSymbol') || 'roundRect';
var symbolType = data.getVisual('symbol');
this._createItem(
seriesName, legendSymbolType, symbolType,
itemWidth, itemHeight, itemAlign, color,
selectMode, api
);
}, this);
var textX = itemAlign === 'left' ? itemWidth + 5 : -5;
var textAlign = itemAlign;
ecModel.eachSeries(function (seriesModel) {
if (seriesModel.legendDataProvider) {
var data = seriesModel.legendDataProvider();
data.each(function (idx) {
var name = data.getName(idx);
var text = new graphic.Text({
style: {
text: seriesName,
x: textX,
y: itemHeight / 2,
fill: '#000',
textAlign: textAlign,
textBaseline: 'middle'
}
});
itemGroup.add(text);
if (!legendDataMap[name]) {
return;
}
itemGroup.eachChild(function (child) {
child.silent = !enableSelect;
});
var color = data.getItemVisual(idx, 'color');
group.add(itemGroup);
if (!legendModel.isSelected(name)) {
color = LEGEND_DISABLE_COLOR;
}
itemGroup.on('click', zrUtil.curry(createSelectActionDispatcher, this.uid, seriesName, api), this);
var legendSymbolType = 'roundRect';
this._createItem(
name, legendSymbolType, null,
itemWidth, itemHeight, itemAlign, color,
selectMode, api
);
}, false, this);
}
}, this);
legendLayout(group, legendModel);
......@@ -92,6 +106,53 @@ define(function (require) {
this._adjustGroupPosition(group, x, y);
},
_createItem: function (
name,
legendSymbolType, symbolType,
itemWidth, itemHeight, itemAlign, color,
selectMode, api
) {
var itemGroup = new graphic.Group();
legendSymbolType = legendSymbolType;
itemGroup.add(symbolCreator.createSymbol(
legendSymbolType, 0, 0, itemWidth, itemHeight, color
));
// Compose symbols
if (symbolType && symbolType !== legendSymbolType && symbolType != 'none') {
var size = itemHeight * 0.8;
// Put symbol in the center
itemGroup.add(symbolCreator.createSymbol(
symbolType, (itemWidth - size) / 2, (itemHeight - size) / 2, size, size, color
));
}
// Text
var textX = itemAlign === 'left' ? itemWidth + 5 : -5;
var textAlign = itemAlign;
var text = new graphic.Text({
style: {
text: name,
x: textX,
y: itemHeight / 2,
fill: '#000',
textAlign: textAlign,
textBaseline: 'middle'
}
});
itemGroup.add(text);
itemGroup.eachChild(function (child) {
child.silent = !selectMode;
});
this.group.add(itemGroup);
itemGroup.on('click', zrUtil.curry(createSelectActionDispatcher, this.uid, name, api), this);
},
_adjustGroupPosition: function (group, x, y) {
var groupRect = group.getBoundingRect();
......@@ -114,28 +175,6 @@ define(function (require) {
position[0] -= groupRect.height + groupRect.y + padding[2];
break;
}
},
_createSymbol: function (data, x, y, width, height, color, group) {
// Using rect symbol defaultly
var legendSymbolType = data && data.getVisual('legendSymbol')
|| 'roundRect';
var symbolType = data && data.getVisual('symbol');
group.add(symbolCreator.createSymbol(
legendSymbolType, x, y, width, height, color
));
// Compose symbols
if (symbolType && symbolType !== legendSymbolType && symbolType != 'none') {
var size = height * 0.8;
// Put symbol in the center
group.add(symbolCreator.createSymbol(
symbolType, x + (width - size) / 2, y + (height - size) / 2, size, size, color
));
}
return group;
}
});
});
\ No newline at end of file
......@@ -471,6 +471,13 @@ define(function (require) {
* @param {*} [context=this]
*/
listProto.filterSelf = function (dimensions, cb, stack, context) {
if (typeof dimensions === 'function') {
context = stack;
stack = cb;
cb = dimensions;
dimensions = [];
}
dimensions = normalizeDimensions(dimensions);
var newIndices = [];
......@@ -539,6 +546,7 @@ define(function (require) {
*
* @param {number} idx
*/
// FIXME Model proxy ?
listProto.getItemModel = function (idx) {
var storage = this._storage;
var optionModelIndices = storage.$optionModelIndices;
......@@ -546,7 +554,7 @@ define(function (require) {
var model = this._optionModels[modelIndex];
if (! model) {
if (!model) {
// Use a temporary model proxy if value on idx is not an option.
// FIXME Create a new one may cause memory leak
model = temporaryModel;
......@@ -717,119 +725,5 @@ define(function (require) {
return list;
};
/**
* Helper function to create a list from option data
*/
List.fromArray = function (data, seriesModel, ecModel) {
var coordinateSystem = seriesModel.get('coordinateSystem');
var dimensions;
var categoryAxisModel;
// FIXME
// 这里 List 跟几个坐标系和坐标系 Model 耦合了
if (coordinateSystem === 'cartesian2d') {
var xAxisModel = ecModel.getComponent('xAxis', seriesModel.get('xAxisIndex'));
var yAxisModel = ecModel.getComponent('yAxis', seriesModel.get('yAxisIndex'));
if (xAxisModel.get('type') === 'category') {
dimensions = [{
name: 'x',
type: 'int'
}, {
name: 'y',
stackable: true
}];
categoryAxisModel = xAxisModel;
}
else if (yAxisModel.get('type') === 'category') {
dimensions = [{
name: 'y',
type: 'int'
}, {
name: 'x',
stackable: true
}];
categoryAxisModel = yAxisModel;
}
else {
// PENDING
var dimSize = data[0] && data[0].length;
// FIXME
var dimensionNames = ['x', 'y', 'z', 'a', 'b', 'c', 'd', 'e'];
if (dimSize >= 2) {
dimensions = dimensionNames.slice(0, dimSize);
}
}
}
else if (coordinateSystem === 'polar') {
var axisFinder = function (axisModel) {
return axisModel.get('polarIndex') === polarIndex;
}
var polarIndex = seriesModel.get('polarIndex') || 0;
var angleAxisModel = ecModel.findComponent('angleAxis', axisFinder);
var radiusAxisModel = ecModel.findComponent('radiusAxis', axisFinder);
if (angleAxisModel.get('type') === 'category') {
dimensions = [{
name: 'angle',
type: 'int'
}, {
name: 'radius',
stackable: true
}];
categoryAxisModel = angleAxisModel;
}
else if (radiusAxisModel.get('type') === 'category') {
dimensions = [{
name: 'radius',
type: 'int'
}, {
name: 'angle',
stackable: true
}];
categoryAxisModel = radiusAxisModel;
}
else {
// PENDING
var dimSize = data[0] && data[0].length;
if (dimSize === 2) {
dimensions = ['radius', 'angle'];
}
else if (dimSize === 3) {
dimensions = ['radius', 'angle', 'value'];
}
}
}
var nameList = [];
if (categoryAxisModel) {
var categories = categoryAxisModel.get('data');
if (categories) {
var dataLen = data.length;
// Ordered data is given explicitly like
// [[1, 0.2], [2, 0.3], [3, 0.15]]
// Pick the category
if (data[0] && data[0].length > 1 && categories.length > dataLen) {
nameList = [];
for (var i = 0; i < dataLen; i++) {
nameList[i] = categories[data[i][0]];
}
}
else {
nameList = categories.slice();
}
}
}
var list = new List(dimensions, seriesModel);
list.initData(data, nameList);
return list;
};
return List;
});
\ No newline at end of file
......@@ -121,7 +121,7 @@ define(function (require) {
option = zrUtil.clone(option, true);
var ecModel = this._model;
if (! ecModel || notMerge) {
if (!ecModel || notMerge) {
ecModel = new GlobalModel(option, null, this._theme);
this._model = ecModel;
}
......
......@@ -32,6 +32,12 @@ define(function(require) {
*/
defaultOption: null,
/**
* Data provided for legend
* @type {Function}
*/
legendDataProvider: null,
init: function (option, parentModel, ecModel, dependentModels, seriesIndex) {
/**
* @type {number}
......@@ -44,7 +50,7 @@ define(function(require) {
if (seriesName == null) {
seriesName = this.get('type') + '' + seriesIndex;
}
this.name += seriesName + '';
this.name = seriesName + '';
/**
* @type {module:echarts/data/List|module:echarts/data/Tree|module:echarts/data/Graph}
......@@ -52,10 +58,7 @@ define(function(require) {
*/
this._data = this.getInitialData(option, ecModel);
this._dataBeforeProcessing = this._data.cloneShallow();
this._itemVisuals = [];
this._itemLayouts = [];
this._dataBeforeProcessed = this._data.cloneShallow();
},
mergeDefaultAndTheme: function (option, ecModel) {
......@@ -71,7 +74,7 @@ define(function(require) {
// TODO Merge data?
if (data) {
this._data = data;
this._dataBeforeProcessing = data.cloneShallow();
this._dataBeforeProcessed = data.cloneShallow();
}
},
......@@ -82,12 +85,20 @@ define(function(require) {
getInitialData: function () {},
/**
* @return {module:echarts/data/List|module:echarts/data/Graph|module:echarts/data/Tree}
* @return {module:echarts/data/List}
*/
getData: function () {
return this._data;
},
/**
* Get data before processed
* @return {module:echarts/data/List}
*/
getDataAll: function () {
return this._dataBeforeProcessed;
},
// FIXME
/**
* Default tooltip formatter
......@@ -108,7 +119,7 @@ define(function(require) {
},
restoreData: function () {
this._data = this._dataBeforeProcessing.cloneShallow();
this._data = this._dataBeforeProcessed.cloneShallow();
}
});
......
......@@ -9,6 +9,11 @@
html, body, #main {
width: 100%;
height: 100%;
margin: 0;
}
#main {
width: 1000px;
background: #999;
}
</style>
<div id="main"></div>
......@@ -38,20 +43,27 @@
data3.push(Math.random());
}
var itemStyle = {
normal: {
},
emphasis: {
barBorderColor: 'red',
barBorderWidth: 1
}
};
console.profile('setOption');
chart.setOption({
legend: {
data: [{
name: 'bar',
itemStyle: {
normal: {
// color: 'blue'
}
}
name: 'bar'
}, 'bar2', 'bar3'],
selected: {
// 'bar': false
}
},
orient: 'vertical',
x: 'right',
align: 'left'
},
tooltip: {},
xAxis: {
......@@ -70,16 +82,19 @@
name: 'bar',
type: 'bar',
stack: 'one',
itemStyle: itemStyle,
data: data1
}, {
name: 'bar2',
type: 'bar',
stack: 'one',
itemStyle: itemStyle,
data: data2
}, {
name: 'bar3',
type: 'bar',
stack: 'two',
itemStyle: itemStyle,
data: data3
}]
});
......
......@@ -20,7 +20,8 @@
'echarts/component/legend',
'echarts/component/grid',
'echarts/component/axis',
'echarts/component/dataZoom'
'echarts/component/dataZoom',
'echarts/component/tooltip'
], function (echarts) {
var chart = echarts.init(document.getElementById('main'), null, {
......@@ -42,21 +43,28 @@
chart.setOption({
legend: {
data: ['line', 'line2', 'line3']
},
tooltip: {
},
xAxis: {
// data: ['类目1', '类目2', '类目3', '类目4', '类目5',]
data: xAxisData,
boundaryGap: true
boundaryGap: false
},
yAxis: {
// scale: true
boundaryGap: false
},
series: [
{
name: 'line',
type: 'line',
data: data1
data: data1,
itemStyle: {
normal: {
areaStyle: {}
}
}
},
{
name: 'line2',
......@@ -70,7 +78,8 @@
}
],
dataZoom: {
show: true
show: true,
end: 30
}
});
})
......
......@@ -41,7 +41,7 @@
chart.setOption({
legend: {
data: ['line', 'line2', 'line3']
data: ['bar', 'bar2', 'bar3']
},
xAxis: {
// data: ['类目1', '类目2', '类目3', '类目4', '类目5',]
......@@ -54,17 +54,17 @@
},
series: [
{
name: 'line',
name: 'bar',
type: 'bar',
data: data1
},
{
name: 'line2',
name: 'bar2',
type: 'bar',
data: data2
},
{
name: 'line3',
name: 'bar3',
type: 'bar',
data: data3
}
......
......@@ -31,35 +31,42 @@
var data2 = [];
var data3 = [];
for (var i = 0; i < 100; i++) {
data1.push([Math.random() * 5, Math.random() * 4, Math.random()]);
data2.push([Math.random() * 10, Math.random() * 5, Math.random()]);
for (var i = 0; i < 100000; i++) {
data1.push([Math.random() * 15, Math.random() * 10, Math.random()]);
data2.push([Math.random() * 10, Math.random() * 10, Math.random()]);
data3.push([Math.random() * 15, Math.random() * 10, Math.random()]);
}
// console.profile('setOption');
chart.setOption({
animation: false,
legend: {
data: ['scatter', 'scatter2', 'scatter3']
},
xAxis: {
type: 'value',
splitLine: {
show: false
show: true
}
},
yAxis: {
type: 'value',
splitLine: {
show: false
show: true
}
},
dataZoom: [
{
show: true,
orient: 'vertical'
orient: 'vertical',
start: 1,
end: 3
}, {
show: true,
orient: 'horizontal'
orient: 'horizontal',
start: 1,
end: 5
}
],
series: [{
......@@ -68,10 +75,10 @@
itemStyle: {
normal: {
opacity: 0.8,
shadowBlur: 10,
shadowOffsetX: 0,
shadowOffsetY: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
// shadowBlur: 10,
// shadowOffsetX: 0,
// shadowOffsetY: 0,
// shadowColor: 'rgba(0, 0, 0, 0.5)'
}
},
symbolSize: function (val) {
......@@ -84,10 +91,10 @@
itemStyle: {
normal: {
opacity: 0.8,
shadowBlur: 10,
shadowOffsetX: 0,
shadowOffsetY: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
// shadowBlur: 10,
// shadowOffsetX: 0,
// shadowOffsetY: 0,
// shadowColor: 'rgba(0, 0, 0, 0.5)'
}
},
symbolSize: function (val) {
......@@ -100,10 +107,10 @@
itemStyle: {
normal: {
opacity: 0.8,
shadowBlur: 10,
shadowOffsetX: 0,
shadowOffsetY: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
// shadowBlur: 10,
// shadowOffsetX: 0,
// shadowOffsetY: 0,
// shadowColor: 'rgba(0, 0, 0, 0.5)'
}
},
symbolSize: function (val) {
......@@ -112,6 +119,7 @@
data: data3
}]
});
// console.profileEnd('setOption');
})
</script>
......
......@@ -28,7 +28,7 @@
var xAxisData = [];
var data1 = [];
var count = 0;
for (; count < 200; count++) {
for (; count < 500; count++) {
xAxisData.push('类目' + count);
data1.push(+Math.random().toFixed(3));
}
......@@ -49,7 +49,7 @@
// shadowColor: 'rgba(0, 0, 0, 0.4)'
},
areaStyle: {
}
}
};
......@@ -67,7 +67,7 @@
// animation: false,
xAxis: {
axisLabel: {
interval: 20
interval: 40
},
data: xAxisData,
boundaryGap: false
......@@ -81,7 +81,7 @@
name: 'line',
type: 'line',
stack: 'all',
symbol: 'circle',
symbol: 'none',
symbolSize: 10,
data: data1,
itemStyle: itemStyle
......@@ -105,7 +105,7 @@
data: data1
}]
});
}, 1000);
}, 500);
})
</script>
......
......@@ -26,24 +26,12 @@
renderer: 'canvas'
});
var xAxisData = [];
var data1 = [];
var data2 = [];
var data3 = [];
for (var i = 0; i < 100; i++) {
xAxisData.push('类目' + i);
data1.push(+Math.random().toFixed(3));
data2.push(+Math.random().toFixed(3));
data3.push(+Math.random().toFixed(3));
}
var itemStyle = {
normal: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowOffsetY: 5,
shadowColor: 'rgba(0, 0, 0, 0.4)'
// shadowBlur: 10,
// shadowOffsetX: 0,
// shadowOffsetY: 5,
// shadowColor: 'rgba(0, 0, 0, 0.4)'
}
};
......
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册