Bootstrap

echarts 折线图案例

   var myChart = echarts.init(selft.$refs.chartsBox);
            var option = {
   
                //dataZoom-inside 内置型数据区域缩放组件 所谓内置 1平移:在坐标系中滑动拖拽进行数据区域平移。2缩放:PC端:鼠标在坐标系范围内滚轮滚动(MAC触控板类同;移动端:在移动端触屏上,支持两指滑动缩放。
                dataZoom: [
                    {
   
                        type: 'inside', //1平移 缩放
                        throttle:'50',//设置触发视图刷新的频率。单位为毫秒(ms)。
                        minValueSpan:4,//用于限制窗口大小的最小值,在类目轴上可以设置为 5 表示 5 个类目
                        start: 1,      //数据窗口范围的起始百分比 范围是:0 ~ 100。表示 0% ~ 100%。
                        end: 50,       //数据窗口范围的结束百分比。范围是:0 ~ 100。
                        zoomLock:true, //如果设置为 true 则锁定选择区域的大小,也就是说,只能平移,不能缩放。
                    }
                ],
                // 主要用来控制图表四周留白
                grid:{
   
                    left:'15%',
                    top:'10%',
                },
                // 提示框组件
                tooltip: {
   
                    trigger: 'axis',//坐标轴触发,主要在柱状图,折线图等会使用类目轴的图表中使用。
                    backgroundColor:'#377CFF',//提示框浮层的背景颜色。
                    axisPointer: {
    //去掉移动的指示线
                        type: 'none'
        
                    },
                    // 自定义提示框内容
                    
;