LT
编程
Echarts
Python
Django
HTML
MySQL
Java
读书
电影
日常闲聊
计划表
搜索
登录
Echarts学习笔记(一)基础内容
日期: 2019/08/13
作者:
longtao
分类:
Echarts
阅读: 452
@[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评论
×
回复留言
回复评论:
评论内容:
昵称:
邮箱:
评论内容:
目录
最新文章
原码、反码与补码的基础内容
剑指offer之找到第一个公共节点
剑指offer之平衡二叉树
Docker 虚拟化技术
剑指offer之打印二叉搜索树中第k小的结点
分类
编程 (11)
读书 (0)
电影 (0)
日常闲聊 (2)
Echarts (2)
Python (5)
杂七杂八 (2)
Django (5)
HTML (2)
MySQL (1)
计划表 (1)
Java (2)
标签
Git (1)
vscode (1)
Echarts (2)
Python (10)
Django (6)
网站测试 (1)
MySQL (2)
HTML (2)
日常计划 (2)
java (2)
Spring Boot (2)
各种派 (1)
研究生的日常 (2)
算法 (5)
Java (5)
计算机基础 (2)
碎碎念 (0)
共有0评论