Echarts 基础

Echarts 基础

浏览器画图原理简介

Canvas

• 基于像素
• 单个html,类似于画笔在画布上画画
• Echarts基于 canvas画图
• canvas.html

Svg

• 基于对象模型
• 多个图形元素
• 高保真
• svg.html

---

Echarts.init()

• 初始化 Echars实例
• setOption 用指定数据绘图

Option对象

• 标题：title
• 图例：legend
• X轴：xAxis
• 数据：series:
  • Name type data

Echarts常用图之标题组件

标题负责显示整个图表得标题 ： title

• Text:标题文字

• Subtext:子标题

• Left,top,roght,bottom：标题位置

• borderColoe：边框颜色

• borderWidth：边框宽度

工具栏组件 toolbox

• Show:是否显示

• Feature：具体显示的功能

• saveAsImage：保存图片

• Restore：还原

• dataView：数据视图

• dataZoom：缩放视图

• magicType：动态类型切换

弹窗组件 tooltip组件

• Show:是否显示

• Trigger:出发方式，axis就是X轴出发

  标记线和标记点

• 标记线：markline

  • 标记线的添加
  • 最大值，平均值，最小值的标记线

• 标记点：markpoint

  • 标记点的添加
  • 最大值，平均值，最小值的标记点
  • 任意位置的标记点

饼图

• 饼图展示数据的特点
  • 展示百分比
  • Type是pie
• Center圆心坐标
• Radius半径
• Name图例名字
• selectedMode是否支持多选