ECharts开篇
- ECharts是一个使用JavaScript实现的"数据可视化"库,它可以流畅的运行在PC端和移动设备上
- 数据可视化: 就是可以将数据通过图表的形式展现出来
- ECharts提供的图表类型
- ECharts 提供了常见的折线图,柱状图,散点图,饼图,K线图
- 用于统计的盒形图
- 用于地理数据可视化的地图,热力图,线图
- 用于关系数据可视化的关系图,treemap,旭日图,多维数据可视化的平行坐标
- 还有用于BI的漏斗图,仪表盘
- 并且支持图与图之间的混搭
- ECharts显示图表的原理
- ECharts4.0 之前,底层是使用canvas标签来实现图表绘制的
- ECharts4.0 开始,为了提升移动端性能,还支持SVG渲染
ECharts基本使用
- 导入ECharts插件
- 为ECharts准备一个容器
- 拿到准备好的容器
- 创建一个ECharts对象: echarts.init(容器);
- 对容器进行一些配置
- 将配置传递给ECharts: ECharts对象.setOption(配置);
标题组件
- show:是否显示
- text:标题文字
- subtext:子标题文字
- left/top/right/bottom: 标题位置
- borderColor:边框颜色
- borderWidth:边框宽度
工具箱组件(toolbox)
- show:是否显示
- feature:具体显示功能
- saveAsImage:保存图片
- dataView:数据视图
- restore:还原
- dataZoom:缩放视图
- magicType:动态类型切换
ECharts弹框组件和数据标记
- 弹窗组件(tooltip)
- show:是否显示
- tigger:显示方式,axis X轴显示
- 数据标记
- markLine:标记线 最大值/最小值/平均值
- markPoint:标记点 最大值/最小值/平均值
