注意: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));
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:是否开启动画