echart3怎么让图表自动适应

html-css08

echart3怎么让图表自动适应,第1张

最近在写一个地图类的应用,用的是echarts的图表,然而一上来就一脸懵逼,如果父级容器的height/width属性设置为百分比的形式,那么echarts就会warning,且不能正常的生成图表。所以div容器的高度宽度必须指定为px,这设计不知道是为啥。

google到的解决方案如下

添加window.onresize=myCharts.resize在setOption之后

我添加后图表的高度被压缩到了min-height,很奇怪,于是自己采用了如下解决方案,直接贴代码了。

var worldMapContainer = document.getElementById('WorldMap')

//用于使chart自适应高度和宽度,通过窗体高宽计算容器高宽

var resizeWorldMapContainer = function () {

worldMapContainer.style.width = window.innerWidth+'px'

worldMapContainer.style.height = window.innerHeight+'px'

}

//设置容器高宽

resizeWorldMapContainer()

// 基于准备好的dom,初始化echarts实例

var myChart = echarts.init(worldMapContainer)

// 指定图表的配置项和数据

var option = {

title: {

text: 'ECharts 入门示例'

},

tooltip: {},

legend: {

data:['销量'],

height: worldMapContainer.style.height,

width: worldMapContainer.style.width

},

xAxis: {

data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]

},

yAxis: {},

series: [{

name: '销量',

type: 'bar',

data: [5, 20, 36, 10, 10, 20]

}]

}

// 使用刚指定的配置项和数据显示图表。

myChart.setOption(option)

//用于使chart自适应高度和宽度

window.onresize = function () {

//重置容器高宽

resizeWorldMapContainer()

myChart.resize()

}

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

此时,worldMapContainer的高宽已经无所谓了,因为我们已经在js中设定了div容器高宽。

这个方法可以在使ECharts在高度和宽度上均自适应,如若遇到什么坑,之后再补充。

2017.9.26更新

如果是需要图表跟随容器自适应的话,将上述window.innerWidth和window.innerHeight替换为容器元素的container.clientWidth和container.clientHeight即可。其根本原理就是通过JavaScript来刷新图表宽高而非直接css自适应(因为ECharts不支持)

是不是设置过他的style.height?我遇到过这种情况。可能是你在CSS里面设置了 canvas的width和height是画布的实际宽高 canvas的style.height是他显示出来的宽和高,如果上下2个的大小不一样,会把上面的图形拉伸/缩小到下面的大校

echarts百度的骄傲,当然也是中国的骄傲。使用中,还是有些费解的地方,毕竟是个复杂的图表,在此罗列一些:

这个线按道理,是在option配置对象,属性xAxis、yAxis中设置,本以为是这样设置的:

结果不是。一番寻思,才发现在option配置对象,属性grid中设置的:

本以为是设置option配置对象属性backgroundColor,结果不是,还是设置grid中属性backgroundColor:

itemStyle中的属性color,对于折线图来说,是设置线上面的小圆点(标志图形类型),真正设置内容填充色,要这么设置:

不单单是在option配置对象,属性xAxis、yAxis中设置两个对象就可以,还要在series中做好呼应,设置响应的xAxisIndex、yAxisIndex,才会出来两根轴:

可能大家第一时间,以为是option配置对象,属性color配置原因,还要在series中做好呼应,设置上name:

原因是不能设置barWidth,可以改用barMaxWidth或者barCategoryGap,来代替

想要鼠标经过,变成一根直线的提示,不单单要设置axisPointer,还需要对应设置trigger为axis:

打开控制台,查看tooltip提示框,不是canvas绘制出来的,是一个div元素class="echarts-tooltip zr-element";可能是页面中css样式设置,影响到了。