Echarts折线图之改变网线,X/Y轴的颜色,折线的颜色

Echarts折线图之改变网线,X/Y轴的颜色,折线的颜色

 <!-- echarts 未来一个星期的天气 --> 
   <div class="chart" id="lineChart"></div> 
 var echartsFn = function(time,data1,data2){
				var getOption = function(chartType) {
					var chartOption ={
						calculable: false,
						legend: {
							data: ['最高温', '最低温'],
							  textStyle:{//图例文字的样式
				                color:'#fff',
				                fontSize:12
				              }
						},
						grid: {
							x: 35,
							x2: 10,
							y: 30,
							y2: 25
						},
						toolbox: {
							show: false,
							feature: {
								mark: {
									show: true
								},
								dataView: {
									show: true,
									readOnly: false
								},
								magicType: {
									show: true,
									type: ['line']
								},
								restore: {
									show: true
								},
								saveAsImage: {
									show: true
								}
							}
						},
						calculable: false,
						xAxis: [{
							type: 'category',
							data: time,
							nameTextStyle: {
								color: '#0A0026'
							},
							axisLine:{  //x轴线
								show:true,
								lineStyle: {
									color: '#ffffff'
								}
							},
							splitLine: {  
								show:false,   //X网格线
								lineStyle:{   //x网格线
									color: '#ffffff'
								}
							}
						}],
						yAxis: [{
							type: 'value',
							splitArea: {
								show: false  //y网格区域颜色
							},
							splitLine: {
								show:false,     //y网格线
								lineStyle:{
									color: '#ffffff'
								}
							},
							nameTextStyle: {
								color: '#640A26'
							},
							axisLine: {
								show:true,
								lineStyle: {
									color:'#ffffff'  //Y轴颜色
								}
							}
							
						}],
						series: [{
							name: '最高温',
							type: chartType,
							symbol: 'circle',//折线点设置为实心点
							symbolSize: 2,   //折线点的大小
							data: data1,
							itemStyle : {  
								normal : {  
								color: ['#cccccc'], //圈圈的颜色 
								lineStyle: {
								    color: '#640A26',  //曲线的颜色
								width:1
									}
								} 
							}
						}, {
							name: '最低温',
							type: chartType,
							symbol: 'circle',//折线点设置为实心点
							symbolSize: 2,   //折线点的大小
							data: data2,
							itemStyle : {  
								normal : {  
								color:'#ffffff', //圈圈的颜色 
								lineStyle: {
								color:'#ffffff',  //曲线的颜色
								width:1
									}
								} 
							}
						},]
					};
					return chartOption;
				};
				var byId = function(id) {
					return document.getElementById(id);
				};
				var lineChart = echarts.init(byId('lineChart'));
				 lineChart.setOption(getOption('line'));
				
			
			};//echartsFn
		

另外,分享一个echarts教程,很详细,很有用;
https://www.w3cschool.cn/echarts_tutorial/echarts_tutorial-k7c12cly.html

猜你喜欢

转载自blog.csdn.net/weixin_42575028/article/details/88689316
今日推荐