可视化/数字孪生专业社区
资源中心
问答
文章
实用工具
ByteVCharts
开源中台
申请建模
申请帮助
登录
注册
申请协助
此单为
付费
协助
×
为协助帮威客用户快速入门,帮威客平台可损供用户特定项目的框架代码开发服务。该服务可为用户快速构建符合项目基本需求的3D可视化框架代码资源(包括源码、3D模型、贴图、数据等),用户的技术团队可在此基础上快速上手,大幅提高3D可视化项目成功基础。
预算金额
公司名称
联系人
微信号
手机号码
提交申请
申请协助
此单为
付费
协助
×
为协助帮威客用户快速入门,帮威客平台可损供用户特定项目的框架代码开发服务。该服务可为用户快速构建符合项目基本需求的3D可视化框架代码资源(包括源码、3D模型、贴图、数据等),用户的技术团队可在此基础上快速上手,大幅提高3D可视化项目成功基础。
预算金额
公司名称
联系人
微信号
手机号码
提交申请
业务咨询
开发咨询
微信咨询
杜老师
黄老师
熊老师
支付信息
×
购买文章
五分钟上手ByteVCharts教程
订单金额
¥
0
实付金额
¥
0
我已阅读并同意ByteV组件购买协议
取消
提交订单
支付宝支付
微信支付
提交订单
0
点赞
0
评论
收藏
分享
举报
五分钟上手ByteVCharts教程
Terry
关注
已关注
0
0
0
725
发表于 2022-04-07 17:33:49
![Alt Text](http://static.bytev.cn/article/1649324/1649324141/1649324141281.gif)ByteVCharts一个基于JavaScript及ES6封装,可以直接调用的图表组件库,内置多套主题设计,支持一键换肤,简单快捷,且支持用户自定义配置。 ByteVCharts适用于 ES6 和 vue的npm npm版本: bytev-charts npm地址: [https://www.npmjs.com/package/bytev-charts](https://www.npmjs.com/package/bytev-charts) 原生js(ES6)版本地址: [http://bytevcharts.bwk.ddns.net:90/](http://bytevcharts.bwk.ddns.net:90/) ##### npm 安装方式: npm install bytev-charts 若启动提示还需install其余插件, 则运行npm install @babel/runtime-corejs2即可; npm install @babel/runtime-corejs2 o:po:p o:p 调用方式和原生js一致,在main.js中注册引入 import ByteV from 'bytev-charts'o:p自定义设置为vue的属性 如:o:pVue.prototype.$bytev = ByteV; ##### ##### [](https://www.npmjs.com/package/bytev-charts-beta#%E5%8E%9F%E7%94%9Fjs-es6)原生js ES6: ##### ##### [](https://www.npmjs.com/package/bytev-charts-beta#%E4%BD%BF%E7%94%A8%E6%96%B9%E6%B3%95%E5%92%8C%E5%B8%B8%E7%94%A8%E6%96%B9%E6%B3%95)使用方法和常用方法o:p /* * 初始化主题 (每个主题的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()
点击查看更多
全部评论
登录
|
注册
关于作者
Terry
TA的个人主页
关注
已关注
文章
52
粉丝
31
获赞
15
评论
8
访问
81530
ThreeJS 轮廓线特效 OutLinePath
创建海洋特效组件 THREEJS 海洋效果 Shader实现
ThreeJS后期处理通道
Three.js物理材质MeshStandardMaterial和MeshPhysicalMaterial
ThreeJs光效流转特效
推荐文章
ThreeJS 轮廓线特效 OutLinePath
(3)、React中使用ECharts——柱状图
31个惊艳的数据可视化作品,让你感受“数据之美”!
防抖节流
创建海洋特效组件 THREEJS 海洋效果 Shader实现
文章目录
文章分享
×
扫一扫分享
复制链接