【Vue+Echarts】Vue中Echarts图表的使用（三）—— 组件模块调用不同类型的Echarts图表（动态图表生成）

这节也是这个系列最后的一篇文章了。

第二篇文章，将Echarts封装成了组件，在使用的时候，只需将ChartsOption传递进去即可，同时，提供了监听事件，当Option发生变化时，会刷新图表。

因此，接下来可以延申的内容是，传递不同类型的图表，或者说，根据使用情况，可以调用不同的图表类型——即：生成对应的Option值

如果使用echarts的页面不多，仅仅在一个页面中，那可以将函数（函数的返回值为Option）直接写在methods中，在需要生成对应图表的时候，调用对应的函数即可。

如果，多个页面使用Echarts组件，那么，可以将图表函数声明成全局函数。

笔者所采用即为生成全局函数，下面简单介绍一下，如何声明。

Step 1 ：创建JS文件，在JS文件中增加一下代码（创建框架，将定义的函数暴露出去）

exports.install = function (Vue) {
}

Step 2 ：声明自己需要生成的Echart图表类型（以柱状图为例）

笔者采用这种函数声明方式，除此之外，还有其他的方法，如果有需要可以查询资料。

Echarts函数，配合二（系列文章）创建的组件，只需将返回值的Option代入对应的参数接口，即可生成图表。

Vue.prototype.'函数名' = function(参数){’函数体‘}

exports.install = function (Vue) {
Vue.prototype.GenBarChart = function (Series_data) {var option = {series: [{data: Series_data,type: 'bar',itemStyle: {normal: {label: {show: false,position: 'top',textStyle: {color: "#a4a4a4",fontSize: 12}}}}}]};return option}
}

Step 3：main.js 中引入全局函数

import GetChartOption from './assets/js/GetChartsOption'
Vue.use(GetChartOption)

Step 4 ：Vue中调用函数

将生成的返回值，覆盖data(){}中的Option值，页面会自动刷新生成你所需要的图表。

完成上述步骤，即可实现动态（按需）图表的生成。

【Vue+Echarts】Vue中Echarts图表的使用（三）—— 组件模块调用不同类型的Echarts图表（动态图表生成）相关推荐

Vue在路由中懒加载并创建组件，省去写页面的步骤
需求现在有一个公共组件,在多个端都需要使用,但传入组件的参数不同,每个端都要写个vue的页面或是component有点麻烦. <template><child blPath=&qu ...
Vue或uniapp 中动态绑定背景图片（三种情况）
Vue 中动态绑定背景图片(三种情况)_MrQiuGH的博客-CSDN博客_vue 动态背景图
Vue进阶（幺贰零）：父组件获取子组件验证结果
文章目录一.前言二.代码实现三.拓展阅读一.前言在开发Vue项目过程中,代码复用之自定义组件是常做事情.当子组件为form表单的时候,父组件需要获取子组件(表单)的验证结果. 尽管有 pro ...
axure中图表背影_Axure 教程：动态图表——排名图
之前的文章Axure教程:可视化视图和大家分享了怎样用中继器来制作图表.后来有粉丝问我可不可以用中继器做成动态的图表.所以现在作者就教大家怎么用axure来制作动态图表,今天先来制作排名图. 这个原型 ...
excel切片器_如何快速做出酷炫的Excel动态图表？
作为一名天天要跟Excel打交道的 @运营菌 ,反正我认为自己做的图表就挺酷炫的.不信,你们来看看~ 王者之星进阶の图表运营之星智联之薪由于本文较长,干货较多,建议同学先点赞▲收藏★喜欢❤三连 ...
3个套路带你玩转Excel动态图表
罂粟姐姐 | 作者简书 | 来源在这篇教程中,为大家分享Excel动态图表的三个套路,毕竟自古套路得人心啊. 1 辅助数据和复选框的结合先看最终效果: 动态折线图操作步骤 (1)新建辅助数 ...
java 动态图表_【动态演示】3个套路带你玩转Excel动态图表！
在这篇教程中,为大家分享Excel动态图表的三个套路,毕竟自古套路得人心啊. 1 辅助数据和复选框的结合先看最终效果: 动态折线图操作步骤 (1)新建辅助数据表,在B18单元格输入公式=IF(B$ ...
数据可视化技能之组合框完成动态图表
本文章涉及内容: 1.反选 2.使用控件,完成动态图表开发者模式显示控件使用组合框+offset+名称构造动态图表使用列表框+辅助表格构造动态图表使用复选框构建动态图表如图所示:最终实现的效 ...
Excel动态图表制作
Excel动态图表制作起来还是很简单的,2个制作Excel动态图表的小方法,一看就会哦~ 一.结合下拉菜单制作动态图表结合下拉菜单,我们可以制作一个辅助动态图表,下拉选择时,下方的图表会自动的更新, ...

【Vue+Echarts】Vue中Echarts图表的使用（三）—— 组件模块调用不同类型的Echarts图表（动态图表生成）

【Vue+Echarts】Vue中Echarts图表的使用（三）—— 组件模块调用不同类型的Echarts图表（动态图表生成）相关推荐

最新文章

热门文章