Echarts数据可视化grid直角坐标系(xAxis、yAxis),开发全解+完美注释

Echarts数据可视化grid直角坐标系(xAxis、yAxis),开发全解+完美注释mytextStyle={color:"#333",//文字颜色fontStyle:"normal",//italic斜体oblique倾斜fontWeight:"normal",//文字粗细boldbolderlighter100|200|300|400…fontFamily:"sans-serif&a

大家好,又见面了,我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。

Jetbrains全系列IDE使用 1年只要46元 售后保障 童叟无欺

Echarts数据可视化grid直角坐标系(xAxis、yAxis),开发全解+完美注释


全栈工程师开发手册 (作者:栾鹏)

Echarts数据可视化开发代码注释全解
Echarts数据可视化开发参数配置全解

6大公共组件详解(点击进入):
title详解tooltip详解toolbox详解legend详解dataZoom详解visualMap全解

5大坐标系详解(点击进入):
地理坐标系geo详解grid直角坐标系(xAxis、yAxis)详解parallel平行坐标系详解polar极坐标系详解radar雷达坐标系详解

19种图表类型详解(点击进入,待续):
series-bar柱形图详解series-effectscatter特效散点图series-graph关系图series-heatmap热力图series-line线图series-map地图series-pie饼图series-radar雷达图series-scatter散点图

图表行为和图表事件:
action图表行为event图表事件

Echarts数据可视化grid直角坐标系(xAxis、yAxis)详解:

mytextStyle={
    color:"#333",                //文字颜色
    fontStyle:"normal",         //italic斜体  oblique倾斜
    fontWeight:"normal",        //文字粗细bold   bolder   lighter  100 | 200 | 300 | 400...
    fontFamily:"sans-serif",    //字体系列
    fontSize:18,                 //字体大小
};
mylineStyle={
    color:"#333",               //颜色,'rgb(128, 128, 128)','rgba(128, 128, 128, 0.5)',支持线性渐变,径向渐变,纹理填充
    shadowColor:"red",          //阴影颜色
    shadowOffsetX:0,            //阴影水平方向上的偏移距离。
    shadowOffsetY:0,            //阴影垂直方向上的偏移距离
    shadowBlur:10,              //图形阴影的模糊大小。
    type:"solid",               //坐标轴线线的类型,solid,dashed,dotted
    width:1,                    //坐标轴线线宽
    opacity:1,                  //图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形
};
myareaStyle={
    color:['rgba(250,250,250,0.3)','rgba(200,200,200,0.3)'],//分隔区域颜色。分隔区域会按数组中颜色的顺序依次循环设置颜色。默认是一个深浅的间隔色。
    shadowColor:"red",          //阴影颜色
    shadowOffsetX:0,            //阴影水平方向上的偏移距离。
    shadowOffsetY:0,            //阴影垂直方向上的偏移距离
    shadowBlur:10,              //图形阴影的模糊大小。
    opacity:1,                  //图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形
};


grid=[{
    show:true,                       //是否显示
    zlevel:0,                        //所属图形的Canvas分层,zlevel 大的 Canvas 会放在 zlevel 小的 Canvas 的上面
    z:2,                              //所属组件的z分层,z值小的图形会被z值大的图形覆盖
    left:"10%",                      //组件离容器左侧的距离,百分比字符串或整型数字
    top:60,                          //组件离容器上侧的距离,百分比字符串或整型数字
    right:"auto",                    //组件离容器右侧的距离,百分比字符串或整型数字
    bottom:"auto",                   //组件离容器下侧的距离,百分比字符串或整型数字
    width:"auto",                    //图例宽度
    height:"auto",                   //图例高度
    containLabel: true,               //grid 区域是否包含坐标轴的刻度标签,
    backgroundColor:"transparent", //标题背景色
    borderColor:"#ccc",              //边框颜色
    borderWidth:0,                    //边框线宽
    shadowColor:"red",               //阴影颜色
    shadowOffsetX:0,                 //阴影水平方向上的偏移距离
    shadowOffsetY:0,                 //阴影垂直方向上的偏移距离
    shadowBlur:10,                    //阴影的模糊大小
    tooltip:{                        //坐标系特定的 tooltip 设定
        show:true,                   //是否显示提示框组件,包括提示框浮层和 axisPointer
        trigger:"axis",              //触发类型 none不触发  'item' 数据项图形触发,主要在散点图,饼图等无类目轴的图表中使用。  'axis'  坐标轴触发,主要在柱状图,折线图等会使用类目轴的图表中使用。
        position: ['50%', '50%'],    //提示框浮层的位置,默认不设置时位置会跟随鼠标的位置,[10, 10],回掉函数,inside鼠标所在图形的内部中心位置,top、left、bottom、right鼠标所在图形上侧,左侧,下侧,右侧,
        formatter:"{b0}: {c0}<br />{b1}: {c1}", //提示框浮层内容格式器,支持字符串模板和回调函数两种形式,模板变量有 {a}, {b},{c},{d},{e},分别表示系列名,数据名,数据值等
        backgroundColor:"transparent",        //标题背景色
        borderColor:"#ccc",         //边框颜色
        borderWidth:0,               //边框线宽
        padding:5,                    //图例内边距,单位px  5  [5, 10]  [5,10,5,10]
        textStyle:mytextStyle,      //文本样式
    },
}];
xAxis=[
    {
        show:true,                //是否显示 x 轴
        gridIndex:0,              //x 轴所在的 grid 的索引,默认位于第一个 grid
        position:"bottom",       //x 轴的位置。"top","bottom",默认 grid 中的第一个 x 轴在 grid 的下方('bottom'),第二个 x 轴视第一个 x 轴的位置放在另一侧
        offset:0,                 //X 轴相对于默认位置的偏移,在相同的 position 上有多个 X 轴的时候有用
        type:"category",         //坐标轴类型。'value' 数值轴,适用于连续数据。'category' 类目轴,适用于离散的类目数据,为该类型时必须通过 data 设置类目数据。
                                   // 'time' 时间轴,适用于连续的时序数据,与数值轴相比时间轴带有时间的格式化,在刻度计算上也有所不同,例如会根据跨度的范围来决定使用月,星期,日还是小时范围的刻度。'log' 对数轴。适用于对数数据
        name:'时间',               //坐标轴名称
        nameLocation:"end",       //坐标轴名称显示位置。可选:'start','middle','end'
        nameTextStyle:mytextStyle,  //坐标轴名称的文字样式
        nameGap:15,                  //坐标轴名称与轴线之间的距离
        nameRotate:0,                //坐标轴名字旋转,角度值
        inverse:false,              //是否是反向坐标轴
        boundaryGap:true,           //类目轴中 boundaryGap 可以配置为 true 和 false。非类目轴,包括时间,数值,对数轴,boundaryGap是一个两个值的数组,分别表示数据最小值和最大值的延伸范围,可以直接设置数值或者相对的百分比,在设置 min 和 max 后无效['20%', '20%']
        min:null,                    //坐标轴刻度最小值。可以设置成特殊值 'dataMin',此时取数据在该轴上的最小值作为最小刻度。不设置时会自动计算最小值保证坐标轴刻度的均匀分布。在类目轴中,也可以设置为类目的序数
        max:null,                   //坐标轴刻度最大值。可以设置成特殊值 'dataMax',此时取数据在该轴上的最大值作为最大刻度。不设置时会自动计算最大值保证坐标轴刻度的均匀分布。在类目轴中,也可以设置为类目的序数
        scale:false,                //只在数值轴中(type: 'value')有效。是否是脱离 0 值比例。设置成 true 后坐标刻度不会强制包含零刻度。在双数值轴的散点图中比较有用。在设置 min 和 max 之后该配置项无效。
        splitNumber:5,             //坐标轴的分割段数,需要注意的是这个分割段数只是个预估值,最后实际显示的段数会在这个基础上根据分割后坐标轴刻度显示的易读程度作调整
        minInterval:0,             //自动计算的坐标轴最小间隔大小,例如可以设置成1保证坐标轴分割刻度显示成整数。只在数值轴中(type: 'value')有效。
        logBase:10,                 //对数轴的底数,只在对数轴中(type: 'log')有效
        silent:false,              //坐标轴是否是静态无法交互
        triggerEvent:false,       //坐标轴的标签是否响应和触发鼠标事件
        axisLine:{                 //坐标 轴线
            show:true,             //是否显示坐标轴轴线
            onZero:true,           //X 轴或者 Y 轴的轴线是否在另一个轴的 0 刻度上,只有在另一个轴为数值轴且包含 0 刻度时有效
            lineStyle:mylineStyle
        },
        axisTick :{                 //坐标轴刻度相关设置
            show:true,              //是否显示坐标轴刻度。
            alignWithLabel:false,  //类目轴中在 boundaryGap 为 true 的时候有效,可以保证刻度线和标签对齐
            interval:auto,          //坐标轴刻度的显示间隔,在类目轴中有效。默认会采用标签不重叠的策略间隔显示标签。可以设置成 0 强制显示所有标签。如果设置为 1,表示『隔一个标签显示一个标签』,如果值为 2,表示隔两个标签显示一个标签,以此类推
            inside:false,           //坐标轴刻度是否朝内,默认朝外。
            length:5,                //坐标轴刻度的长度。
            lineStyle:mylineStyle
        },
        axisLabel:{                 //坐标轴刻度标签的相关设置
            show:true,              //是否显示
            interval:"auto",        //坐标轴刻度标签的显示间隔,在类目轴中有效。默认会采用标签不重叠的策略间隔显示标签。可以设置成 0 强制显示所有标签。如果设置为 1,表示『隔一个标签显示一个标签』,如果值为 2,表示隔两个标签显示一个标签,以此类推
            inside:false,           //刻度标签是否朝内,默认朝外
            rotate:0,               //刻度标签旋转的角度,在类目轴的类目标签显示不下的时候可以通过旋转防止标签之间重叠。旋转的角度从 -90 度到 90 度
            margin:8,               //刻度标签与轴线之间的距离
            formatter: function (value, index) {            //使用函数模板,函数参数分别为刻度数值(类目),刻度的索引
                return value+"kg";
            },
            showMinLabel:null,      //是否显示最小 tick 的 label。可取值 true, false, null。默认自动判定(即如果标签重叠,不会显示最小 tick 的 label)
            showMaxLabel:null,      //是否显示最大 tick 的 label。可取值 true, false, null。默认自动判定(即如果标签重叠,不会显示最大 tick 的 label)
            textStyle:mytextStyle
        },
        splitLine:{                 //坐标轴在 grid 区域中的分隔线。
            show:true,              //是否显示分隔线。默认数值轴显示,类目轴不显示。
            interval:"auto",        //坐标轴分隔线的显示间隔,在类目轴中有效。默认会采用标签不重叠的策略间隔显示标签。可以设置成 0 强制显示所有标签。如果设置为 1,表示『隔一个标签显示一个标签』,可以用数值表示间隔的数据,也可以通过回调函数控制。回调函数格式如下:
            lineStyle:mylineStyle
        },
        splitArea:{                 //坐标轴在 grid 区域中的分隔区域,默认不显示。
            interval:"auto",
            show:false,             //是否显示分隔区域
            areaStyle:myareaStyle
        },
        data : ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],             //类目数据,在类目轴(type: 'category')中有效。
        zlevel:0,                   //X 轴所有图形的 zlevel 值。
        z:0,                        //X 轴组件的所有图形的z值
    }
];
yAxis=xAxis;                        //y轴配置内容同x轴


