echart报表缩放

当报表数据过多展示密集时，可以使用缩放功能。

option = {
    dataZoom: [
        {
            type: 'inside',
            show: true,
            start: 0,
            end: 20
        },
    ],
}

type:类型

inside：内置于坐标系中，使用户可以在坐标系上通过鼠标拖拽、鼠标滚轮、手指滑动（触屏上）来缩放或漫游坐标系

slider:有单独的滑动条，用户在滑动条上进行缩放或漫游

select: 提供一个选框进行数据区域缩放

 

dataZoom 的数据窗口范围的设置，目前支持两种形式：

• 百分比形式：即设置 dataZoom.start 和 dataZoom.end。start:数据窗口范围的起始百分比。范围是：0 ~ 100。表示 0% ~ 100%。end:数据窗口范围的结束百分比。范围是：0 ~ 100

• 绝对数值形式：即设置 dataZoom.startValue 和 dataZoom.endValue。startValue: 数据窗口范围的起始数值。如果设置了 dataZoom-inside.start 则 startValue 失效。endValue:数据窗口范围的结束数值。如果设置了 dataZoom-inside.end 则 endValue 失效。

 

public function charDataRoom($end) {
        return ' dataZoom: [{type: "inside", show: true, start: 0, end: ' . $end . '}],';
    }

比较麻烦的是end值的计算，我目前使用的是log

 $dataCount = count($labels);
 if($dataCount > 50) {
     $roomEnds = log($dataCount / 30);
     $dataRoom = $this->charDataRoom($roomEnds);
 }