vue+echarts绘制折线图、柱状图和扇形图教程

前端时间在前端岗位上要实现Vue项目中的echarts画图,今天来分享下vue+echarts折线图、柱状图和扇形图的方法。

每种图的echarts配置差不多一致,但根据图种需进行指定选项的改动。

一、折线图

折线图中,series要包含每条折线的数据。






效果图

vue+echarts绘制折线图、柱状图和扇形图教程_第1张图片

二、柱状图

柱状图中,要在series加入每个bar的数据。






效果图

vue+echarts绘制折线图、柱状图和扇形图教程_第2张图片

三、扇形图

扇形图中不需要xAxis和yAxis,一个series的data加入每个类别的数据,格式为 {value, name}







效果图

vue+echarts绘制折线图、柱状图和扇形图教程_第3张图片

这样就绘制出简单的echarts图啦!

总结

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。

你可能感兴趣的:(vue+echarts绘制折线图、柱状图和扇形图教程)