刘龙韬的博客-文章：Echarts学习笔记（一）基础内容

Echarts学习笔记（一）基础内容

日期: 2019/08/13
作者: longtao
分类: Echarts
阅读: 385

@[TOC](Echarts学习笔记)

# 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`: 时间轴，常用于展现同一系列数据在时间维度上的多份数据
13. `itemStyle`: 设置图标的样式，可以设置图形的默认样式和强调样式
14. `lineStyle`：线条的样式
15. `areaStyle`: 区域的填充样式
16. `textStyle`: 文本样式
17. `loadingOption`: 过渡显示
18. `noDataLoadingOption`: 无数据提示
19. `backgroundColor`: 全图的默认背景样式
20. `color`: 颜色，可以设置颜色序列
21. `symbolList`: 设置图形类型列表，可循环使用
22. `renderAsImage`: 渲染为图片
23. `animation`: 是否启用图标初试化动画，默认是开启
24. `addDataAnimation`: 是否启用动态数据接口动画效果，默认开启
25. `animationThreshold`: 动画元素阀值，产生的图形原素超过2500不出动画，
26. `animationDuration` : {number} 2000，进入动画时长，单位ms
27. `animationDurationUpdate`: {number} 500，更新动画时长，单位ms
28. `animationEasing`: {string} 'BounceOut'，主元素的缓动效果

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

## 三、设置多图联动
```JavaScript
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'
    },
    ...
]
```
```JavaScript
如上所示，每个 link group 中可以用这些方式引用坐标轴：

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

网站名称: 刘龙韬的博客
本文链接: www.liulongtao.com/aritcle/3
版权声明: 未经允许，禁止转载！

相关文章：

上一篇： vscode常用命令
下一篇： Django 之文本编辑器

提交评论

评论列表

共有0评论

目录

最新文章

分类

标签

本站内容

1. 本站运行时间：

2. 本站使用Django搭建

3. 本站使用阿里云服务器

文章介绍

1. Python学习

2. java学习

3. 前端开发

友链

©copyright 刘龙韬的博客 | 备案：鲁ICP备17024355号-1