05-ECharts

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:标记点 最大值/最小值/平均值