ECharts.js 移动端显示
现在很多时候,我们是在用手机、pad等一些移动端设备来进行办公获取数据。所以我们的图表很多时候是需要用移动端设置来查看的,而我们的图表有时候因为数据的偏多,会出现遮挡和重叠的情况。这个时候就需要对移动端的图标显示做一些优化,ECharts对于移动端的优化和支持主要有2个方面。 一、ECharts组件的定位和布局 组件的定位官方描写的比较详细也比较全,我的简单理解为,ECharts.js对于图表里面每个组件和工具都采用了两种尺寸单位和设置固定位置。 一种是比较直接的 像素(px) ,设置的时间直接以 number 形式填写。比如 title:{ text:'ECharts 数据统计', top:20 } 这里就是设置标题组件的距离上面的高度是20px。 还有一种是安装 百分比(%) 的形式来设置的,百分比值是 string 类型,需要加上引号。比如 legend:{ data:['访问量','用户量'], left:'50%' } 这里标识legend组件的位置距离左侧的距离是整个图表的50%宽度 另外可以通过固定的值来设置所在位置,比如: 可以设置 left: 'center' ,表示水平居中。 可以设置 top: 'middle' ,表示垂直居中。 另外针对不同类型的图标还有不同的定位方式。 布局这块可以简单归结为两种,一种是 横向(horizontal) 显示,一种是 纵向