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

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. AmpLab Tachyon and Shark update

    一个开源的文件系统,拿来主义,先收藏,用得到细品. 简介:https://www.youtube.com/watch?v=cAZ624-69PQ 官网:http://tachyon-project.o ...

  2. 201521123091 《Java程序设计》第2周学习总结

    Java 第二周总结 第二周的作业. 一个简陋的目录 1.本章学习总结 2.Java Q&A 3.使用码云管理Java代码 4.PTA实验 5.小任务 1.本章学习总结 基本数据类型 Stri ...

  3. GUI记事本+切换面板1.1版

    package com.niit.javagui; import java.awt.Color; import java.awt.MenuBar; import java.awt.event.Inpu ...

  4. 201521123098 《Java程序设计》第8周学习总结

    1. 本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结集合与泛型相关内容. 1. 泛型的本质: 1. 他只是一个编译器现象: 2. 虚拟机里只有普通的类和方法: 3. 运行时没有类型参数 ...

  5. 201521123100 《Java程序设计》第4周学习总结

    1. 本章学习总结 1.1 尝试使用思维导图总结有关继承的知识点. 1.2 使用常规方法总结其他上课内容. (1)多态性:相同的形态,不同的行为 (2)类型转换与强制类型转换(cast) 2. 书面作 ...

  6. 201521123099 《Java程序设计》第4周学习总结

    1. 本周学习总结 2. 书面作业 注释的应用 使用类的注释与方法的注释为前面编写的类与方法进行注释,并在Eclipse中查看.(截图) 面向对象设计(大作业1,非常重要) 2.1 将在网上商城购物或 ...

  7. 201521123035《Java程序设计》第一周学习总结

     1.本周学习总结 本周学习了Java从诞生到如今的部分历史,并通过了老师的课堂演示了解了Java在cmd中的编译过程.然后还学习了JDK,JRE,JVM. 2. 书面作业 1.为什么java程序可以 ...

  8. 201521123012 《Java程序设计》第一周学习总结

    一.本章学习内容 1.了解了JDK.JRE .JVM. 2.大概看过了Java的诞生.版本演进(JDK1.1.4,JDK1.1.5--JDK1.1.8,J2SE1.2--Java SE 8)以及三大平 ...

  9. Sublime Text 2 -Sidebar 背景色调整为黑色

    Sublime Text 2 编辑器: Ctrl+` 输入安装代码,安装package control 插件 ctrl+shift+P : Package install 为什么装不上了呢?出现了什么 ...

  10. Java :构造器中的显式参数和this隐式参数

    1.构造器 写一个Java类,首先要先从构造器开始,构造器与类同名,在构造类的对象时会先从构造器开始. 构造器总是伴随着new操作符的执行而被调用. 构造器主要是用来初始化类的实例域. 构造器的特点: ...