博客简介

K线图有很多种类，当前展示仅为基础的传统分析的一种。

绘制效果，我们可以发现：它多出了对这五天内的现价做个最高价和最低价的标注，并且对最新时间段的现价数据做个闪烁点+涟漪特效。现价中的闪烁点是使用带有涟漪特效动画的散点（气泡）图来实现的，它可以利用动画特效可以将某些想要突出的数据进行视觉突出。分析：五日图其实也就是展示了相当于五天的分时图的数据量；属性可以对图表的数据进行标注，借由该属性中的。我们可以在图表上标注出最高价和最低价。

根据前面的绘制的现价图，均价图，再结合成交量图，我们只需要修改一些布局，就可以组合成分时图

分析：根据需要实现的效果图，我们可以进行分析，这是一个由柱状图且柱子有红绿两种颜色制作而成的成交量图。在开始写代码之前，我们依然可以去参考一下官方的一些示例，并进行分析。Echarts官方示例普通柱状图：自定义单个柱子的颜色：从上面我们可以看出，我们可以通过将 series 属性中 data 数据的的单个数据改为 object 类型，设置其中的 itemStyle 的 color 从而设置单个柱子颜色；基于以上的分析和参考，我们可以开始按照这个思路根据实际的业务数据和需求来制作成交量图。关键代码

根据需要实现的效果图，我们可以进行分析，这是由两条折线组成的图表，且现价图的折线拥有区域填充的透明效果。因此，我们需要制作两个折线图（现价图，均价图）进行图表叠加，并且利用 areaStyle 属性来制作区域填充的透明效果。话不多说，我们开始行动！但在此之前，我们可以去参考一下官方的一些示例，并进行分析。Echarts官方示例先是普通的折线图：而在普通的折线图的基础上，在 series 的type为line的y轴的数据里增加了 smooth ，开启了折线的平滑显示，并且接下来我们绘制折线图时也会用上

Vue3项目中使用 Echarts 绘制股票图表的分享