echarts实现响应式定位和布局

第echarts实现响应式定位和布局});

要在option中设置MediaQuery须遵循如下格式：

option={

baseOption:{//这里是基本的『原子option』。

title:{...},

legend:{...},

series:[{...},{...},...],

media:[//这里定义了mediaquery的逐条规则。

query:{...},//这里写规则。

option:{//这里写此规则满足下的option。

legend:{...},

query:{...},//第二个规则。

option:{//第二个规则对应的option。

legend:{...},

{//这条里没有写规则，表示『默认』，

option:{//即所有规则都不满足时，采纳这个option。

legend:{...},

};

上面的例子中，baseOption、以及media每个option都是『原子option』，即普通的含有各组件、系列定义的option。而由『原子option』组合成的整个option，我们称为『复合option』。baseOption是必然被使用的，此外，满足了某个query条件时，对应的option会被使用chart.mergeOption()来merge进去。

4、query

每个query类似于这样：

{

minWidth:200,

maxHeight:300,

minAspectRatio:1.3

}

现在支持三个属性：width、height、aspectRatio（长宽比）。每个属性都可以加上min或max前缀。比如，minWidth:200表示『大于等于200px宽度』。两个属性一起写表示『并且』，比如：{minWidth:200,maxHeight:300}表示『大于等于200px宽度，并且小于等于300px高度』。

5、option

media中的option既然是『原子option』，理论上可以写任何option的配置项。但是一般我们只写跟布局定位相关的，例如截取上面例子中的一部分queryoption：

media:[

...,

query:{

maxAspectRatio:1//当长宽比小于1时。

option:{

legend:{//legend放在底部中间。

right:'center',

bottom:0,

orient:'horizontal'//legend横向布局。

series:[//两个饼图左右布局。

radius:[20,'50%'],

center:['50%','30%']

radius:[30,'50%'],

center:['50%','70%']

query:{

maxWidth:500//当容器宽度小于500时。

option:{

legend:{

right:10,//legend放置在右侧中间。

top:'15%',

orient:'vertical'//纵向布局。

series:[//两个饼图上下布局。

radius:[20,'50%'],

center:['50%','30%']

radius:[30,'50%'],

center:['50%','75%']

]

6、多个query被满足时的优先级

注意，可以有多个query同时被满足，会都被mergeOption，定义在后的后被merge（即优先级更高）。

7、默认query

如果media中有某项不写query，则表示『默认值』，即所有规则都不满足时，采纳这个option。

8、容器大小实时变化时的注意事项

在不少情况下，并不需要容器DOM节点任意随着拖拽变化大小，而是只是根据不同终端设置几个典型尺寸。

但是如果容器DOM节点需要能任意随着拖拽变化大小，那么目前使用时需要注意这件事：某个配置项，如果在某一个queryoption中出现，那么在其他queryoption中也必须出现，否则不能够回归到原来的状态。（left/right/top/bottom/width/height不受这个限制。）

9、『复合option』中的media不支持merge

也就是说，当第二（或三、四、五...）次chart.setOption(rawOption)时，如果rawOption是复合option（即包含media列表），那么新的rawOption.media列表不会和老的media列表进行merge，而是简单替代。当然，rawOption.baseOption仍然会正常和老的option进行merge。其实，很少有场景需要使用『复合option』来多次setOption，而我们推荐的做法是，使用mediaQuery时，第一次setOption使用『复合option』，后面setOption时仅使用『原子option』，也就是仅仅用setOption来改变baseOption。

以下中我们使用了jQuery来加载外部数据，使用时我们需要引入jQuery库。该实例是一个和时间轴结合的例子：

$.when(

$.getScript('/static/js/timelineGDP.js'),

$.getScript('/static/js/draggable.js')

).done(function(){

draggable.init(

$('div[_echarts_instance_]')[0],

myChart,

width:700,

height:630,

lockY:true,

throttle:70

myChart.hideLoading();

varcategoryData=[

'北京','天津','河北','山西','内