图例的状态随时改变，记录其改变，并且获取图例的状态echarts

var selectArr = optionlegenddata;

myCharton('legendselectchanged', function(obj) {

//alert("22");

var selected = objselected;

var name = objname;

});

overlaysetOption(option);

//设置ajax访问后台填充饼图

function setChartPie(url,id){

var Chart=require('echarts')init(documentgetElementById(id));

ChartshowLoading({text: '正在努力的读取数据中' });

var label=[];

var value=[];

$ajax({

url:url,

dataType:"json",

success:function(data){

$each(data,function(i,p){

label[i]=p['label'];

value[i]={'name':p['label'],'value':p['value']};

});

CharthideLoading();

optionPielegenddata=label;

optionPieseries[0]['data']=value;

optionPieseries[0]['radius']=[0,100];

ChartsetOption(optionPie);

}

});

}

由于在项目中需要对数据进行可视化处理，也就是用图表展示，众所周知echarts是非常强大的插件。一开始想在网上找一个基于vue封装好的（懒省事），eg:vue-echarts ，但是拉取下来发现，跟项目中使用的类型有点偏差，而且他们的数据大多都是定制好的，我很难在此基础上进行更改（惹不起），于是选择了放弃，最终还是选择echarts。以下是我使用的一些心得体会~

我的示例是在vue-cli搭建

首先需要全局引入

在mainjs中

在Echartsvue中

<div id="myChart" :style="{width: '300px', height: '300px'}"></div>

注意：我们要在mounted生命周期函数中实例化echarts对象。因为我们要确保dom元素已经挂载到页面中

这样一个简单的图表就完成了，是不是觉得很简单？假如在一个大型的项目中，而且数据是非常复杂的？那么该如何 *** 作？

由于全局引入会将所有的echarts图表打包，导致体积过大

在Echartsvue文件中

使用 require 而不是 import

基于前面的疑问，加上实际运用到项目中遇到的一些问题，我思考使用组件的形式。

从上边可以看出，你每次在使用echarts的时候，都必须要重复的引入，这样很不方便

vue作为一个组件化开发的框架，我们可以使用组件的方式进行集成。每次我们引入组件，进行使用，这样就方便的多。

下面是一个我自己对echarts进行的一个简单的vue组件的集成。

在echarts中

子组件：

props部分是我接收到的参数，父组件获取数据分发，data是父组件分发给echarts的数据源。

父组件：

如果在大型的项目，而且图表又非常的多，那么vuex少不了。如果把数据集中存储到了vuex中，echarts组件再从vuex中获取数据，我们也能随时保存获取的结果，对这些数据可以添加收藏也可以加入缓存中，下次再请求可以先从缓存调用。接下来会继续分享vuex的使用~~~

以上就是关于图例的状态随时改变，记录其改变，并且获取图例的状态echarts全部的内容，包括:图例的状态随时改变，记录其改变，并且获取图例的状态echarts、怎么样让ECharts从后台获取数据并展示、在Vue中使用echarts等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！