📝 获取方式

一、获取ECharts

二、在项目中ECharts

📝 概念理解

一、图表容器的初始化大小

1. 在HTML中定义一个<div>节点，传入节点也即图表的初始大小

二、ECharts中的样式设置

三、数据

• 指定数据到视觉的映射，从而形成图表。

• 数据和其他配置可以被分离开来，易于管理。

• 数据可以被多个系列和组件复用。

• 支持更多的数据常用格式，一定程度上避免了数据格式的转化。

四、数据转换transform

• 聚集 (Aggregate)

• 直方图 (Histogram)

• 简单聚类 (Clustering)

• 线性回归线 (Linear Regression)

• 指数回归线 (Exponential Regression)

• 对数回归线 (Logarithmic Regression)

• 多项式回归线 (Polynomial Regression)

五、坐标轴

• X轴：xAxis

• y轴：yAxis

• 轴线：linestyle

• 刻度：axisTick

• 刻度标签：axisLabel

六、视觉映射

• 连续型视觉映射continuous：通过制定最大值和最小值，就可以确定视觉映射的范围。

• 分段性视觉映射piecewise
• 连续型数据平均分段
• 连续型数据自定义分段
• 离散数据（类别性数据）

七、图例

• 布局

• 样式

• 交互

八、事件与行为

💡 应用示例

1.柱状图

• 基础柱状图

• 堆叠柱状图：使用 EChart 实现堆叠柱状图的方法非常简单，只需要给一个系列的 stack 值设置一个字符串类型的值，这一个值表示该系列堆叠的类别。也就是说，拥有同样 stack 值的系列将堆叠在一组。

• 动态排序柱状图:动态排序柱状图是一种展示随时间变化的数据排名变化的图表，通常是横向的柱条。

1. 柱状图系列的 realtimeSort 设为 true，表示开启该系列的动态排序效果

2. yAxis.inverse 设为 true，表示 Y 轴从下往上是从小到大的排列

3. yAxis.animationDuration 建议设为 300，表示第一次柱条排序动画的时长

4. yAxis.animationDurationUpdate 建议设为 300，表示第一次后柱条排序动画的时长

5. 如果想只显示前 n 名，将 yAxis.max 设为 n - 1，否则显示所有柱条

6. xAxis.max 建议设为 'dataMax' 表示用数据的最大值作为 X 轴最大值，视觉效果更好

7. 如果想要实时改变标签，需要将 series.label.valueAnimation 设为 true

8. animationDuration 设为 0，表示第一份数据不需要从 0 开始动画（如果希望从 0 开始则设为和 animationDurationUpdate 相同的值）

9. animationDurationUpdate 建议设为 3000 表示每次更新动画时长，这一数值应与调用 setOption 改变数据的频率相同

10. 以 animationDurationUpdate 的频率调用 setInterval，更新数据值，显示下一个时间点对应的柱条排序

• 阶梯瀑布图：Apache ECharts 中并没有单独的瀑布图类型，但是我们可以使用堆叠的柱状图模拟该效果。

2.折线图

• 基础折线图
• 最简单的折线图



• 笛卡尔坐标系中的折线图



• 折线图的样式设置
• 折线的样式：lineStyle。
• 数据点的样式：itemStyle。
• 在数据点出显示数值：在系列中，这数据点的标签通过 series.label 属性指定。如果将 label 下的 show 指定为true，则表示该数值默认时就显示；如果为 false，而 series.emphasis.label.show 为 true，则表示只有在鼠标移动到该数据时，才显示数值。
• 空数据：在一个系列中，可能一个横坐标对应的取值是“空”的，将其设为 0 有时并不能满足我们的期望--空数据不应被其左右的数据连接。在 ECharts 中，我们使用字符串 '-' 表示空数据，这对其他系列的数据也是适用的。注意：空数据！=取值为0的数据。

• 堆叠折线图：同堆叠柱状图一样，设置stack即可。

• 区域面积图：区域面积图将折线到坐标轴的空间设置背景色，用区域面积表达数据。相比普通的折线图，区域面积图的视觉效果更加饱满丰富，在系列不多的场景下尤其适用。通过 areaStyle 设置折线图的填充区域样式。

• 平滑曲线图:将折线图系列的 smooth 属性设置为 true 即可。

• 阶梯线图:阶梯线图又称方波图，它使用水平和垂直的线来连接两个数据点，而普通折线图则直接将两个点连接起来。阶梯线图能够很好地表达数据的突变。

3.饼图

• 基础饼图

• 圆环图:饼图是一个内半径为 0 的圆环图，也就是说，饼图是圆环图的特例。

• 南丁格尔图（玫瑰图）:ECharts 可以通过将饼图的 series.roseType 值设为 'area' 实现南丁格尔图，其他配置项和饼图是相同的。

4.散点图

• 基础散点图
• 最简单的散点图



• 笛卡尔坐标系下的散点图



• 散点图的样式设置
• symbol:'circle'、'rect'、'roundRect'、'triangle'、'diamond'、'pin'、'arrow' 。也可以使用SVG路径的矢量图。
• series.symbolSize：它既可以是一个表示图形大小的像素值，也可以是一个包含两个 number 元素的数组，分别表示图形的宽和高。同时它还可以作为一个回调函数使用。