echats问题

Posted 2020-12-01 guyuedashu

• 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 = ""; //拼接加 返回的类目项

                      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) + " ";

                              ret += temp; //凭借最终的字符串

                          }

                          return ret;

                      } else {

                          return value;

                      }

                  }

              }

  
  
          }],