echarts option根据条件切换的问题

Veröffentlicht am | in . . |

最近在做一个echarts缩放的需求，加了dataZoom，由于老版本显示不出缩放按钮，只好选择新版本，结果新的问题出现了：原本365度无死角多条件切换的echart出现了数据叠加的问题，这样的页面有两个，以其中一个为例：

先上一段代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
  function reloadEcharts(){
		var myChart = echarts.init(document.getElementById('chart'));
		var option;
		
		if(indexFlat==1){
			$('#showTooltip').show();
			//选择“每月”按钮时
				option = {

			    tooltip : {
			        trigger: 'axis'
			    },
			     color:['#f2d24c','#ff897a','#5695f4'],
			    legend: {
			        data:['新增','存量','合计']
			    },
			    toolbox: {//展示：刷新、下载、转换图标、展示数据表功能（这里已被隐藏）
			        show : false,
			        feature : {
			            dataView : {show: true, readOnly: false},
			            magicType : {show: true, type: ['line', 'bar']},
			            restore : {show: true},
			            saveAsImage : {show: true}
			        }
			    },
			    grid:{
			        	x:80,
			        	y:30,
			        	x2:20,
			        
			        	borderWidth:1
			        },
			    calculable : true,
			    xAxis : [
			        {
			            type : 'category',
			            data : dateHistogram,
			            splitLine:{  
			                        　　　　show:false ,
			                        　　 }  
			        }
			    ],
			    yAxis : [
			        {
			            type : 'value'
			        }
			    ],
			    dataZoom: [{
                    type: 'inside',
                    start: 0,
                    end: 10
                }, {
                    start: 0,
                    end: 10,
                    handleIcon: 'M10.7,11.9v-1.3H9.3v1.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4v1.3h1.3v-1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z',
                    handleSize: '80%',
                    handleStyle: {
                        color: '#fff',
                        shadowBlur: 3,
                        shadowColor: 'rgba(0, 0, 0, 0.6)',
                        shadowOffsetX: 2,
                        shadowOffsetY: 2
                    }
                }],
			    series : [
			        {
			            name:'新增',
			            type:'bar',
			            data:typeDataAdd  									    	

			        },
			        {
			            name:'存量',
			            type:'bar',
			            data: typeDataScokt
			        },
			        {
			            name:'合计',
			            type:'bar',
			            data:typeDataAll
			        }
			    ]
			};
		}else{//点击“累计”按钮时
			$('#showTooltip').hide();
			option = {
			tooltip : {
				trigger: 'axis',
				show:true,  
				showDelay: 0,  
				hideDelay: 0,  
				transitionDuration:0,   
				backgroundColor : 'rgba(238,242,241,0.8)',  
				borderColor : '#e0e0e0',  
				borderRadius : 2,  
				borderWidth: 1, 
				fontColor:'#222',
         padding: 0,    // [5, 10, 15, 20]
         textStyle:{
         	color:'#222'
         },  
         formatter: function (params,ticket,callback) {  
         	var oDate = new Date();
         	var oM ;
            if(dateCount == 1){//本月时间
            	oM = oDate.getMonth()+1;
            }else if(dateCount ==2 ){
            	oM = oDate.getMonth();//时间为上个月的时候
            }else{
            	oM = oDate.getMonth()+1;//默认为当月时间内
            }
            if(oM<10){
            	oM='0'+oM;
            }
//                var time = oDate.getFullYear()+'-'+oM+'-'+params[0].name;
			if(typeCount==7){
				 var time =params[0].name;
	             var res = '<div style="padding:0;" ><p class="tooltipT" >'+time+'<span style="margin-left:10px;">'+typeName+'</span></p><p style="padding:6px 10px;"><span class="bluePoint"></span>' +params[0].value+'%</p></div>';
	             return res;  
			}else{
				 var time =params[0].name;
	             var res = '<div style="padding:0;" ><p class="tooltipT" >'+time+'<span style="margin-left:10px;">'+typeName+'</span></p><p style="padding:6px 10px;"><span class="bluePoint"></span>' +params[0].value+'</p></div>';
	             return res;  
			}
           
        }   
    },
        grid:{
        	x:80,
        	y:10,
        	x2:20,
        	
        	borderWidth:1
        },
        toolbox: {
        	show : true,
	},
	    calculable : true,
	    xAxis : [
	    {
	    	type : 'category',
	    	boundaryGap : false,
	    	data :dateHistogram,
	    	splitLine:{
	    		　　　　show:false
	    	　　}
	    }
	    ],
	    yAxis : [
	    {
	    	type : 'value',
	    }
	    ],
	    dataZoom: [{
            type: 'inside',
            start: 0,
            end: 10
        }, {
            start: 0,
            end: 10,
            handleIcon: 'M10.7,11.9v-1.3H9.3v1.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4v1.3h1.3v-1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z',
            handleSize: '80%',
            handleStyle: {
                color: '#fff',
                shadowBlur: 3,
                shadowColor: 'rgba(0, 0, 0, 0.6)',
                shadowOffsetX: 2,
                shadowOffsetY: 2
            }
        }],
	    series : [
	    {
	    	type:'line',
	    	symbol:'circle',
	    	itemStyle: {
	    		normal: {
	    			areaStyle: {
	    				type: 'default',
	    				color:'#fff'
	    			}
	    			,color:'#5695f4'
	    		}
	    	},
	    	data:typeData
	    }  
	    ]
	};
}

myChart.setOption(option);
}

