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

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散点图

Echarts数据可视化radar雷达坐标系详解:

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 时不绘制该图形
};

radar=[{
    center:['50%', '50%'],      //中心(圆心)坐标,数组的第一项是横坐标,第二项是纵坐标。支持设置成百分比,设置成百分比时第一项是相对于容器宽度,第二项是相对于容器高度。
    radius:"75%",               //数组的第一项是内半径,第二项是外半径。支持设置成百分比,相对于容器高宽中较小的一项的一半。
    startAngle:90,              //起始刻度的角度,默认为 90 度,即圆心的正上方。0 度为圆心的正右方。
    name:{                      //雷达图每个指示器名称的配置项。
        show:true,              //是否显示指示器名称。
        formatter:function (value, indicator) {  //用回调函数,第一个参数是指示器名称,第二个参数是指示器配置项
            return '【' + value + '】';
        },
        textStyle:mytextStyle
    },
    nameGap:15,                 //指示器名称和指示器轴的距离
    splitNumber:5,              //指示器轴的分割段数
    scale:false,                //只在数值轴中(type: 'value')有效。是否是脱离 0 值比例。设置成 true 后坐标刻度不会强制包含零刻度。在双数值轴的散点图中比较有用。在设置 min 和 max 之后该配置项无效。
    shape:"polygon",            //雷达图绘制类型,支持 'polygon' 和 'circle'。
    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
    },
    indicator: [                //雷达图的指示器,用来指定雷达图中的多个变量(维度)
        { name: '销售(sales)', max: 6500},
        { name: '管理(Administration)', max: 16000},
        { name: '信息技术(Information Techology)', max: 30000},
        { name: '客服(Customer Support)', max: 38000},
        { name: '研发(Development)', max: 52000},
        { name: '市场(Marketing)', max: 25000}
    ],
    zlevel:0,                   //所属图形的 zlevel 值。
    z:0,                        //组件的所属图形的z值
}];

Echarts数据可视化radar雷达坐标系,开发全解+完美注释的更多相关文章

  1. Echarts数据可视化series-scatter散点图,开发全解+完美注释

    全栈工程师开发手册 (作者:栾鹏) Echarts数据可视化开发代码注释全解 Echarts数据可视化开发参数配置全解 6大公共组件详解(点击进入): title详解. tooltip详解.toolb ...

  2. Echarts数据可视化series-pie饼图,开发全解+完美注释

    全栈工程师开发手册 (作者:栾鹏) Echarts数据可视化开发代码注释全解 Echarts数据可视化开发参数配置全解 6大公共组件详解(点击进入): title详解. tooltip详解.toolb ...

  3. Echarts数据可视化series-map地图,开发全解+完美注释

    全栈工程师开发手册 (作者:栾鹏) Echarts数据可视化开发代码注释全解 Echarts数据可视化开发参数配置全解 6大公共组件详解(点击进入): title详解. tooltip详解.toolb ...

  4. Echarts数据可视化series-heatmap热力图,开发全解+完美注释

    全栈工程师开发手册 (作者:栾鹏) Echarts数据可视化开发代码注释全解 Echarts数据可视化开发参数配置全解 6大公共组件详解(点击进入): title详解. tooltip详解.toolb ...

  5. Echarts数据可视化polar极坐标系,开发全解+完美注释

    全栈工程师开发手册 (作者:栾鹏) Echarts数据可视化开发代码注释全解 Echarts数据可视化开发参数配置全解 6大公共组件详解(点击进入): title详解. tooltip详解.toolb ...

  6. Echarts数据可视化地理坐标系geo,开发全解+完美注释

    全栈工程师开发手册 (作者:栾鹏) Echarts数据可视化开发代码注释全解 Echarts数据可视化开发参数配置全解 6大公共组件详解(点击进入): title详解. tooltip详解.toolb ...

  7. Echarts数据可视化legend图例,开发全解+完美注释

    全栈工程师开发手册 (作者:栾鹏) Echarts数据可视化开发代码注释全解 Echarts数据可视化开发参数配置全解 6大公共组件详解(点击进入): title详解. tooltip详解.toolb ...

  8. Echarts数据可视化series-radar雷达图,开发全解+完美注释

    全栈工程师开发手册 (作者:栾鹏) Echarts数据可视化开发代码注释全解 Echarts数据可视化开发参数配置全解 6大公共组件详解(点击进入): title详解. tooltip详解.toolb ...

  9. Echarts数据可视化parallel平行坐标系,开发全解+完美注释

    全栈工程师开发手册 (作者:栾鹏) Echarts数据可视化开发代码注释全解 Echarts数据可视化开发参数配置全解 6大公共组件详解(点击进入): title详解. tooltip详解.toolb ...

随机推荐

  1. PHP初入,(特效的使用)

    <body> <input id="btn1" type="button" value="按钮" /> <in ...

  2. PHP(Math的调用)

    <script> //数学函数(用Math来调用)://round=四舍五入最接近的整数// var l = 1.1;// var y1 = Math.round(l);// docume ...

  3. 8个超震撼的HTML5和纯CSS3动画源码

    HTML5和CSS3之所以强大,不仅因为现在大量的浏览器的支持,更是因为它们已经越来越能满足现代开发的需要.Flash在几年之后肯定会消亡,那么HTML5和CSS3将会替代Flash.今天我们要给大家 ...

  4. 201521123066 《Java程序设计》 第六周学习总结

    1. 本周学习总结 1.1 面向对象学习暂告一段落,请使用思维导图,以封装.继承.多态为核心概念画一张思维导图,对面向对象思想进行一个总结. 1.clone方法 1.1 Object对象中的clone ...

  5. 201521123096《Java程序设计》第五周学习总结

    1. 本周学习总结 1.1 尝试使用思维导图总结有关多态与接口的知识点. 2. 书面作业 (1)代码阅读:Child压缩包内源代码 1.1 com.parent包中Child.java文件能否编译通过 ...

  6. 解决"应用程序无法启动,因为应用程序的并行配置不正确"问题

    想必不少人都会遇到题目中的问题.我在一次和舍友一起重装系统的时候变遇到了上述的问题, 经过仔细分析发现电脑会出现上述问题所必要的条件 系统中没有存在合理的运行库文件 所运行的软件是之前重装系统之间留下 ...

  7. 子元素设定margin值会影响父元素

    有些情况下,我们设定父元素下的子元素margin值时,父元素会被影响. 这是个常见问题,而且只在标准浏览器下 (FirfFox.Chrome.Opera.Sarfi)产生问题,IE下反而表现良好. 例 ...

  8. python os语法

    前几天做了一个文件替换功能用到些python os的功能,感觉python os模块的功能非常的强大, 如果你希望你的python程序能够与平台无关的话,这个模块是尤为重要的.即它允许一个程序在编写后 ...

  9. java自然语言理解demo,源码分享(基于欧拉蜜)

    汇率换算自然语言理解功能JAVA DEMO >>>>>>>>>>>>>>>>>>>&g ...

  10. 对Java的初识

    什么是计算机程序:    为了让计算机执行某些操作或解决某个问题而编写的一系列有序指令的集合.(简单来说就是记算机为完成某些功能生产的一系列有序指令集合); Java的来历:  Java的初期开发早在 ...