前言
前面在学习echarts的时候，发现echarts中是自带响应式的功能的，但是这个响应式的功能和我之前学习的bootstrap有很大的区别，bootstrap中的响应式是会随着网页大小的改变而动态的改变网页的布局以及大小，但是echarts中的响应式虽然也是响应式，但是却没有bootstrap中那样的动态能力，只能是在网页加载或者刷新的时候网页的大小是多大就渲染相应的布局以及大小，虽然也能实现响应式的功能，但是我觉得这在bootstrap中使用的话会很不协调，所以我决定进行一些调整，让echarts中的响应式也能像bootstrap中那样。
开始构建思路
起初我以为echarts中的响应式也会像bootstrap中的那样，因为在官网的演示的例子当中就能实现类似的效果，但是我后面发现，那只是官方为了方便演示而加了那样的功能，但是实际上是没有那样的效果的，我开始打算是按照自己的思路写，但是发现遇到很多问题，以及不知道echarts中的定位的实现机制是怎么样的，后面我就查看了一下官方给的示例中的一些代码的变化，随后推断出echarts中的百分比居中是通过对canvas画布的宽度来进行居中的，其他定位也是类似，所以就应该动态的变化canvas画布的宽度以及他父级的宽度，那么就按照这个思路来实现一下吧。
直接看结果
这一部分是用来控制响应式的代码：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36$(window).resize(function(){
// 先获取到页面中和画布部分有关的元素
// 以及要拿到响应式父级的宽度，并将画布也设置成一样的宽度
var $tw=$('#test').width();
var $fc=$('#test>div:first');
var $canvas=$fc.children(0);
$fc.css({
"width":$tw+'px',
});
$canvas.css({
"width":$tw+'px',
});
$canvas.attr({
"width":$tw*1.25,
})
// 然后随着窗口大小的变化去设置图表内容的位置
$mychart.setOption({
media:[
{
query:{
// maxWidth: 690
},
option:{
series:[
{
type:'pie',
// 这里最好用宽度乘小数来表示，到时候转化为百分比的时候比较方便
center:[$tw*0.5,"50%"]
},
],
}
},
]
});
})这一部分是echarts配置部分的代码：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47var $mychart = echarts.init($('#test')[0]);
var option={
baseOption:{
legend:{},
tooltip:{},
dataset:{
source:[
['物品', '销量1', '销量2'],
["衬衫", '5', '20'],
['羊毛衫', '30', '40'],
['袜子', '60', '80'],
['裤子', '60', '50']
]
},
series:[
{
type:'pie',
// center:['50%','50%']
},
],
},
media:[
{
query:{
// maxWidth: 690
},
option:{
legend:{
left: ($tw-280)*0.5,
},
series:[
{
type:'pie',
center:['50%','50%']
},
],
}
},
]
}
$mychart.setOption(option);
这里可以直接先引入响应式部分的代码，再写配置部分的代码。
我所遇到的坑
在一开始的时候我无从下手，因为没有接触过类似的东西，但是我想了一整天慢慢的整明白了，大概意思就是这他的位置是在生成的时候就固定住了，想要改变就必须通过动态的去设置他的位置，就需要用到resize方法。
当时我遇到的第一个比较大的坑就时在我设置canvas宽度的时候我发现好像直接修改style里面的width会导致画布里面的内容失真，使得我在很长一段时间内认为不应该从这里下手，直到我查看了官方示例的代码里的元素变化情况之后我才发现原来是canvas画布本身其实还有一个width属性,且这个属性的值基本上是恒等于style里面的那个的1.25倍，那么真相就大白了，我又开始从这方面着手了。
当时我遇到的第二个比较大的坑就是我认为我只要动态的改变容器的宽度以及canvas画布的宽度，然后再把图表设置为居中或者将center:['50%','50%']就可以实现一直居中了，后面经过测试没有效果，百思不得其解，不知道我是哪里出了问题，以为是不是哪里写错了，后面我把百分比的位置改为固定的位置之后就发现其实是可以变化的，那么我就推测其实他里面的百分比的位置所算的宽度并不是当前容器或者canvas的宽度，而是在画布生成时就已经固定了，所以我就改成了我现在所用的这种方法。
总结
虽然成功的实现了我想要的效果，但是还是感觉不是很满意，还应该继续封装以便重复调用，并且解决这个问题花的时间有点多，思维还是不够灵敏，要继续努力。