• 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:, //设置 dataZoom-inside 组件控制的 x轴,可以用数组表示多个轴
    yAxisIndex:[,], //设置 dataZoom-inside 组件控制的 y轴,可以用数组表示多个轴
    radiusAxisIndex:, //设置 dataZoom-inside 组件控制的 radius 轴,可以用数组表示多个轴
    angleAxisIndex:[,], //设置 dataZoom-inside 组件控制的 angle 轴,可以用数组表示多个轴
    start: , //数据窗口范围的起始百分比,表示30%
    end: , //数据窗口范围的结束百分比,表示70%
    startValue:, //数据窗口范围的起始数值
    endValue:, //数据窗口范围的结束数值。
    orient:"horizontal", //布局方式是横还是竖。不仅是布局方式,对于直角坐标系而言,也决定了,缺省情况控制横向数轴还是纵向数轴。'horizontal':水平。'vertical':竖直。
    zoomLock:false, //是否锁定选择区域(或叫做数据窗口)的大小。如果设置为 true 则锁定选择区域的大小,也就是说,只能平移,不能缩放。
    throttle:, //设置触发视图刷新的频率。单位为毫秒(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:, //设置 dataZoom-inside 组件控制的 x轴,可以用数组表示多个轴
    yAxisIndex:[,], //设置 dataZoom-inside 组件控制的 y轴,可以用数组表示多个轴
    radiusAxisIndex:, //设置 dataZoom-inside 组件控制的 radius 轴,可以用数组表示多个轴
    angleAxisIndex:[,], //设置 dataZoom-inside 组件控制的 angle 轴,可以用数组表示多个轴
    start: , //数据窗口范围的起始百分比,表示30%
    end: , //数据窗口范围的结束百分比,表示70%
    startValue:, //数据窗口范围的起始数值
    endValue:, //数据窗口范围的结束数值。
    orient:"horizontal", //布局方式是横还是竖。不仅是布局方式,对于直角坐标系而言,也决定了,缺省情况控制横向数轴还是纵向数轴。'horizontal':水平。'vertical':竖直。
    zoomLock:false, //是否锁定选择区域(或叫做数据窗口)的大小。如果设置为 true 则锁定选择区域的大小,也就是说,只能平移,不能缩放。
    throttle:, //设置触发视图刷新的频率。单位为毫秒(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', '试试', '', ''],
    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;
                        }
                    }
                }
            }],
  • Echart  一些参数配置

    https://www.cnblogs.com/wymbk/p/5654178.html

echats问题的更多相关文章

  1. [echats] - EChats图表的使用

    从上图可以看到,信息是能被抽象化为图形展示的,也就是基本的图表,曲线(想想股票那种曲线,普及一下那个叫K线图,想起当初去北京面试炒股公司的时候了...),柱状图等. 而apache开源的echats正 ...

  2. 关于在bootstrap的tab栏中渲染echats图表,切换tab时echats不显示问题

    在开发过程中遇到这样个问题: 利用bootstrap中的tab栏,每当点击tab栏的导航时,echats仅仅只渲染第一个tab的内容,切换tab时,echats图表不显示. 其html代码为: < ...

  3. EChats+Ajax之柱状图的数据交互

    原文链接:https://blog.csdn.net/qq_37936542/article/details/79723710 一:下载 echarts.min.js 选择完整版进行下载,精简版和常用 ...

  4. echats 油表盘 鼠标拖动指针改变数值

    近期需要做一个鼠标拖动完成油表盘数值改变的功能,使用canvas感觉太麻烦,而且指针不太好监听和拖动,只能另谋出路,在网上参考了某位大神的操作,最终选择了echats来解决这个问题.废话不多说,直接上 ...

  5. 如何添加使用echats地图悬浮显示内容

    /初始化绘制全国地图配置 var option = { backgroundColor: '#000', title: { text: 'Echarts3 中国地图农村金融', subtext: '三 ...

  6. 【echats】echats悬浮事件频繁触发、过于灵敏、快速抖动等异常现象,适用与tooltip有关

    方案:transitionDuration设为0: 如图,发现关闭tooltip后现象消失,猜测与tooltip有关. 经过仔细观察,鼠标在快速移动时tooltip会延迟移动,就是这个时间差,让鼠标悬 ...

  7. vue怎么引入echats并使用 (柱状图 字符云)

    安装 npm install echarts --save 下面看一下如何简单的使用: 在main.js中引入(全局引入) // 引入echarts import echarts from 'echa ...

  8. baidu echats简介

    http://note.youdao.com/noteshare?id=ef467acdbe5b84005a1315d77a4475d1

  9. Echats

    网址:https://www.echartsjs.com 1.特性 ECharts,一个使用 JavaScript 实现的开源可视化库,可以流畅的运行在 PC 和移动设备上,兼容当前绝大部分浏览器(I ...

随机推荐

  1. 服务器安装宝塔linux系统控制面板

    一.使用远程连接软件 (如 Putty.XShell) 连接你的Linux服务器,本教程以 Putty 为例. 1   启动 Putty.exe 程序,进入 Putty 主界面. 2  在 Host ...

  2. JavaScript常用技巧之时间操作

    1.获取当前时间戳 +new Date Date.parse(new Date())

  3. JSON对象排序并生成URL参数

    1、for in function jsontourl(param) { let params = {}, data=[]; let arr = Object.keys(param).sort(); ...

  4. STL_map

    map<string,int> m; int main() { m[; cout<<m["]<<endl; ; }

  5. vue项目base64转img

    最近一个vue项目中,有个需求是, 发送消息是base64时,转换成图片预览发送出去. 输入框: <el-input class="input-box" ref=" ...

  6. 【Dart学习】-- Dart之异常处理

    概述: Dart2的异常与Java是非常类似的.Dart2的异常是Exception或者Error(包括它们的子类)的类型,甚至可以是非Exception或者Error类,也可以抛出,但是不建议这么使 ...

  7. thinkphp5选择redis库,让数据存入不同的redis库

    thinkphp5选择redis库,让数据存入不同的redis库 在登录的时候把个人信息存入redis,选择redis库1号库, db1 读取redis里面的个人信息

  8. unittest框架学习笔记一之testcase

    # coding=utf-8案例一: 2 ''' 3 Created on 2017-7-22 4 @author: Jennifer 5 Project:登录百度测试用例 6 ''' 7 from ...

  9. 文件下载java代码

    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletExcepti ...

  10. python 一些特殊用法和坑

    https://github.com/leisurelicht/wtfpython-cn