一、Echarts动态图实现思路1、这样写会报错：`setOption` should not be called during main process.  ```javascriptvar option={title:myTitle};/*原始配置*/clearInterval(timeTicket);var timeTicket = setInterval(function (){    /*此处向后台发送请求并获取返回值*/    myTitle =result[0];    myChart.setOption(option);},500);```2、这样写不会报错  ```javascriptvar option={};/*原始配置*/clearInterval(timeTicket);var timeTicket = setInterval(function (){    /*此处向后台发送请求并获取返回值*/    option.series[0].data[0].value =result[0];    myChart.setOption(option);},500);```3、这样写不会报错  ```javascriptclearInterval(timeTicket);var timeTicket = setInterval(function (){    /*此处向后台发送请求并获取返回值*/    var option = myChart.getOption();/*实例获取*/    option.series[0].data[0].value = result[0];    myChart.setOption(option);},500);```二、定时更新数据的多图表实现思路(在angular1框架中使用)方法一：1、初始化，（1）通过多次执行var oneChart = echarts.init(document.getElementById(id))，获取多个实例并把实例放进数组myArray里；（2）多次定义配置项var oneOption = {}；（3）用angular.forEach(myArray，function(item){ item.setOption(oneOption); })获取多图表；（4）执行获取数据函数，获取返回值2、定时执行获取数据函数 $scope.myInterval=$interval(function () { getData() }, 3000);3、定义获取数据函数getData```javascript$scope.getData=function(){   /*1、发送请求     2、获取返回值result     3、择出所需数据放入数组var dataArray=[[result.AAA.one,result.AAA.two],[result.BBB.one,result.BBB.two],[result.CCC.one,result.CCC.two],...]     4、用新数据更新实例的图表*/    angular.forEach(myArray,function(item,index){        var option = item.getOption();        /*以下直接给配置项赋值*/        option.series[0].data[0].value = dataArray[index][0];        /*以下经计算后给配置项赋值*/        var value = dataArray[index][0];        var lastValue= (100 - value) * 266 / 360;        option.series[2].data[0].value = lastValue;        option.series[2].data[1].value = 100 - lastValue;        /*以下给配置项添加外来图片*/        option.graphic = [{}];        /*以下更新实例的图表*/        item.setOption(option);    });}```三、定时更新数据的多图表实现思路(在angular1框架中使用)方法二：1、初始化，（1）通过多次执行var oneChart = echarts.init(document.getElementById(id))，获取多个实例并把实例放进数组myArray里；（2）多次定义配置项var oneOption = {}；（3）用angular.forEach(myArray，function(item){ getData () })获取多图表；2、定时执行获取数据函数 $scope.myInterval=$interval(function () { getData() }, 3000);3、定义获取数据函数getData```javascript$scope.getData=function(){      /*1、发送请求        2、获取返回值result        3、择出所需数据放入数组var dataArray=[[result.AAA.one,result.AAA.two],[result.BBB.one,result.BBB.two],[result.CCC.one,result.CCC.two],...]        4、用新数据更新实例的图表*/       angular.forEach(myArray,function(item,index){           /*以下直接给配置项赋值*/           oneOption.series[0].data[0].value = dataArray[index][0];           /*以下经计算后给配置项赋值*/           var value = dataArray[index][0];           var lastValue= (100 - value) * 266 / 360;           oneOption.series[2].data[0].value = lastValue;           oneOption.series[2].data[1].value = 100 - lastValue;           /*以下给配置项添加外来图片*/           oneOption.graphic = [{}];           /*以下更新实例的图表*/           item.setOption(oneOption);       });}```四、定时更新数据的多图表实现思路(在angular1框架中使用)方法三：1、初始化，（1）一次执行实例获取函数getChartInstances，获取多个实例并把实例放进数组myArray里；（2）多次执行配置获取函数getSingleOption，获取多个配置项，比如oneOption；（3）用angular.forEach(myArray，function(item){ getData () })获取多图表；2、定时执行获取数据函数 $scope.myInterval=$interval(function () { getData() }, 3000);3、定义实例获取函数getChartInstances```javascript$scope.getChartInstances=function (arrayID){    var chartsInstance=[];    for(var i=0;i<arrayID.length;i++){        var oneChart= echarts.init(document.getElementById(arrayID[i]));        chartsInstance.push(oneChart);    }    return chartsInstance;}```4、定义配置获取函数getSingleOption```javascript$scope.getSingleOption=function (singleID){    var option = {};    if(singleID="a"){        option.series[2].data[0].name = "CPU利用率";    }    return option;};```   5、定义获取数据函数getData```javascript$scope.getData=function(){     /*1、发送请求       2、获取返回值result       3、择出所需数据放入数组var dataArray=[[result.AAA.one,result.AAA.two],[result.BBB.one,result.BBB.two],[result.CCC.one,result.CCC.two],...]       4、用新数据更新实例的图表*/      angular.forEach(myArray,function(item,index){          /*以下直接给配置项赋值*/          oneOption.series[0].data[0].value = dataArray[index][0];          /*以下经计算后给配置项赋值*/          var value = dataArray[index][0];          var lastValue= (100 - value) * 266 / 360;          oneOption.series[2].data[0].value = lastValue;          oneOption.series[2].data[1].value = 100 - lastValue;          /*以下给配置项添加外来图片*/          oneOption.graphic = [{}];          /*更新实例的图表*/          item.setOption(oneOption);      });}```![图片描述](attimg://article/content/picture/201811/09/151111ni2oqqh9myp212pm.png)五、setOption的参数myChart.setOption(option, notMerge, lazyUpdate);1、option：图表的配置项和数据。2、notMerge：不跟之前的option合并，默认为false，即合并。3、lazyUpdate：不立即更新图表，默认为false，即立即更新。3、silent：阻止抛出事件，默认为false，即抛出事件。六、在myChart.setOption(option, notMerge, lazyUpdate)中，option的主要构成：1、title：标题2、legend：图例。它的下一级data与series的下某级name相关联3、grid：网格4、xAxis：x轴5、yAxis：y轴6、dataZoom：区域缩放7、tooltip：提示框8、toolbox：工具栏9、timeline：在多个option 间进行切换10、graphic：原生图形11、series：系列列表。series是数组，下一级是对象，（1）在bar和line中，对象里面的name与legend里面的data数组的某1项一样，对象里面的data数组有多个值，只用一种颜色，legend表现简单（2）在pie中，对象里面的data数组里的name与legend里面的data数组的某1项一样，对象里面的data数组有多个值，每个值用一种颜色，legend表现复杂。12、color：调色盘颜色列表13、textStyle：全局的字体样式14、animation：是否开启动画