五分钟上手ByteVCharts教程

ByteVCharts一个基于JavaScript及ES6封装，可以直接调用的图表组件库，内置多套主题设计，支持一键换肤，简单快捷，且支持用户自定义配置。

ByteVCharts适用于 ES6 和 vue的npm
npm版本: bytev-charts
npm地址: https://www.npmjs.com/package/bytev-charts

原生js(ES6)版本地址: http://bytevcharts.bwk.ddns.net:90/

npm 安装方式:
npm install bytev-charts
若启动提示还需install其余插件, 则运行npm install @babel/runtime-corejs2即可;
npm install @babel/runtime-corejs2

调用方式和原生js一致，在main.js中注册引入 import ByteV from ‘bytev-charts’
自定义设置为vue的属性 如:
Vue.prototype.$bytev = ByteV;

原生js ES6:

使用方法和常用方法

/*     * 初始化主题	(每个主题的ID 可参见example示例)     * 执行后则后续所有init的图表都自动使用此套主题     * 不调用此方法则使用默认主题-加勒比蓝     */

 ByteV.initTheme('主题ID')



/*     * 切换主题     * 	图表实例.setTheme('主题ID'),则只修改该图表的主题     * 	ByteV.setTheme('主题ID'),则修改全部图表主题,并且后续图表也使用修改后的主题     */

 //切换指定图表主题
 实例.setTheme('主题ID')
 
 //切换全部图表主题
 ByteV.setTheme('主题ID')
 
 
 
/*     * 创建图表     * 	创建图表实例(每个图表ID 可参见example示例)     *  参数:	  element - dom对象(应该是唯一且不重复的)     *  		图表ID - 可不传,不传默认返回空echarts对象     *  		data - 图表数据,可不传,传则自动渲染数据,     * 				   不传可后续用返回的实例调用.setData(data)来更新数据     *       * 	返回值: 返回该图表的实例对象,      *	       实例对象有通用属性option, 和通用方法 setData()、setOption()     */

 ByteV.init( element, '图表ID', data)


 
/*     * 修改更新图表option设置项的方法     * 用户可通过 实例.option 获取其设置项,并自定义修改其中的值,     * 修改后调用 实例.setOption() 即可刷新页面图表,也可与不调用,而是等setData()时一并更新,     * 调用 实例.setData() 也会自动刷更新option和刷新该图表     */
 图表实例.setOption()



/*    * 动画效果    * 使用'ByteV'调用则是操作全部图表的动画    * 使用'图表实例'调用只操作对应该图表的动画    */
//播放：
ByteV.playAnimation()
实例.playAnimation()

//停止：
ByteV.stopAnimation()
实例.stopAnimation()

//关闭：
ByteV.offAnimation()
实例.offAnimation()



/*    * 自动轮播    * 使用'ByteV'调用则是操作全部图表的自动轮播    * 使用'图表实例'调用只操作对应该图表的自动轮播    */
//开启：
ByteV.openLoopTooltip()
实例.openLoopTooltip()

//关闭：
ByteV.offLoopTooltip()

实例.offLoopTooltip()