码迷,mamicode.com
首页 > 其他好文 > 详细

echats问题

时间:2019-11-01 11:07:25      阅读:116      评论:0      收藏:0      [点我收藏+]

标签:div   maxlength   ast   zoom   tab   target   back   isl   实例   

  • echats 横轴显示不下datazoom配置,加入滚动条
  • 实例博客  https://blog.csdn.net/Zheng_xiao_xin/article/details/80882113
    常用属性::
      dataZoom: {
                  dataBackground: { //数据阴影的样式。
                      lineStyle: ‘red‘, //阴影的线条样式     对象设置形式 如:lineStyle:{color: ‘green‘,width:20}, 
                      areaStyle: ‘green‘, //阴影的填充样式
                  },
                  type: ‘slider‘, //slider表示有滑动块的,inside 表示内置的
                  backgroundColor: "none", //组件的背景颜色
                  fillerColor: "rgba(167,183,204,0.4)", //选中范围的填充颜色。
                  borderColor: "rgba(167,183,204,0.4)", //边框颜色。
                  realtime: false, //拖动滚动条时是否动态的更新图表数据
                  height: 10, //滚动条高度
                  start: 0, //滚动条开始位置(共100等份)
                  end: 20, //结束位置(共100等份)
                  bottom: ‘0 %‘,
                   zoomLock: true, //是否锁定选择区域(或叫做数据窗口)的大小。如果设置为 true 则锁定选择区域的大小,也就是说,只能平移,不能缩放。 
                  moveOnMouseMove: true,
                  textStyle: false //隐藏字体,,也可以设置滚动条两边字体样式
              }

    dataZoom=[ //区域缩放 { id: dataZoomX, show:true, //是否显示 组件。如果设置为 false,不会显示,但是数据过滤的功能还存在。 backgroundColor:"rgba(47,69,84,0)", //组件的背景颜色 type: slider, //slider表示有滑动块的,inside表示内置的 dataBackground:{ //数据阴影的样式。 lineStyle:mylineStyle, //阴影的线条样式 areaStyle:myareaStyle, //阴影的填充样式 }, fillerColor:"rgba(167,183,204,0.4)", //选中范围的填充颜色。 borderColor:"#ddd", //边框颜色。 filterMode: filter, //‘filter‘:当前数据窗口外的数据,被 过滤掉。即 会 影响其他轴的数据范围。每个数据项,只要有一个维度在数据窗口外,整个数据项就会被过滤掉。 //‘weakFilter‘:当前数据窗口外的数据,被 过滤掉。即 会 影响其他轴的数据范围。每个数据项,只有当全部维度都在数据窗口同侧外部,整个数据项才会被过滤掉。 //‘empty‘:当前数据窗口外的数据,被 设置为空。即 不会 影响其他轴的数据范围。 //‘none‘: 不过滤数据,只改变数轴范围。 xAxisIndex:0, //设置 dataZoom-inside 组件控制的 x轴,可以用数组表示多个轴 yAxisIndex:[0,2], //设置 dataZoom-inside 组件控制的 y轴,可以用数组表示多个轴 radiusAxisIndex:3, //设置 dataZoom-inside 组件控制的 radius 轴,可以用数组表示多个轴 angleAxisIndex:[0,2], //设置 dataZoom-inside 组件控制的 angle 轴,可以用数组表示多个轴 start: 30, //数据窗口范围的起始百分比,表示30% end: 70, //数据窗口范围的结束百分比,表示70% startValue:10, //数据窗口范围的起始数值 endValue:100, //数据窗口范围的结束数值。 orient:"horizontal", //布局方式是横还是竖。不仅是布局方式,对于直角坐标系而言,也决定了,缺省情况控制横向数轴还是纵向数轴。‘horizontal‘:水平。‘vertical‘:竖直。 zoomLock:false, //是否锁定选择区域(或叫做数据窗口)的大小。如果设置为 true 则锁定选择区域的大小,也就是说,只能平移,不能缩放。 throttle:100, //设置触发视图刷新的频率。单位为毫秒(ms)。 zoomOnMouseWheel:true, //如何触发缩放。可选值为:true:表示不按任何功能键,鼠标滚轮能触发缩放。false:表示鼠标滚轮不能触发缩放。‘shift‘:表示按住 shift 和鼠标滚轮能触发缩放。‘ctrl‘:表示按住 ctrl 和鼠标滚轮能触发缩放。‘alt‘:表示按住 alt 和鼠标滚轮能触发缩放。 moveOnMouseMove:true, //如何触发数据窗口平移。true:表示不按任何功能键,鼠标移动能触发数据窗口平移。false:表示鼠标滚轮不能触发缩放。‘shift‘:表示按住 shift 和鼠标移动能触发数据窗口平移。‘ctrl‘:表示按住 ctrl 和鼠标移动能触发数据窗口平移。‘alt‘:表示按住 alt 和鼠标移动能触发数据窗口平移。 left:"center", //组件离容器左侧的距离,‘left‘, ‘center‘, ‘right‘,‘20%‘ top:"top", //组件离容器上侧的距离,‘top‘, ‘middle‘, ‘bottom‘,‘20%‘ right:"auto", //组件离容器右侧的距离,‘20%‘ bottom:"auto", //组件离容器下侧的距离,‘20%‘ }, { id: dataZoomY, type: inside, filterMode: empty, disabled:false, //是否停止组件的功能。 xAxisIndex:0, //设置 dataZoom-inside 组件控制的 x轴,可以用数组表示多个轴 yAxisIndex:[0,2], //设置 dataZoom-inside 组件控制的 y轴,可以用数组表示多个轴 radiusAxisIndex:3, //设置 dataZoom-inside 组件控制的 radius 轴,可以用数组表示多个轴 angleAxisIndex:[0,2], //设置 dataZoom-inside 组件控制的 angle 轴,可以用数组表示多个轴 start: 30, //数据窗口范围的起始百分比,表示30% end: 70, //数据窗口范围的结束百分比,表示70% startValue:10, //数据窗口范围的起始数值 endValue:100, //数据窗口范围的结束数值。 orient:"horizontal", //布局方式是横还是竖。不仅是布局方式,对于直角坐标系而言,也决定了,缺省情况控制横向数轴还是纵向数轴。‘horizontal‘:水平。‘vertical‘:竖直。 zoomLock:false, //是否锁定选择区域(或叫做数据窗口)的大小。如果设置为 true 则锁定选择区域的大小,也就是说,只能平移,不能缩放。 throttle:100, //设置触发视图刷新的频率。单位为毫秒(ms)。 zoomOnMouseWheel:true, //如何触发缩放。可选值为:true:表示不按任何功能键,鼠标滚轮能触发缩放。false:表示鼠标滚轮不能触发缩放。‘shift‘:表示按住 shift 和鼠标滚轮能触发缩放。‘ctrl‘:表示按住 ctrl 和鼠标滚轮能触发缩放。‘alt‘:表示按住 alt 和鼠标滚轮能触发缩放。 moveOnMouseMove:true, //如何触发数据窗口平移。true:表示不按任何功能键,鼠标移动能触发数据窗口平移。false:表示鼠标滚轮不能触发缩放。‘shift‘:表示按住 shift 和鼠标移动能触发数据窗口平移。‘ctrl‘:表示按住 ctrl 和鼠标移动能触发数据窗口平移。‘alt‘:表示按住 alt 和鼠标移动能触发数据窗口平移。 } ];

     

  • 横轴字体斜向显示
  •   xAxis: [{
                type: category,
                data: [Monwwwwwwwwwwwwwww, Tue, Wedwwwwwwwwwwwwwwwwwwwww, Thu, Fri, Sat, Sun, , , noise, , 阿斯达, sad, 试试, 22, 44],
                axisTick: {
                    alignWithLabel: true
                },
                axisLabel: {
                    interval: 1, //0:全部显示,1:间隔为1显示对应类目,2:依次类推,(简单试一下就明白了,这样说是不是有点抽象)
                    rotate: 30, //倾斜显示,-:顺时针旋转,+或不写:逆时针旋转
                },
    此回调函数可以将过长的value值,横排显示,,自定义每行显示的字数
        axisLabel: {
                    interval: 0,
                    formatter: function(value) {

                        var ret = ""; //拼接加\n返回的类目项
                        var maxLength = 2; //每项显示文字个数
                        var valLength = value.length; //X轴类目项的文字个数
                        var rowN = Math.ceil(valLength / maxLength); //类目项需要换行的行数
                        if (rowN > 1) //如果类目项的文字大于3,
                        {
                            for (var i = 0; i < rowN; i++) {
                                var temp = ""; //每次截取的字符串
                                var start = i * maxLength; //开始截取的位置
                                var end = start + maxLength; //结束截取的位置
                                //这里也可以加一个是否是最后一行的判断,但是不加也没有影响,那就不加吧
                                temp = value.substring(start, end) + "\n";
                                ret += temp; //凭借最终的字符串
                            }
                            return ret;
                        } else {
                            return value;
                        }
                    }
                }

    }],

     

echats问题

标签:div   maxlength   ast   zoom   tab   target   back   isl   实例   

原文地址:https://www.cnblogs.com/guyuedashu/p/11775709.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!