echarts如何在Vue中使用-创新互联

这期内容当中小编将会给大家带来有关echarts如何在Vue中使用，文章内容丰富且以专业的角度为大家分析和叙述，阅读完这篇文章希望大家可以有所收获。

创新互联公司是一家集网站建设,茌平企业网站建设,茌平品牌网站建设,网站定制,茌平网站建设报价,网络营销,网络优化,茌平网站推广为一体的创新建站企业，帮助传统企业提升企业形象加强企业竞争力。可充分满足这一群体相比中小企业更为丰富、高端、多元的互联网需求。同时我们时刻保持专业、时尚、前沿，时刻以成就客户成长自我，坚持不断学习、思考、沉淀、净化自己，让我们为更多的企业打造出实用型网站。

1. 存放在vuex中

这么大型的项目，vuex少不了。在前面的组件中，一次请求数据，然后将数据存储到了vuex中，echarts组件再从vuex中获取数据。这样的做法可能代码要稍微复杂点，但是数据存储在vuex中是随时可见的，我们也能随时保存获取的结果，对这些数据可以添加收藏也可以加入缓存中，下次再请求可以先从缓存调用。
（然而这只是我前端的想法，后台已经实现了对请求数据的缓存）

2. 存放在组件中，再分派到echarts组件

再对数据进行还原的时候（我的收藏，最近浏览），因为不需要保存或者收藏数据，我就直接用一个父组件请求，然后再分发到echarts组件，这样没有经过vuex，代码想多要少些。

组件代码

这是组件的html部分，可以看见top以及des是我自己添加的，bottom才是核心，也是整个echarts展示的部分，注意这里添加了ref，在script的代码中，我们将通过这个钩子，将DOM挂载到echarts中

首先我引入了需要的echarts组件，这个部分通过npm i echarts -S添加。

接着data部分我设置了那些将会引起变化的参数。需要注意的是，我并没有将echarts的opt部分写入到data中，因为整个图表是基于数据驱动的，并且随时会发生变化，因此我将opt设置为计算属性computed，这样opt将会根据我的选择动态变化，echarts也将动态响应，mychart用于接收echarts生成的图表实例，再参数变换的时候将会起作用。

props部分是我接收到的参数，这个组件时基于前面我讲的第二种方式——父组件获取数据分发，data是父组件分发给echarts的数据源。

暂时忽略两个Vue生命周期钩子， 后面讲

计算属性中设置了两个属性，origin和opt，注意这个origin很重要，通过它我将opt项与复杂的数据解耦，无论外面的数据怎么换，opt只关心origin的值，而这个opt在两种数据获取的方式中是不一样的，使用vuex的方式，origin将会直接从vuex中获取数据。这样一定程度上也实现了组件的复用。

opt就是该图表组件的设置项了，这个参数按照官网给的配置，自己搭配即可。

接下来是methods部分，setEchart将会完成对整个图表的初始化，通过this.$refs获取DOM实例，再由echars生成实例并绑定在data中的mychart选项。

chartChange是用来响应我自定义组件的变化的，针对选框的不同将会有不同的显示情况。在这里是百分比和数据的切换

接着是前面忽略的生命周期部分

mounted里使用setEchart方法，初始化图表组件，一定要在这里使用该方法，否则会找不到DOM

updated周期里是响应参数变化的方法，首先检测该实例有没有生成（单页应用因为用户可能存在的误操作，很可能导致实例没有生成，这里检测是很有必要的），接着在vue中的数据发生改变时运行chartChange方法，注意，我的选择框是没有绑定事件的，只是通过v-model改变了参数，然后opt动态响应了参数的变化。当opt的参数变化的时候，updated中的方法就会执行，echarts也会动态响应。这个就是使用基于数据驱动vue最精巧的地方，避免了通过事件调用echartChange方法。也是vue中使用echarts核心的一环

另外还有一个就是获取地图参数的，并不用在官网里下载，提供的npm包里就有，按需引用就好了（使用官网的js版本会报错没找到echarts）

import echarts from 'echarts/lib/echarts';
import 'echarts/lib/chart/map';
import 'echarts/map/js/china.js';

style部分就没什么好聊的了，只需要记住一点，必须显式指定加载echarts 的DOM的宽度和高度

父组件对echarts组件的调用

调用组件的方法按照常规组件调用就好了，只是因为echarts加载数据绘制需要耗费不少时间，我们可能需要通过keep-alive保存组件在内存中，避免切出去的时候被释放了。另外可能一个页面需要展示多个echarts类型组件，这里考虑使用component动态组件

上述就是小编为大家分享的echarts如何在Vue中使用了，如果刚好有类似的疑惑，不妨参照上述分析进行理解。如果想知道更多相关知识，欢迎关注创新互联网站建设公司行业资讯频道。

另外有需要云服务器可以了解下创新互联建站www.cdcxhl.com，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。

本文标题：echarts如何在Vue中使用-创新互联
浏览路径：http://www.cdkjz.cn/article/ceposi.html