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：是否开启动画