Echarts学习笔记(一)基础内容

@TOC

1. 基础内容

  1. tooltip: 提示框
  2. legend: 图例
  3. title: 标题
  4. option: 图表选项,包含图表实例任何可配置选项: 公共选项 , 组件选项 , 数据选项
  5. toolbox: 工具箱,一个图表中只能拥有一个工具箱
  6. tooltip: 提示框,鼠标悬浮时提示
  7. dataRange: 值域选择控件,一个图标中只能拥有有个值域控件
  8. dataZoom: 数据区域缩放。与toolbox.feature.dataZoom同步,仅对直角坐标系图表有效
  9. grid: 直角坐标系内绘图网格
  10. xAxis: 直角坐标系中的横坐标,拥有三种类型:类目型、数值型和时间型。默认第一条放置于底部,第二条放置在顶部
  11. yAxis: 直角坐标系下的纵坐标,同样有3中数据类型。默认第一条放置在左边,第二条放置在右边
  12. series: 驱动图表生成的数据内容数组,数组中每一项为一个系列的选项及数据。主要用于指定数据显示的类型,以及一些图形的位置变化等
  13. timeline: 时间轴,常用于展现同一系列数据在时间维度上的多份数据
  14. itemStyle: 设置图标的样式,可以设置图形的默认样式和强调样式
  15. lineStyle:线条的样式
  16. areaStyle: 区域的填充样式
  17. textStyle: 文本样式
  18. loadingOption: 过渡显示
  19. noDataLoadingOption: 无数据提示
  20. backgroundColor: 全图的默认背景样式
  21. color: 颜色,可以设置颜色序列
  22. symbolList: 设置图形类型列表,可循环使用
  23. renderAsImage: 渲染为图片
  24. animation: 是否启用图标初试化动画,默认是开启
  25. addDataAnimation: 是否启用动态数据接口动画效果,默认开启
  26. animationThreshold: 动画元素阀值,产生的图形原素超过2500不出动画,
  27. animationDuration : {number} 2000,进入动画时长,单位ms
  28. animationDurationUpdate: {number} 500,更新动画时长,单位ms
  29. animationEasing: {string} 'BounceOut',主元素的缓动效果

二、line线性图中的一些详细配置

  1. boundaryGap: 坐标轴两边留白策略,类目轴和非类目轴的设置和表现不一样。放在axis系列中
  2. stack: 数据堆叠,同个类目轴上系列配置相同的stack值后,后一个系列的值会在前一个系列的值上相加。
  3. markPoint: 图标标注,
  4. makeLine: 图标标线
  5. tooltip:
    1. trigger: 触发类型,分为数据项,坐标轴,不触发等情况
    2. axisPointer: 坐标轴指示器配置项。
  6. position: 'top'设置坐标轴的位置
  7. axisLine: {onZero: true},设置坐标轴是否从0点开始
  8. visualMap:视觉映射组件
    1. pieces: 自定义分段的大小
      1. min : 最小
      2. max:最大
      3. lt: 小于
      4. gt: 大于
      5. lte: 小于等于
      6. gte: 大于等于

三、设置多图联动

axisPointer: {
        link: {xAxisIndex: 'all'}
    },


    //或者
    link: [
    {
        // 表示所有 xAxisIndex 为 0、3、4 和 yAxisName 为 'someName' 的坐标轴联动。
        xAxisIndex: [0, 3, 4],
        yAxisName: 'someName'
    },
    {
        // 表示左右 xAxisId 为 'aa'、'cc' 以及所有的 angleAxis 联动。
        xAxisId: ['aa', 'cc'],
        angleAxis: 'all'
    },
    ...
]
如上所示每个 link group 中可以用这些方式引用坐标轴

{
    // 以下的 'some' 均表示轴的维度,也就是表示 'x', 'y', 'radius', 'angle', 'single'
    someAxisIndex: [...], // 可以是一个数组或单值或 'all'
    someAxisName: [...],  // 可以是一个数组或单值或 'all'
    someAxisId: [...],    // 可以是一个数组或单值或 'all'
}

相关文章:

  1. vscode常用命令
  2. Django 之 文本编辑器

提交评论

请先 后进行评论

评论列表

共有0评论