当前位置:酷酷问答>百科问答>如何使用Vue.js控制FusionCharts图形类型并显示

如何使用Vue.js控制FusionCharts图形类型并显示

2024-09-06 02:40:02 编辑:zane 浏览量:522

如何使用Vue.js控制FusionCharts图形类型并显示

的有关信息介绍如下:

如何使用Vue.js控制FusionCharts图形类型并显示

在FusionCharts中,同一系列的柱状图、折线图、面积图和条状图,它们的数据格式是一样的;如果在Vue.js利用单选按钮的切换事件,控制FusionCharts图形类型转换。下面利用实例说明,操作如下:

第一步,双击打开HBuilderX,在Vue.js框架中的src目录下创建vue文件,如下图所示:

第二步,在标签中,定义数据源dataSource,满足几个图形的数据源,如下图所示:

第三步,在export default中,定义刚开始默认选中的图形类型(column2d),如下图所示:

第四步,在main.js文件中,导入需要转换的几种图形类型,并加到Vue.use()中,如下图所示:

第五步,在中,fusioncharts标签上方添加几个单选按钮组,如下图所示:

第六步,在methods中,定义单选按钮切换事件,根据单选按钮选中的不同的值,修改图形类型参数type,如下图所示:

版权声明:文章由 酷酷问答 整理收集,来源于互联网或者用户投稿,如有侵权,请联系我们,我们会立即处理。如转载请保留本文链接:https://www.kukuwd.com/answer/23596.html
热门文章