Vue使用Echart图标插件之柱状图

Echart是一个很好的图表绘制插件，里面有各种各样的图表供我们选择，最近用echart做图表比较多，所以现在记录一下用到的柱状图用到的一些配置和用法：

主要注意的点：

1、创建的画布必须给定大小，不然无法显示
2、xAxis中的data默认为空时，X轴的的描述不存在，xAxis中axisLabel的interval的值表示隔几列显示，默认为1
3、Series就是图表的数据中心，data是传入的数据，可以通过barMaxWidth设置柱子的宽度
4、重点是柱子的颜色Series中itemStyle的color就是用来设置柱子的颜色的，如果柱子要使用不同的颜色那么需要先自定义一个数组来存放颜色字符串，然后通过遍历的方法进行颜色的渲染

好了，废话不多说直接上代码，代码的注释很详细，应该能看得懂。

结果图样： 

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。