ECharts 教程
ECharts 教程
  1. ECharts 快速上手
  2. ECharts 在webpack中使用Echarts
  3. ECharts 个性化图表样式的实现
  4. ECharts 实现异步数据加载和更新
  5. ECharts 在图表中加入交互组件
  6. ECharts实现移动端自适应
  7. ECharts数据的视觉映射
  8. ECharts中的事件和行为
  9. ECharts 自定义系列
  10. ECharts 富文本标签
  11. ECharts 实例操作
    1. ECharts实例一：拖拽的实现
    2. ECharts实例二：实现日历图
  12. ECharts API
    1. ECharts API 全局echarts对象
      1. ECharts API图形相关帮助方法
    2. ECharts API 通过echarts.init创建的实例
    3. ECharts 支持图表的行为（action）
      1. ECharts指定与取消数据图形高亮
      2. ECharts中与图例组件相关的行为（action）
      3. ECharts显示和隐藏提示框
      4. ECharts数据区域缩放
      5. ECharts 视觉映射操作
      6. ECharts中时间轴的操作
      7. ECharts工具栏操作
      8. ECharts中饼图的操作
      9. ECharts地图组件应用
      10. ECharts地图图表应用
      11. ECharts关系图设置
      12. ECharts进行区域选择
    4. ECharts中的事件列表
      1. ECharts鼠标事件
      2. ECharts中的图例事件
      3. ECharts数据区域缩放事件
      4. ECharts视觉映射组件的触发事件
      5. EChartss时间轴事件
      6. ECharts 重置事件
      7. ECharts工具栏事件
      8. ECharts地图区域处理事件
      9. ECharts饼图扇形选中事件
      10. ECharts 平行坐标轴范围选取
      11. ECharts 高亮事件
      12. ECharts 添加选框事件
  13. ECharts 附录
    1. ECharts附录一 按需引入ECharts图表和组件
  14. ECharts配置项.setOption
    1. ECharts配置项中标题的设置
      1. ECharts主标题文字设置
        1. ECharts自定义富文本
        2. ECharts副标题文本的设置
          1. ECharts副标题的富文本样式设置
        3. ECharts标题边距的设置
        4. ECharts获取图形的zlevel值
        5. ECharts设置grid组件在容器中的位置
        6. 设置ECharts标题的背景色
        7. ECharts中标题边框的设置
        8. ECharts阴影设置
    2. ECharts图例组件配置项
      1. ECharts图例组件配置 图例类型
      2. ECharts图例组件配置 图例的zlevel和z值
      3. ECharts图例组件配置 控制图例组件的位置和宽高
      4. ECharts图例组件配置 图例列表布局和文本对齐
      5. ECharts图例组件配置 内边距与间隔
      6. ECharts图例组件配置 格式化文本
      7. ECharts图例组件配置 状态显示
      8. ECharts图例组件配置 文本样式
        1. ECharts图例组件配置 富文本样式
      9. ECharts图例组件配置 tooltip配置
      10. ECharts图例组件配置 数据项及图例项
      11. ECharts图例组件配置 背景色及边框
      12. ECharts图例组件配置项 图例阴影
      13. ECharts图例组件配置 图例滚动
      14. ECharts图例组件配置 图例控制块
      15. ECharts图例组件配置 图例控制块的图标
      16. ECharts图例组件配置 翻页按钮
      17. ECharts grid组件配置 直角坐标系网格的实现
        1. ECharts grid组件配置 图形的zlevel和z值
        2. ECharts grid组件离容器的距离
        3. ECharts grid组件配置 是否包含坐标轴刻度标签
        4. ECharts grid组件配置 设置网格样式
        5. ECharts grid组件配置 阴影设置
        6. ECharts grid组件配置 坐标系的tooltip设定
          1. ECharts grid组件配置 是否显示提示框
          2. ECharts grid组件配置 坐标轴指示器
            1. ECharts grid组件配置 坐标轴指示器类型及z值
            2. ECharts grid组件配置 坐标轴指示器的文本标签
              1. ECharts grid组件配置 坐标轴指示器的label设置
              2. ECharts grid组件配置 坐标轴指示器的文本标签样式
              3. ECharts grid组件配置 坐标轴指示器内边距
              4. ECharts grid组件配置 坐标轴指示器文本标签背景色及边框
              5. ECharts grid组件配置 坐标轴指示器文本标签阴影
          3. ECharts grid组件配置 坐标轴指示器线条样式设置
          4. ECharts grid组件配置 坐标轴指示器阴影样式
          5. ECharts grid组件配置 提示框浮层的位置
          6. ECharts grid组件配置 提示框浮层内容格式器
          7. ECharts grid组件配置 提示框浮层背景色、边框及内边距
          8. ECharts grid组件配置 提示框浮层文本样式
          9. ECharts grid组件配置 额外附加到浮层的css样式
    3. ECharts xAxis配置 直角坐标系x轴
      1. ECharts xAxis配置 x坐标轴的显示与索引
      2. ECharts xAxis配置 x坐标轴的位置及偏移
      3. ECharts xAxis配置 x坐标轴的类型
      4. ECharts xAxis配置 x坐标轴名称
      5. ECharts xAxis配置 x坐标轴名称的文本样式
        1. ECharts xAxis配置 x坐标轴名称的富文本样式
      6. ECharts xAxis配置 x坐标轴名称旋转、与轴线的距离
      7. ECharts xAxis配置 x坐标轴的反向及留白
      8. ECharts xAxis配置 x坐标轴刻度
      9. ECharts xAxis配置 坐标轴脱离0值及段数分割
      10. ECharts xAxis配置 x坐标轴刻度分割间隔
      11. ECharts xAxis配置 对数轴及静态坐标轴
      12. ECharts xAxis配置 坐标轴标签是否触发鼠标事件
      13. ECharts xAxis配置 设置x坐标轴轴线
        1. ECharts xAxis配置 x坐标轴轴线的样式
      14. ECharts xAxis配置 x坐标轴刻度设置
        1. ECharts xAxis配置 x坐标轴刻度线的样式
      15. ECharts xAxis配置 x坐标轴刻度标签设置
        1. ECharts xAxis配置 坐标轴刻度标签的富文本样式
      16. ECharts xAxis配置 x坐标轴分隔线设置
        1. ECharts xAxis配置 坐标轴分隔线的样式
      17. ECharts xAxis配置 坐标轴分隔区域设置
        1. ECharts xAxis配置 坐标轴分隔区域的样式
      18. ECharts xAxis配置 类目数据设置
        1. ECharts xAxis配置 类目标签的文本样式
          1. ECharts xAxis配置 类目标签的富文本样式
      19. ECharts xAxis配置 x坐标轴指示器的设置
        1. ECharts xAxis配置 坐标轴指示器的文本标签设置
          1. ECharts xAxis配置 坐标轴指示器文本标签的文本类型
          2. ECharts xAxis配置 设置axisPointer文本标签的内边距、边框及阴影
        2. ECharts xAxis配置 设置坐标轴指示器的线条样式
        3. ECharts xAxis配置 设置坐标轴指示器的阴影样式
        4. ECharts xAxis配置 控制坐标轴指示器触发tooltip
        5. ECharts xAxis配置 获取坐标轴指示器的value和状态
        6. ECharts xAxis配置 在坐标轴指示器中使用拖拽手柄
      20. ECharts xAxis配置 图形的zlevel和z值
    4. ECharts yAxis配置 直角坐标系的y轴
      1. ECharts yAxis配置 yAxis的基本属性
      2. ECharts yAxis配置 坐标轴名称的文本样式
        1. ECharts yAxis配置 自定义坐标轴名称的富文本样式
      3. ECharts yAxis配置 y轴怎么反向与留白
      4. ECharts yAxis配置 设置y轴刻度的最大值与最小值
      5. ECharts yAxis配置 让y轴脱离0刻度
      6. ECharts yAxis配置 分割y轴并设置坐标轴间隔
      7. ECharts yAxis配置 判断yAxis是否静态并设置对数轴底数
      8. ECharts yAxis配置 yAxis标签怎么触发鼠标事件
      9. ECharts yAxis配置 y轴的轴线设置
        1. ECharts yAxis配置 设置y坐标轴轴线样式
      10. ECharts yAxis配置 y坐标轴刻度的属性
        1. ECharts yAxis配置 设置ECharts中y轴刻度线的样式
      11. ECharts yAxis配置 设置yAxis坐标轴刻度标签的属性
        1. ECharts yAxis配置 利用富文本样式设置y轴刻度标签
      12. ECharts yAxis配置 设置y坐标轴在grid区域的分隔线
        1. ECharts yAxis配置 设置y坐标轴分隔线的样式
      13. ECharts yAxis配置 设置yAxis坐标轴分隔区域
        1. ECharts yAxis配置 y坐标轴分割区域的样式设置
      14. ECharts yAxis配置 设置yAxis的类目数据
        1. ECharts yAxis配置 yAxis类目标签的文本样式
          1. ECharts yAxis配置 使用富文本样式设置yAxis坐标轴的类目标签
      15. ECharts yAxis配置 y轴的坐标轴指示器
        1. ECharts yAxis配置 设置y轴坐标轴指示器的文本标签
          1. ECharts yAxis配置 坐标轴指示器文本标签的样式设置
          2. ECharts yAxis配置 设置yAxis坐标轴指示器文本标签的内边距
        2. ECharts yAxis配置 坐标轴指示器线条的样式设置
        3. ECharts yAxis配置 设置y轴坐标轴指示器的阴影样式
        4. ECharts yAxis配置 设置yAxis坐标轴指示器的拖拽手柄
      16. ECharts yAxis配置 y轴所有图形的zlevel和z值
    5. ECharts polar配置 极坐标系polar
      1. ECharts polar配置 设置极坐标系属性
      2. ECharts polar配置 设置极坐标系的tooltip
        1. ECharts polar配置 极坐标系显示与触发提示框组件
        2. ECharts polar配置 tooltip坐标轴指示器配置
          1. ECharts polar配置 坐标轴指示器属性设置
        3. ECharts polar配置 坐标轴指示器的label标签设置
          1. ECharts polar配置 坐标轴指示器的label文字样式
          2. ECharts polar配置 坐标轴指示器线条样式
          3. ECharts polar配置 极坐标系axisPointer阴影样式
        4. ECharts polar配置 极坐标系中tooltip的位置
        5. ECharts polar配置 极坐标系tooltip内容格式器设置
        6. ECharts polar配置 提示框浮层的边框与内边距
        7. ECharts polar配置 极坐标系tooltip文本样式的设置
    6. ECharts radiusAxis配置 极坐标系的径向轴
      1. ECharts radiusAxis配置 径向轴的属性设置
      2. ECharts radiusAxis配置 设置径向轴名称的文本样式
        1. ECharts radiusAxis配置 径向轴名称的富文本样式设置
      3. ECharts radiusAxis配置 径向轴轴线属性与样式
      4. ECharts radiusAxis配置 设置径向轴刻度
        1. ECharts radiusAxis配置 径向轴刻度线样式设置
      5. ECharts radiusAxis配置 设置径向轴的刻度标签
        1. ECharts radiusAxis配置 利用富文本样式设置径向轴刻度标签
      6. ECharts径向轴分隔线设置
      7. ECharts radiusAxis配置 径向轴分隔区域设置
        1. ECharts radiusAxis配置 径向轴分隔区域的样式设置
      8. ECharts radiusAxis配置 径向轴类目数据的属性及文本样式
        1. ECharts radiusAxis配置 径向轴类目标签的富文本样式
      9. ECharts radiusAxis配置 径向轴指示器属性设置
        1. ECharts radiusAxis配置 设置径向轴指示器的label标签
          1. ECharts radiusAxis配置 设置径向轴指示器label标签的文字样式
          2. ECharts radiusAxis配置 设置径向轴指示器的线条
          3. ECharts radiusAxis配置 设置径向轴指示器的阴影样式
          4. ECharts radiusAxis配置 径向轴指示器的拖拽手柄
    7. ECharts angleAxis配置 极坐标系的角度轴
      1. 设置ECharts极坐标系的角度轴属性
      2. ECharst角度轴的轴线属性与样式设置
      3. ECharts angleAxis配置 极坐标系角度轴刻度的属性
        1. ECharts angleAxis配置 角度轴的刻度线样式设置
      4. ECharts angleAxis配置 角度轴的刻度标签
        1. ECharts angleAxis配置 角度轴刻度标签的富文本样式
      5. ECharts angleAxis配置 设置角度轴分隔线的属性与样式
      6. ECharts angleAxis配置 角度轴分隔区域的属性和样式
      7. ECharts angleAxis配置 角度轴类目数据与标签设置
        1. ECharts angleAxis配置 使用富文本样式设置角度轴的类目标签
      8. ECharts angleAxis配置 设置角度轴指示器
        1. ECharts angleAxis配置 角度轴指示器文本标签样式
          1. ECharts angleAxis配置 设置角度轴指示器中label的文字样式
          2. ECharts angleAxis配置 角度轴指示器的线条设置
          3. ECharts angleAxis配置 设置角度轴指示器阴影样式
    8. ECharts radar配置 雷达图坐标系组件配置
      1. ECharts radar配置 radar组件的基本属性介绍
        1. ECharts radar配置 雷达图指示器名称的设置
      2. ECharts radar配置 坐标轴轴线属性与样式
      3. ECharts radar配置 雷达图的axisTick属性
        1. ECharts radar配置 设置radar刻度线样式
      4. ECharts radar配置 坐标轴刻度标签属性
        1. ECharts radar配置 利用富文本样式设置radar刻度标签
      5. ECharts radar配置 坐标轴分隔线
      6. ECharts radar配置 坐标轴分隔区域的设置
      7. ECharts radar配置 雷达图的指示器设置
    9. ECharts dataZoom配置 如何使用dataZoom组件
      1. ECharts dataZoom配置 内置型数据区域缩放组件（dataZoomInside）
      2. ECharts dataZoom配置 滑动条型数据区域缩放组件（dataZoomSlider）
        1. ECharts dataZoom配置 设置dataZoomSlider组件数据阴影的线条样式
          1. ECharts dataZoom配置 dataZoomSlider组件数据阴影的填充样式
        2. ECharts dataZoom配置 dataZoomSlider组件的手柄样式
        3. ECharts dataZoom配置 滑动条型数据区域缩放组件文字样式的设置
    10. ECharts visualMap配置 视觉映射组件（visualMap）
      1. ECharts visualMap配置 连续型视觉映射组件（visualMapContinuous）
        1. ECharts visualMap配置 连续型视觉映射组件的controller属性
        2. ECharts visualMap配置 视觉映射组件的文字样式
      2. ECharts visualMap配置 分段型视觉映射组件
        1. ECharts visualMap配置 分段型视觉映射组件的属性
        2. ECharts visualMap配置 分段型视觉映射组件视觉元素怎么定义
        3. ECharts visualMap配置 设置分段型视觉映射组件的controller
        4. ECharts visualMap配置 设置分段型视觉映射组件文字样式
    11. ECharts tooltip配置 提示框组件属性
      1. ECharts tooltip配置 设置提示框组件文字的样式
      2. ECharts tooltip配置 axisPointer配置项
        1. ECharts tooltip配置 设置坐标轴指示器属性
        2. ECharts tooltip配置 设置提示框组件指示器的文本标签
          1. ECharts tooltip配置 设置提示框组件指示器文本标签的文字样式
        3. ECharts tooltip配置 提示框组件指示器的线条样式
        4. ECharts tooltip配置 提示框组件指示器的阴影样式
        5. ECharts tooltip配置 提示框组件指示器的crossStyle
    12. ECharts axisPointer配置 设置全局坐标轴指示器
      1. ECharts axisPointer配置 全局坐标轴指示器的属性设置
      2. ECharts axisPointer配置 设置坐标轴指示器的文本标签
        1. ECharts axisPointer配置 坐标轴指示器文本标签的文字设置
      3. ECharts axisPointer配置 设置坐标轴指示器的线条
      4. ECharts axisPointer配置 坐标轴指示器的阴影样式
      5. ECharts axisPointer配置 坐标轴指示器拖拽手柄
    13. ECharts toolbox配置 工具栏组件（toolbox）
      1. ECharts toolbox配置 工具栏的feature属性
      2. ECharts toolbox配置 导出图片的操作
        1. ECharts toolbox配置 导出图片的icon样式
      3. ECharts toolbox配置 配置项还原
        1. ECharts toolbox配置 设置配置项还原的icon样式
      4. ECharts toolbox配置 数据视图工具
        1. ECharts toolbox配置 数据视图工具的icon样式
      5. ECharts toolbox配置 数据区域缩放工具
        1. ECharts toolbox配置 数据区域缩放的icon样式
      6. ECharts toolbox配置 动态类型切换工具
        1. ECharts toolbox配置 动态类型切换的icon样式
      7. ECharts toolbox配置 选框组件的控制按钮
      8. ECharts toolbox配置 工具栏组件的icon样式
    14. ECharts brush配置 区域选择组件（brush）
      1. ECharts brush配置 区域选择组件（brush）的属性
    15. ECharts geo配置 地图坐标系组件（geo）
      1. ECharts geo配置 地理坐标系属性介绍
      2. ECharts geo配置 文本标签设置
        1. ECharts geo配置 利用富文本样式设置文本标签
        2. ECharts geo配置 地图区域的多边形图形样式
      3. ECharts geo配置 设置地图中特定的区域
        1. ECharts geo配置 特定地图区域的文本标签
    16. ECharts parallel配置 平行坐标系
      1. ECharts parallel配置 平行坐标系的属性
      2. ECharts parallel配置 设置多个平行坐标轴
        1. ECharts parallel配置 平行坐标轴轴线设置
        2. ECharts parallel配置 parallel坐标轴如何设置刻度属性
        3. ECharts parallel配置 怎么设置平行坐标轴刻度标签
        4. ECharts parallel配置 使用富文本样式设置parallel的刻度标签
        5. ECharts parallel配置 坐标轴如何配置类目标签
        6. ECharts parallel配置 平行坐标轴类目标签的rich属性
    17. ECharts parallelAxis配置 坐标轴组件的使用
      1. ECharts parallelAxis配置 如何框选parallel坐标轴
      2. ECharts parallelAxis配置 平行坐标轴组件如何设置轴线
      3. ECharts parallelAxis配置 怎么设置平行坐标轴组件刻度
      4. ECharts parallelAxis配置 如何使用平行坐标轴组件刻度标签
      5. ECharts parallelAxis配置 设置平行坐标轴组件的类目标签
        1. ECharts parallelAxis配置 设置类目标签的文字的方法
    18. ECharts singleAxis组件基本使用
      1. ECharts singleAxis组件配置 怎么设置单轴的轴线
      2. ECharts singleAxis组件配置 如何设置singleAxis组件的刻度
      3. ECharts singleAxis组件配置 单轴刻度标签的设置
      4. ECharts singleAxis组件配置 用富文本样式设置单轴刻度标签
      5. ECharts singleAxis组件配置 如何使用分隔线
      6. ECharts singleAxis组件配置 设置单轴的分隔区域
      7. ECharts singleAxis配置 单轴的类目标签属性及文字样式
      8. ECharts singleAxis配置 单轴指示器在ECharts中的使用
        1. ECharts singleAxis配置 单轴指示器文本标签
        2. ECharts singleAxis组件配置 单轴指示器线条配置
        3. ECharts singleAxis配置 单轴指示器怎么设置阴影
        4. ECharts singleAxis配置 单轴指示器拖拽手柄的实现
      9. ECharts singleAxis配置 单轴中tooltip如何设置
    19. ECharts timeline组件配置 快速上手时间轴组件
      1. ECharts timeline组件配置 时间轴轴线如何设置
      2. ECharts timeline组件配置 设置时间轴的文本标签
      3. ECharts timeline组件配置 时间轴图形样式设置
      4. ECharts timeline组件配置 当前项的图形样式
      5. ECharts timeline组件配置 控制按钮的样式
        1. ECharts timeline组件配置 控制按钮在不同状态下的样式
    20. ECharts graphic组件配置 图形元素组件（graphic）
      1. ECharts graphic组件配置 group图形元素
      2. ECharts graphic组件配置 如何使用image图形元素
      3. ECharts graphic组件配置 图表的文本块设置
      4. ECharts graphic组件配置 如何设置矩形元素
      5. ECharts graphic组件配置 圆环图形元素的使用
      6. ECharts graphic组件配置 设置扇形元素
      7. ECharts graphic组件配置 圆弧属性
      8. ECharts graphic组件配置 多边形元素的基本属性
      9. ECharts graphic组件配置 图表折线元素
      10. ECharts graphic组件配置 如何设置直线元素
      11. ECharts graphic组件配置 怎么使用贝塞尔曲线
    21. ECharts calendar组件配置 日历坐标系组件
      1. ECharts calendar组件配置 日历坐标系属性
      2. ECharts calendar组件配置 日历坐标系如何设置分隔线
      3. ECharts calendar组件配置 日历格的样式怎么设置
      4. ECharts calendar组件配置 如何设置星期轴的样式
      5. ECharts calendar组件配置 日历坐标系的月份轴有哪些属性
      6. ECharts calendar组件配置 日历坐标系年份标签样式
  15. ECharts series组件介绍
    1. ECharts series组件配置 折线/面积图属性大全
      1. ECharts series组件配置 折线图如何标注折线图
      2. ECharts series组件配置 折线图的标域该怎么设置
      3. ECharts series组件配置 折线图设置提示框
    2. ECharts series组件配置 柱状图基本属性设置
      1. ECharts series组件配置 设置柱状图的文本标签
      2. ECharts series组件配置 柱状图的标注如何实现
      3. ECharts series组件配置 使用柱状图标线
      4. ECharts series组件配置 柱状图提示框
    3. ECharts series组件配置 饼图属性设置
      1. ECharts series组件配置 饼图data数据如何设置
    4. ECharts series组件配置 如何实现散点图
      1. ECharts series组件配置 散点图特定的提示框
    5. ECharts series组件配置 具有涟漪特效的散点图属性
      1. ECharts series组件配置 涟漪动画设置
      2. ECharts series组件配置 涟漪特效散点图标域
    6. ECharts series组件配置 雷达图属性设置
      1. ECharts如何设置雷达图的线条样式
      2. 与ECharts雷达图区域相关的属性设置
    7. ECharts series组件配置 Treemap
      1. ECharts设置Treemap属性
      2. Treemap层级设置
      3. Treemap是否响应和触发鼠标事件
      4. Treemap父节点标签
      5. Treemap：使用面包屑显示当前节点路径
      6. Treemap特定的提示框浮层
    8. ECharts series组件配置 箱形图的使用
      1. 设置ECharts箱形图的标注
      2. ECharts设置箱形图标线的属性
      3. 设置ECharts箱形图的标域属性
      4. ECharts箱形图的提示框浮层设置
    9. ECharts series组件配置 K线图
      1. K线图有哪些属性？
      2. 如何设置K线图的提示框浮层
  16. ECharts series组件配置 热力图
    1. 设置特定于ECharts热力图系列的提示框浮层
  17. ECharts地图系列
    1. ECharts地图的提示框浮层设置
  18. ECharts系列列表：平行坐标系
    1. ECharts平行坐标系属性
  19. ECharts线图：绘制线数据
    1. 如何设置ECharts线图的特效
    2. ECharts线图标域属性介绍
  20. ECharts系列：桑基图的使用
    1. 设置桑基图节点的关系数据
    2. ECharts：特定于桑基图的提示框浮层
  21. ECharts漏斗图属性与实例介绍
  22. ECharts仪表盘属性与使用
  23. ECharts象形柱图
    1. ECharts象形柱图属性设置
    2. 象形柱图hover动画效果设置
    3. ECharts象形柱图的提示框浮层设置
  24. ECharts系列：主题河流图
    1. 设置ECharts主题河流图的提示框浮层
  25. ECharts图表自定义系列
    1. ECharts自定义系列属性
    2. ECharts自定义系列的渲染逻辑
    3. 设置ECharts自定义系列的提示框浮层
  26. ECharts配置项：背景色
  27. 设置ECharts全局字体样式
  28. 设置ECharts动画的属性
  29. ECharts渐进式渲染简单介绍
  30. 更多有关ECharts图表的设置
阅读(7.7k) 书签 赞(0) 我要纠错

ECharts分段型视觉映射组件

2018-09-20 10:57 更新

visualMap[i]-piecewise

分段型视觉映射组件（visualMapPiecewise）

（参考视觉映射组件（visualMap）的介绍）

展现形式如下图：


点击编辑实例 》》

分段型视觉映射组件，有三种模式：


以上内容是否对您有帮助：
← 设置ECharts视觉映射组件的文字样式
ECharts分段型视觉映射组件的属性 →

推荐文章

推荐教程

推荐课程

在线笔记
App下载
App下载

扫描二维码

下载编程狮App

公众号
微信公众号

编程狮公众号