版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/157761.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • java标记符_java标识符的书写规则

    java标记符_java标识符的书写规则标识符就是给java中的类,方法,变量起名字的符号。规则:1.可以由字母,数字,下划线,美元符号组成,但是不能包含@,%,空格等其它特殊字符,不能以数字开头。2.不能是java的关键字,比如static,import,float,int,abstract还有好多这里就不一一例举了,需要的可以自己百度。3.对大小写是敏感的,比如一些包名和类名以及变量名我们虽然大小写不会报错,但是我们需要尽可能的规范…

  • ie9浏览器无法安装ActiveX控件问题「建议收藏」

    ie9浏览器无法安装ActiveX控件问题「建议收藏」今天在web页面中测试同事给的ActiveX控件时,发现在其他台机器ie8浏览器都可以正常看到显示内容。而我自己的电脑上装的是ie9,看不到内容。按理说这个应该跟ie的版本关系不大,后面发现其他台测试的ie版本都是32位的,我的ie浏览器是64位的,就无法有效安装网站正常运行所需的ActiveX控件。后面查阅了资料原来是由于我的电脑系统是64位的(本子内存4G),所以桌面上默认的ie浏览器就是64

  • python爬虫实战项目,做完直接进阶

    python爬虫实战项目,做完直接进阶

    2021年11月11日
  • rbac权限管理设计 7表_数据库角色权限表设计

    rbac权限管理设计 7表_数据库角色权限表设计RBAC(Role-BasedAccessControl,基于角色的访问控制),就是用户通过角色与权限进行关联。简单地说,一个用户拥有若干角色,每一个角色拥有若干权限。这样,就构造成“用户-角色-权限”的授权模型。在这种模型中,用户与角色之间,角色与权限之间,一般者是多对多的关系。(如下图)当用户量非常多的时候,逐一的给用户授权角色是一件很痛苦的事情,于是引出组的概念。

  • Laravel – 验证码(captcha)

    Laravel – 验证码(captcha)

    2021年10月26日
  • 随机梯度下降SGD算法实现_什么是梯度下降法

    随机梯度下降SGD算法实现_什么是梯度下降法随机梯度下降算法(Stochasticgradientdescent,SGD)在神经网络模型训练中,是一种很常见的优化算法。这种算法是基于梯度下降算法产生的,所以要理解随机梯度下降算法,必须要对梯度下降算法有一个全面的理解。梯度下降:这个算法我在之前的博文LogisticRegression的数学推导过程以及Python实现中有详细的说明介绍,这里我们再来简单回顾一下梯度下降算法:假设…

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号