Skip to content

I
incubator-echarts

半栈学徒 / incubator-echarts
与 Fork 源项目一致

从无法访问的项目Fork

通知 5
Star 0
Fork 0
I
incubator-echarts

前往新版Gitcode，体验更适合开发者的 AI 搜索 >>

提交 fe02a7c3 编写于 作者: P pah100
浏览文件
操作

timeline: add rewind, tooltip and fix some problem

上级 a9030d4c
隐藏空白更改
内联 并排
Showing with 362 addition and 213 deletion
src/component/timeline/SliderTimelineModel.js
浏览文件 @ fe02a7c3
......@@ -21,6 +21,9 @@ define(function(require) {
orient: 'horizontal', // 'vertical'
inverse: false,
tooltip: false, // boolean or Object
// data item may also have tootip attr.
lineStyle: {
show: true,
width: 2,
......
src/component/timeline/SliderTimelineView.js
浏览文件 @ fe02a7c3
......@@ -13,6 +13,9 @@ define(function (require) {
var BoundingRect = require('zrender/core/BoundingRect');
var matrix = require('zrender/core/matrix');
var numberUtil = require('../../util/number');
var modelUtil = require('../../util/model');
var formatUtil = require('../../util/format');
var encodeHTML = formatUtil.encodeHTML;
var bind = zrUtil.bind;
var each = zrUtil.each;
......@@ -304,6 +307,7 @@ define(function (require) {
},
_customizeScale: function (scale, data) {
scale.getTicks = function () {
return data.mapArray(['value'], function (value) {
return value;
......@@ -340,7 +344,6 @@ define(function (require) {
silent: true,
z2: 1
}));
},
/**
......@@ -349,13 +352,14 @@ define(function (require) {
_renderAxisTick: function (layoutInfo, group, axis, timelineModel) {
var data = timelineModel.getData();
var ticks = axis.scale.getTicks();
var tooltipHostModel = this._prepareTooltipHostModel(data, timelineModel);
each(ticks, function (value, dataIndex) {
var tickCoord = axis.dataToCoord(value);
var itemStyleModel = data.getItemModel(dataIndex).getModel('itemStyle.normal');
var hoverStyleModel = data.getItemModel(dataIndex).getModel('itemStyle.emphasis');
var itemModel = data.getItemModel(dataIndex);
var itemStyleModel = itemModel.getModel('itemStyle.normal');
var hoverStyleModel = itemModel.getModel('itemStyle.emphasis');
var symbolOpt = {
position: [tickCoord, 0],
onclick: bind(this._changeTimeline, this, dataIndex)
......@@ -363,9 +367,33 @@ define(function (require) {
var el = giveSymbol(itemStyleModel, group, symbolOpt);
graphic.setHoverStyle(el, hoverStyleModel.getItemStyle());
if (itemModel.get('tooltip')) {
el.dataIndex = dataIndex;
el.hostModel = tooltipHostModel;
}
else {
el.dataIndex = el.hostModel = null;
}
}, this);
},
/**
* @private
*/
_prepareTooltipHostModel: function (data, timelineModel) {
var tooltipHostModel = modelUtil.createDataFormatModel(
{}, data, timelineModel.get('data')
);
var me = this;
tooltipHostModel.formatTooltip = function (dataIndex) {
return encodeHTML(me._axis.scale.getLabel(dataIndex));
};
return tooltipHostModel;
},
/**
* @private
*/
......@@ -540,7 +568,7 @@ define(function (require) {
var timelineModel = this.model;
this._changeTimeline(
timelineModel.getCurrentIndex()
+ (timelineModel.get('inverse', true) ? -1 : 1)
+ (timelineModel.get('rewind', true) ? -1 : 1)
);
}
},
......
src/component/timeline/TimelineModel.js
浏览文件 @ fe02a7c3
......@@ -6,7 +6,7 @@ define(function(require) {
var ComponentModel = require('../../model/Component');
var List = require('../../data/List');
var zrUtil = require('zrender/core/util');
var numberUtil = require('../../util/number');
var modelUtil = require('../../util/model');
var TimelineModel = ComponentModel.extend({
......@@ -35,6 +35,7 @@ define(function(require) {
controlPosition: 'left', // 'right' | 'none'
autoPlay: false,
rewind: false, // 反向播放
loop: true,
playInterval: 2000, // 播放时间间隔，单位ms
......@@ -67,6 +68,12 @@ define(function(require) {
*/
this._data;
/**
* @private
* @type {Array.<string>}
*/
this._names;
this.mergeDefaultAndTheme(option, ecModel);
this.mergeOption({}, true);
},
......@@ -150,36 +157,38 @@ define(function(require) {
var thisOption = this.option;
var dataArr = thisOption.data || [];
var axisType = thisOption.axisType;
var names = [];
var names = this._names = [];
if (axisType === 'category') {
var idxArr = [];
zrUtil.each(dataArr, function (item, index) {
idxArr.push(index);
var value = modelUtil.getDataItemValue(item);
var newItem;
if (zrUtil.isObject(item)) {
newItem = zrUtil.clone(item, true);
newItem.value = index;
}
else {
newItem = index;
}
idxArr.push(newItem);
var name = zrUtil.isObject(item) ? item.value : item;
if (!zrUtil.isString(name) && (name == null || isNaN(name))) {
name = '';
if (!zrUtil.isString(value) && (value == null || isNaN(value))) {
value = '';
}
names.push(name + '');
names.push(value + '');
});
dataArr = idxArr;
}
var data = this._data = new List(['value'], this);
data.initData(dataArr, names, function (dataItem) {
if (axisType === 'time') {
if (zrUtil.isObject(dataItem)) {
dataItem.value = +numberUtil.parseDate(dataItem.value);
return dataItem;
}
else {
return +numberUtil.parseDate(dataItem);
}
}
return dataItem;
});
var dimType = ({category: 'ordinal', time: 'time'})[axisType] || 'number';
var data = this._data = new List([{name: 'value', type: dimType}], this);
data.initData(dataArr, names);
},
getData: function () {
......@@ -192,7 +201,7 @@ define(function(require) {
*/
getCategories: function () {
if (this.get('axisType') === 'category') {
return this.get('data').slice();
return this._names.slice();
}
}
......
src/component/timeline/preprocessor.js
浏览文件 @ fe02a7c3
......@@ -32,6 +32,34 @@ define(function(require) {
delete opt.type;
}
transferItem(opt);
if (has(opt, 'controlPosition')) {
var controlStyle = opt.controlStyle || (opt.controlStyle = {});
if (!has(controlStyle, 'position')) {
controlStyle.position = opt.controlPosition;
}
if (controlStyle.position === 'none' && !has(controlStyle, 'show')) {
controlStyle.show = false;
delete controlStyle.position;
}
delete opt.controlPosition;
}
var data = opt.data || (opt.data = []);
zrUtil.each(data, function (dataItem) {
if (zrUtil.isObject(dataItem) && !zrUtil.isArray(dataItem)) {
if (!has(dataItem, 'value') && has(dataItem, 'name')) {
// In ec2, using name as value.
dataItem.value = dataItem.name;
}
transferItem(dataItem);
}
});
}
function transferItem(opt) {
var itemStyle = opt.itemStyle || (opt.itemStyle = {});
var itemStyleEmphasis = itemStyle.emphasis || (itemStyle.emphasis = {});
......@@ -60,18 +88,6 @@ define(function(require) {
label.emphasis = itemStyleEmphasis.label;
delete itemStyleEmphasis.label;
}
if (has(opt, 'controlPosition')) {
var controlStyle = opt.controlStyle || (opt.controlStyle = {});
if (!has(controlStyle, 'position')) {
controlStyle.position = opt.controlPosition;
}
if (controlStyle.position === 'none' && !has(controlStyle, 'show')) {
controlStyle.show = false;
delete controlStyle.position;
}
delete opt.controlPosition;
}
}
function has(obj, attr) {
......
src/component/tooltip/TooltipView.js
浏览文件 @ fe02a7c3
......@@ -699,7 +699,7 @@ define(function (require) {
var dims = coordSys.dimensions;
value = zrUtil.map(value, function (val, idx) {
var axis = coordSys.getAxis(dims[idx]);
if (axis.type === 'category') {
if (axis.type === 'category' || axis.type === 'time') {
val = axis.scale.getLabel(val);
}
else {
......
src/data/List.js
浏览文件 @ fe02a7c3
......@@ -16,7 +16,8 @@ define(function (require) {
'int': Int32Array,
// Ordinal data type can be string or int
'ordinal': Array,
'number': Array
'number': Array,
'time': Array
};
var Model = require('../model/Model');
......
src/echarts.js
浏览文件 @ fe02a7c3
......@@ -168,7 +168,7 @@ define(function (require) {
);
(!this._model || notMerge)
? ecModelRecreate.call(this, baseOption)
? (this._model = new GlobalModel(baseOption, null, this._theme))
: ecModelMerge.call(this, baseOption);
var partialOption = this._optionManager.getPartialOption(this._model);
......@@ -181,10 +181,6 @@ define(function (require) {
!notRefreshImmediately && this._zr.refreshImmediately();
};
function ecModelRecreate(option) {
this._model = new GlobalModel(option, null, this._theme);
}
function ecModelMerge(option) {
var ecModel = this._model;
ecModel.restoreData();
......
src/model/Global.js
浏览文件 @ fe02a7c3
......@@ -97,15 +97,25 @@ define(function (require) {
function visitComponent(mainType, dependencies) {
var newCptOptionList = newOption[mainType];
if (!newCptOptionList) {
// Possible when using removeEdgeAndAdd in topologicalTravel
// and ComponentModel.getAllClassMainTypes
each(componentsMap[mainType], function (cpt) {
cpt.mergeOption({}, this);
});
return;
newCptOptionList
? handleNew.call(this, mainType, newCptOptionList, dependencies)
: handleNoNew.call(this, mainType);
// Backup series for filtering.
if (mainType === 'series') {
this._seriesIndices = createSeriesIndices(componentsMap.series);
}
}
function handleNoNew(mainType) {
// Possible when using removeEdgeAndAdd in topologicalTravel
// and ComponentModel.getAllClassMainTypes
each(componentsMap[mainType], function (cpt) {
cpt.mergeOption({}, this);
});
}
function handleNew(mainType, newCptOptionList, dependencies) {
// Normalize
if (!(zrUtil.isArray(newCptOptionList))) {
newCptOptionList = [newCptOptionList];
......@@ -160,11 +170,6 @@ define(function (require) {
// Keep option
option[mainType][index] = componentModel.option;
}, this);
// Backup series for filtering.
if (mainType === 'series') {
this._seriesIndices = createSeriesIndices(componentsMap.series);
}
}
},
......@@ -740,7 +745,7 @@ define(function (require) {
function createSeriesIndices(seriesModels) {
return map(seriesModels, function (series) {
return series.componentIndex;
});
}) || [];
}
/**
......
src/util/model.js
浏览文件 @ fe02a7c3
......@@ -178,15 +178,17 @@ define(function(require) {
/**
* Create a model proxy to be used in tooltip for edge data, markLine data, markPoint data.
* @param {module:echarts/model/Series} seriesModel
* @param {Object} opt
* @param {string} [opt.seriesIndex]
* @param {Object} [opt.name]
* @param {module:echarts/data/List} data
* @param {Array.<Object>} rawData
*/
modelUtil.createDataFormatModel = function (seriesModel, data, rawData) {
modelUtil.createDataFormatModel = function (opt, data, rawData) {
var model = new Model();
zrUtil.mixin(model, modelUtil.dataFormatMixin);
model.seriesIndex = seriesModel.seriesIndex;
model.name = seriesModel.name;
model.seriesIndex = opt.seriesIndex;
model.name = opt.name || '';
model.getData = function () {
return data;
......
test/data/timelineOption.js → test/data/timelineGDP.js
浏览文件 @ fe02a7c3
......@@ -2,17 +2,20 @@ var dataMap = {};
function dataFormatter(obj) {
var pList = ['北京','天津','河北','山西','内蒙古','辽宁','吉林','黑龙江','上海','江苏','浙江','安徽','福建','江西','山东','河南','湖北','湖南','广东','广西','海南','重庆','四川','贵州','云南','西藏','陕西','甘肃','青海','宁夏','新疆'];
var temp;
var max = 0;
for (var year = 2002; year <= 2011; year++) {
var max = 0;
var sum = 0;
temp = obj[year];
for (var i = 0, l = temp.length; i < l; i++) {
max = Math.max(max, temp[i]);
sum += temp[i];
obj[year][i] = {
name : pList[i],
value : temp[i]
}
}
obj[year+'max'] = Math.floor(max/100) * 100;
obj[year + 'max'] = Math.floor(max / 100) * 100;
obj[year + 'sum'] = sum;
}
return obj;
}
......@@ -24,8 +27,8 @@ function dataMix(list) {
if (list[i][key] instanceof Array) {
mixData[key] = mixData[key] || [];
for (var j = 0, k = list[i][key].length; j < k; j++) {
mixData[key][j] = mixData[key][j]
|| {name : list[i][key][j].name, value : []};
mixData[key][j] = mixData[key][j]
|| {name : list[i][key][j].name, value : []};
mixData[key][j].value.push(list[i][key][j].value);
}
}
......
test/timeline-finance.html
浏览文件 @ fe02a7c3
......@@ -18,13 +18,34 @@
</style>
<div id="main"></div>
<script src="data/timelineOption.js"></script>
<script src="data/timelineGDP.js"></script>
<script>
// markLine: {
// symbol: ['arrow','none'],
// symbolSize: [4, 2],
// itemStyle: {
// normal: {
// lineStyle: {color:'orange'},
// barBorderColor:'orange',
// label: {
// position:'left',
// formatter:function(params){
// return Math.round(params.value);
// },
// textStyle:{color:'orange'}
// }
// }
// },
// data: [{type: 'average', name: '平均值'}]
// }
require([
'echarts',
'echarts/chart/bar',
'echarts/chart/pie',
'echarts/component/title',
'echarts/component/legend',
'echarts/component/grid',
'echarts/component/tooltip',
......@@ -36,20 +57,46 @@
});
var option = {
timeline:{
timeline: {
// y: 0,
axisType: 'category',
// realtime: false,
// loop: false,
autoPlay : false,
autoPlay: true,
// currentIndex: 2,
playInterval : 1000,
playInterval: 1000,
// controlStyle: {
// position: 'left'
// },
data:[
'2002-01-01','2003-01-01','2004-01-01','2005-01-01','2006-01-01',
'2007-01-01','2008-01-01','2009-01-01','2010-01-01','2011-01-01'
data: [
'2002-01-01','2003-01-01','2004-01-01',
{
value: '2005-01-01',
tooltip: {
formatter: '{b} GDP达到一个高度'
},
itemStyle: {
normal: {
symbol: 'diamond',
symbolSize: 16
}
}
},
'2006-01-01', '2007-01-01','2008-01-01','2009-01-01','2010-01-01',
{
value: '2011-01-01',
tooltip: {
formatter: function (params) {
return params.name + 'GDP达到又一个高度';
}
},
itemStyle: {
normal: {
symbol: 'diamond',
symbolSize: 18
}
}
},
],
label: {
formatter : function(s) {
......@@ -59,24 +106,19 @@ var option = {
},
base: {
title: {
'subtext':'数据来自国家统计局'
subtext: '数据来自国家统计局'
},
tooltip: {'trigger':'axis'},
tooltip: {},
legend: {
x: 'right',
data: ['GDP','金融','房地产','第一产业','第二产业','第三产业']
// selected: {
// 'GDP':true,
// '金融':true,
// '房地产':true,
// '第一产业':true,
// '第二产业':true,
// '第三产业':false
// }
data: ['第一产业', '第二产业', '第三产业', 'GDP', '金融', '房地产'],
selected: {
'GDP': false, '金融': false, '房地产': false
}
},
calculable : true,
grid : {'y':80,'y2':100},
xAxis : [
grid: {y:80, y2: 100},
xAxis: [
{
'type':'category',
'axisLabel':{'interval':0},
......@@ -89,175 +131,188 @@ var option = {
splitLine: {show: false}
}
],
yAxis : [
yAxis: [
{
'type':'value',
'name':'GDP（亿元）',
'max':53500
},
{
'type':'value',
'name':'其他（亿元）',
splitLine: {show: false}
type: 'value',
name: 'GDP（亿元）',
// max: 53500
max: 30000
}
],
series: [
{name: 'GDP', type: 'bar'},
{name: '金融', type: 'bar'},
{name: '房地产', type: 'bar'},
{name: '第一产业', type: 'bar'},
{name: '第二产业', type: 'bar'},
{name: '第三产业', type: 'bar'},
{
name: 'GDP',
type: 'bar',
markLine: {
symbol : ['arrow','none'],
symbolSize : [4, 2],
itemStyle : {
normal: {
lineStyle: {color:'orange'},
barBorderColor:'orange',
label:{
position:'left',
formatter:function(params){
return Math.round(params.value);
},
textStyle:{color:'orange'}
}
}
},
'data':[{'type':'average','name':'平均值'}]
}
},
// {type: 'bar'},
// {type: 'bar'},
// {type: 'bar'},
// {type: 'bar'},
// {type: 'bar'}
name: 'GDP占比',
type: 'pie',
center: ['75%', '35%'],
radius: '28%'
}
]
},
options: [
{
title : {text: '2002全国宏观经济指标'},
series : [
{
'name':'GDP',
'data': dataMap.dataGDP['2002']
},
{
'name':'金融','yAxisIndex':1,'type':'bar',
'data': dataMap.dataFinancial['2002']
},
{
'name':'房地产','yAxisIndex':1,'type':'bar',
'data': dataMap.dataEstate['2002']
},
{
'name':'第一产业','yAxisIndex':1,'type':'bar',
'data': dataMap.dataPI['2002']
},
{
'name':'第二产业','yAxisIndex':1,'type':'bar',
'data': dataMap.dataSI['2002']
},
{
'name':'第三产业','yAxisIndex':1,'type':'bar',
'data': dataMap.dataTI['2002']
}
title: {text: '2002全国宏观经济指标'},
series: [
{data: dataMap.dataGDP['2002']},
{data: dataMap.dataFinancial['2002']},
{data: dataMap.dataEstate['2002']},
{data: dataMap.dataPI['2002']},
{data: dataMap.dataSI['2002']},
{data: dataMap.dataTI['2002']},
{data: [
{name: '第一产业', value: dataMap.dataPI['2002sum']},
{name: '第二产业', value: dataMap.dataSI['2002sum']},
{name: '第三产业', value: dataMap.dataTI['2002sum']}
]}
]
},
{
title : {'text':'2003全国宏观经济指标'},
title : {text: '2003全国宏观经济指标'},
series : [
{'data': dataMap.dataGDP['2003']},
{'data': dataMap.dataFinancial['2003']},
{'data': dataMap.dataEstate['2003']},
{'data': dataMap.dataPI['2003']},
{'data': dataMap.dataSI['2003']},
{'data': dataMap.dataTI['2003']}
{data: dataMap.dataGDP['2003']},
{data: dataMap.dataFinancial['2003']},
{data: dataMap.dataEstate['2003']},
{data: dataMap.dataPI['2003']},
{data: dataMap.dataSI['2003']},
{data: dataMap.dataTI['2003']},
{data: [
{name: '第一产业', value: dataMap.dataPI['2003sum']},
{name: '第二产业', value: dataMap.dataSI['2003sum']},
{name: '第三产业', value: dataMap.dataTI['2003sum']}
]}
]
},
{
title : {'text':'2004全国宏观经济指标'},
title : {text: '2004全国宏观经济指标'},
series : [
{'data': dataMap.dataGDP['2004']},
{'data': dataMap.dataFinancial['2004']},
{'data': dataMap.dataEstate['2004']},
{'data': dataMap.dataPI['2004']},
{'data': dataMap.dataSI['2004']},
{'data': dataMap.dataTI['2004']}
{data: dataMap.dataGDP['2004']},
{data: dataMap.dataFinancial['2004']},
{data: dataMap.dataEstate['2004']},
{data: dataMap.dataPI['2004']},
{data: dataMap.dataSI['2004']},
{data: dataMap.dataTI['2004']},
{data: [
{name: '第一产业', value: dataMap.dataPI['2004sum']},
{name: '第二产业', value: dataMap.dataSI['2004sum']},
{name: '第三产业', value: dataMap.dataTI['2004sum']}
]}
]
},
{
title : {'text':'2005全国宏观经济指标'},
title : {text: '2005全国宏观经济指标'},
series : [
{'data': dataMap.dataGDP['2005']},
{'data': dataMap.dataFinancial['2005']},
{'data': dataMap.dataEstate['2005']},
{'data': dataMap.dataPI['2005']},
{'data': dataMap.dataSI['2005']},
{'data': dataMap.dataTI['2005']}
{data: dataMap.dataGDP['2005']},
{data: dataMap.dataFinancial['2005']},
{data: dataMap.dataEstate['2005']},
{data: dataMap.dataPI['2005']},
{data: dataMap.dataSI['2005']},
{data: dataMap.dataTI['2005']},
{data: [
{name: '第一产业', value: dataMap.dataPI['2005sum']},
{name: '第二产业', value: dataMap.dataSI['2005sum']},
{name: '第三产业', value: dataMap.dataTI['2005sum']}
]}
]
},
{
title : {'text':'2006全国宏观经济指标'},
title : {text: '2006全国宏观经济指标'},
series : [
{'data': dataMap.dataGDP['2006']},
{'data': dataMap.dataFinancial['2006']},
{'data': dataMap.dataEstate['2006']},
{'data': dataMap.dataPI['2006']},
{'data': dataMap.dataSI['2006']},
{'data': dataMap.dataTI['2006']}
{data: dataMap.dataGDP['2006']},
{data: dataMap.dataFinancial['2006']},
{data: dataMap.dataEstate['2006']},
{data: dataMap.dataPI['2006']},
{data: dataMap.dataSI['2006']},
{data: dataMap.dataTI['2006']},
{data: [
{name: '第一产业', value: dataMap.dataPI['2006sum']},
{name: '第二产业', value: dataMap.dataSI['2006sum']},
{name: '第三产业', value: dataMap.dataTI['2006sum']}
]}
]
},
{
title : {'text':'2007全国宏观经济指标'},
title : {text: '2007全国宏观经济指标'},
series : [
{'data': dataMap.dataGDP['2007']},
{'data': dataMap.dataFinancial['2007']},
{'data': dataMap.dataEstate['2007']},
{'data': dataMap.dataPI['2007']},
{'data': dataMap.dataSI['2007']},
{'data': dataMap.dataTI['2007']}
{data: dataMap.dataGDP['2007']},
{data: dataMap.dataFinancial['2007']},
{data: dataMap.dataEstate['2007']},
{data: dataMap.dataPI['2007']},
{data: dataMap.dataSI['2007']},
{data: dataMap.dataTI['2007']},
{data: [
{name: '第一产业', value: dataMap.dataPI['2007sum']},
{name: '第二产业', value: dataMap.dataSI['2007sum']},
{name: '第三产业', value: dataMap.dataTI['2007sum']}
]}
]
},
{
title : {'text':'2008全国宏观经济指标'},
title : {text: '2008全国宏观经济指标'},
series : [
{'data': dataMap.dataGDP['2008']},
{'data': dataMap.dataFinancial['2008']},
{'data': dataMap.dataEstate['2008']},
{'data': dataMap.dataPI['2008']},
{'data': dataMap.dataSI['2008']},
{'data': dataMap.dataTI['2008']}
{data: dataMap.dataGDP['2008']},
{data: dataMap.dataFinancial['2008']},
{data: dataMap.dataEstate['2008']},
{data: dataMap.dataPI['2008']},
{data: dataMap.dataSI['2008']},
{data: dataMap.dataTI['2008']},
{data: [
{name: '第一产业', value: dataMap.dataPI['2008sum']},
{name: '第二产业', value: dataMap.dataSI['2008sum']},
{name: '第三产业', value: dataMap.dataTI['2008sum']}
]}
]
},
{
title : {'text':'2009全国宏观经济指标'},
title : {text: '2009全国宏观经济指标'},
series : [
{'data': dataMap.dataGDP['2009']},
{'data': dataMap.dataFinancial['2009']},
{'data': dataMap.dataEstate['2009']},
{'data': dataMap.dataPI['2009']},
{'data': dataMap.dataSI['2009']},
{'data': dataMap.dataTI['2009']}
{data: dataMap.dataGDP['2009']},
{data: dataMap.dataFinancial['2009']},
{data: dataMap.dataEstate['2009']},
{data: dataMap.dataPI['2009']},
{data: dataMap.dataSI['2009']},
{data: dataMap.dataTI['2009']},
{data: [
{name: '第一产业', value: dataMap.dataPI['2009sum']},
{name: '第二产业', value: dataMap.dataSI['2009sum']},
{name: '第三产业', value: dataMap.dataTI['2009sum']}
]}
]
},
{
title : {'text':'2010全国宏观经济指标'},
title : {text: '2010全国宏观经济指标'},
series : [
{'data': dataMap.dataGDP['2010']},
{'data': dataMap.dataFinancial['2010']},
{'data': dataMap.dataEstate['2010']},
{'data': dataMap.dataPI['2010']},
{'data': dataMap.dataSI['2010']},
{'data': dataMap.dataTI['2010']}
{data: dataMap.dataGDP['2010']},
{data: dataMap.dataFinancial['2010']},
{data: dataMap.dataEstate['2010']},
{data: dataMap.dataPI['2010']},
{data: dataMap.dataSI['2010']},
{data: dataMap.dataTI['2010']},
{data: [
{name: '第一产业', value: dataMap.dataPI['2010sum']},
{name: '第二产业', value: dataMap.dataSI['2010sum']},
{name: '第三产业', value: dataMap.dataTI['2010sum']}
]}
]
},
{
title : {'text':'2011全国宏观经济指标'},
title : {text: '2011全国宏观经济指标'},
series : [
{'data': dataMap.dataGDP['2011']},
{'data': dataMap.dataFinancial['2011']},
{'data': dataMap.dataEstate['2011']},
{'data': dataMap.dataPI['2011']},
{'data': dataMap.dataSI['2011']},
{'data': dataMap.dataTI['2011']}
{data: dataMap.dataGDP['2011']},
{data: dataMap.dataFinancial['2011']},
{data: dataMap.dataEstate['2011']},
{data: dataMap.dataPI['2011']},
{data: dataMap.dataSI['2011']},
{data: dataMap.dataTI['2011']},
{data: [
{name: '第一产业', value: dataMap.dataPI['2011sum']},
{name: '第二产业', value: dataMap.dataSI['2011sum']},
{name: '第三产业', value: dataMap.dataTI['2011sum']}
]}
]
}
]
......@@ -265,6 +320,9 @@ var option = {
chart.setOption(option);
chart.on('legendSelected', function () {
});
window.onresize = chart.resize;
});
</script>
......
test/timeline-layout.html
浏览文件 @ fe02a7c3
......@@ -26,7 +26,7 @@
</style>
<div id="main"></div>
<script src="data/timelineOption.js"></script>
<script src="data/timelineGDP.js"></script>
<script>
......@@ -45,7 +45,7 @@
makeChart({timeline: {inverse: true, controlStyle: {position: 'right'}}});
makeChart({timeline: {orient: 'vertical', x: 0, y: 10, width: 55, height: '80%'}});
makeChart({timeline: {orient: 'vertical', inverse: true, x: 0, y: 10, width: 55, height: '80%'}});
makeChart({timeline: {orient: 'vertical', inverse: true, rewind: true, x: 0, y: 10, width: 55, height: '80%'}});
makeChart({timeline: {orient: 'vertical', inverse: true, x: null, x2: 0, y: 10, width: 55, height: '80%'}});
makeChart({timeline: {orient: 'vertical', inverse: true, x: null, x2: 0, y: 10, width: 55, height: '80%', controlStyle: {position: 'top'}}});
makeChart({timeline: {label: {position: 'top'}}});
......@@ -65,6 +65,34 @@
orient: 'vertical', inverse: true, x: 0, y: 40, width: 55, height: '80%'
}});
makeChart({
timeline: {
height: 55,
data: [
'2002-01-01','2003-01-01','2004-01-01','2005-01-01',
{
value: '2006-01-01',
itemStyle: {
normal: {
symbol: 'pin',
symbolSize: 30
}
}
},
'2007-01-01','2008-01-01','2009-01-01','2010-01-01',
{
value: '2011-01-01',
itemStyle: {
normal: {
symbol: 'pin',
symbolSize: 30
}
}
}
]
}
});
function makeChart(opt) {
opt = opt || {};
var containerEl = document.getElementById('main');
......@@ -102,7 +130,7 @@
// controlStyle: {
// position: 'left'
// },
data:[
data: [
'2002-01-01','2003-01-01','2004-01-01','2005-01-01','2006-01-01',
'2007-01-01','2008-01-01','2009-01-01','2010-01-01','2011-01-01'
],
......
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或