79、ECharts：基礎知識與問題解決

注意：Echarts圖例的說明文字左側左對齊，右側右對齊。
legend: {
  itemWidth: 12,
  itemHeight: 12,
  orient: 'vertical',
  width: 80,
  right: 20,
  formatter: function (name) {
    var value = 0;
    var emptyString = '';//圖例說明文字左側部分的字數不相等，就用它來填充至相等，它由一個到多個的'\u3000'和(或有或無的)一個'\u0020'組成。
    return name + emptyString + '\u3000' + '\u0020' + value;//前者漢字空格，可以重復使用，后者相反
  },
  data: deviceTypeText
},
              
一、Echarts動態圖實現思路
1、這樣寫會報錯：`setOption` should not be called during main process.
```javascript
var option={title:myTitle};/*原始配置*/
clearInterval(timeTicket);
var timeTicket = setInterval(function (){
    /*此處向后台發送請求並獲取返回值*/
    myTitle =result[0];
    myChart.setOption(option);
},500);
```
2、這樣寫不會報錯
```javascript
var option={};/*原始配置*/
clearInterval(timeTicket);
var timeTicket = setInterval(function (){
    /*此處向后台發送請求並獲取返回值*/
    option.series[0].data[0].value =result[0];
    myChart.setOption(option);
},500);
```
3、這樣寫不會報錯
```javascript
clearInterval(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：是否開啟動畫