逻辑就是当点击不同按钮的时候切换不同的option进行渲染echarts

正常状态

一开始点击“月度数据”按钮出现的正常的图表

再点击“累计数据”按钮出现了这样的图表

这还是大明湖畔那个容嬷嬷吗？！不对，是累计数据图表吗？

图表上明显是两组数据同时渲染在了图表上，页面上也没有任何报错（另一个页面有一个 Uncaught TypeError: Cannot use ‘in’ operator to search for ‘_ec_inner’ in undefined 的报错），查了一下报错的地方是可能是数据格式有问题，大意是如果echarts所填数据类型不是js所识别的就需要做parse(json)处理，作为对照组当前页面并没有这样的报错，但是仍出现数据切换叠加的问题，也就是说数据叠加可能跟这个报错没有任何关系，但是本着格物致知的精神，我还是把所有填数据的地方打了一遍：数据格式全部都是数组！果然没有关系！

莫非是option没有清空造成的？于是在函数中我又加了一句：option = {};

function reloadEcharts(){
        var myChart = echarts.init(document.getElementById('chart'));
        var option = {};
........

心想这样肯定就好了，然而并没有。。。

不死心，又在if（）else()里加如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
function reloadEcharts(){
	var myChart = echarts.init(document.getElementById('chart'));
	var option;
	
	if(indexFlat==1){
		option = {};
		$('#showTooltip').show();
		//选择“每月”按钮时
			option = {
			tooltip : {
		        trigger: 'axis'
		    },......
		}else{
			option = {};
			....
		}

依然是不管用。。。。

在else里面加了alert也弹了，数据也展示了，option也首先被清空了为什么还是这样，哭五分钟继续想···

出于手贱，把else部分的内容全部清空了，上代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89

function reloadEcharts(){
		var myChart = echarts.init(document.getElementById('chart'));
		var option;
		
		if(indexFlat==1){
			$('#showTooltip').show();
			//选择“每月”按钮时
				option = {

			    tooltip : {
			        trigger: 'axis'
			    },
			     color:['#f2d24c','#ff897a','#5695f4'],
			    legend: {
			        data:['新增','存量','合计']
			    },
			    toolbox: {//展示：刷新、下载、转换图标、展示数据表功能（这里已被隐藏）
			        show : false,
			        feature : {
			            dataView : {show: true, readOnly: false},
			            magicType : {show: true, type: ['line', 'bar']},
			            restore : {show: true},
			            saveAsImage : {show: true}
			        }
			    },
			    grid:{
			        	x:80,
			        	y:30,
			        	x2:20,
			        
			        	borderWidth:1
			        },
			    calculable : true,
			    xAxis : [
			        {
			            type : 'category',
			            data : dateHistogram,
			            splitLine:{  
			                        　　　　show:false ,
			                        　　 }  
			        }
			    ],
			    yAxis : [
			        {
			            type : 'value'
			        }
			    ],
			    dataZoom: [{
                    type: 'inside',
                    start: 0,
                    end: 10
                }, {
                    start: 0,
                    end: 10,
                    handleIcon: 'M10.7,11.9v-1.3H9.3v1.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4v1.3h1.3v-1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z',
                    handleSize: '80%',
                    handleStyle: {
                        color: '#fff',
                        shadowBlur: 3,
                        shadowColor: 'rgba(0, 0, 0, 0.6)',
                        shadowOffsetX: 2,
                        shadowOffsetY: 2
                    }
                }],
			    series : [
			        {
			            name:'新增',
			            type:'bar',
			            data:typeDataAdd  									    	

			        },
			        {
			            name:'存量',
			            type:'bar',
			            data: typeDataScokt
			        },
			        {
			            name:'合计',
			            type:'bar',
			            data:typeDataAll
			        }
			    ]
			};
		}


myChart.setOption(option);
}

心想这次再点击累计数据应该是没有图表了，然而并没有,不管点击“月度数据”还是“累计数据”都显示月度数据下的图表，也就是说即使清掉了option，原有的数据依旧被保存下来了，是缓存的问题！后来从网上找到了clear()的方法（写法是：myChart.clear();），问题总算解决。

完整代码是：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
function reloadEcharts(){
		var myChart = echarts.init(document.getElementById('chart'));
		var option;
		myChart.clear();
		if(indexFlat==1){
			$('#showTooltip').show();
			//选择“每月”按钮时
				option = {

			    tooltip : {
			        trigger: 'axis'
			    },
			     color:['#f2d24c','#ff897a','#5695f4'],
			    legend: {
			        data:['新增','存量','合计']
			    },
			    toolbox: {//展示：刷新、下载、转换图标、展示数据表功能（这里已被隐藏）
			        show : false,
			        feature : {
			            dataView : {show: true, readOnly: false},
			            magicType : {show: true, type: ['line', 'bar']},
			            restore : {show: true},
			            saveAsImage : {show: true}
			        }
			    },
			    grid:{
			        	x:80,
			        	y:30,
			        	x2:20,
			        
			        	borderWidth:1
			        },
			    calculable : true,
			    xAxis : [
			        {
			            type : 'category',
			            data : dateHistogram,
			            splitLine:{  
			                        　　　　show:false ,
			                        　　 }  
			        }
			    ],
			    yAxis : [
			        {
			            type : 'value'
			        }
			    ],
			    dataZoom: [{
                    type: 'inside',
                    start: 0,
                    end: 10
                }, {
                    start: 0,
                    end: 10,
                    handleIcon: 'M10.7,11.9v-1.3H9.3v1.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4v1.3h1.3v-1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z',
                    handleSize: '80%',
                    handleStyle: {
                        color: '#fff',
                        shadowBlur: 3,
                        shadowColor: 'rgba(0, 0, 0, 0.6)',
                        shadowOffsetX: 2,
                        shadowOffsetY: 2
                    }
                }],
			    series : [
			        {
			            name:'新增',
			            type:'bar',
			            data:typeDataAdd  									    	

			        },
			        {
			            name:'存量',
			            type:'bar',
			            data: typeDataScokt
			        },
			        {
			            name:'合计',
			            type:'bar',
			            data:typeDataAll
			        }
			    ]
			};
		}else{//点击“累计”按钮时
			$('#showTooltip').hide();
			option = {
			tooltip : {
				trigger: 'axis',
				show:true,  
				showDelay: 0,  
				hideDelay: 0,  
				transitionDuration:0,   
				backgroundColor : 'rgba(238,242,241,0.8)',  
				borderColor : '#e0e0e0',  
				borderRadius : 2,  
				borderWidth: 1, 
				fontColor:'#222',
         padding: 0,    // [5, 10, 15, 20]
         textStyle:{
         	color:'#222'
         },  
         formatter: function (params,ticket,callback) {  
         	var oDate = new Date();
         	var oM ;
            if(dateCount == 1){//本月时间
            	oM = oDate.getMonth()+1;
            }else if(dateCount ==2 ){
            	oM = oDate.getMonth();//时间为上个月的时候
            }else{
            	oM = oDate.getMonth()+1;//默认为当月时间内
            }
            if(oM<10){
            	oM='0'+oM;
            }
//                var time = oDate.getFullYear()+'-'+oM+'-'+params[0].name;
			if(typeCount==7){
				 var time =params[0].name;
	             var res = '<div style="padding:0;" ><p class="tooltipT" >'+time+'<span style="margin-left:10px;">'+typeName+'</span></p><p style="padding:6px 10px;"><span class="bluePoint"></span>' +params[0].value+'%</p></div>';
	             return res;  
			}else{
				 var time =params[0].name;
	             var res = '<div style="padding:0;" ><p class="tooltipT" >'+time+'<span style="margin-left:10px;">'+typeName+'</span></p><p style="padding:6px 10px;"><span class="bluePoint"></span>' +params[0].value+'</p></div>';
	             return res;  
			}
           
        }   
    },
        grid:{
        	x:80,
        	y:10,
        	x2:20,
        	
        	borderWidth:1
        },
        toolbox: {
        	show : true,
	},
	    calculable : true,
	    xAxis : [
	    {
	    	type : 'category',
	    	boundaryGap : false,
	    	data :dateHistogram,
	    	splitLine:{
	    		　　　　show:false
	    	　　}
	    }
	    ],
	    yAxis : [
	    {
	    	type : 'value',
	    }
	    ],
	    dataZoom: [{
            type: 'inside',
            start: 0,
            end: 10
        }, {
            start: 0,
            end: 10,
            handleIcon: 'M10.7,11.9v-1.3H9.3v1.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4v1.3h1.3v-1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z',
            handleSize: '80%',
            handleStyle: {
                color: '#fff',
                shadowBlur: 3,
                shadowColor: 'rgba(0, 0, 0, 0.6)',
                shadowOffsetX: 2,
                shadowOffsetY: 2
            }
        }],
	    series : [
	    {
	    	type:'line',
	    	symbol:'circle',
	    	itemStyle: {
	    		normal: {
	    			areaStyle: {
	    				type: 'default',
	    				color:'#fff'
	    			}
	    			,color:'#5695f4'
	    		}
	    	},
	    	data:typeData
	    }  
	    ]
	};
}


myChart.setOption(option);
}

解决完问题，感觉整个世界都清爽了