echarts 各种调整样式

待我称王封你为后i 2022-03-27 03:48 275阅读 0赞

先开始 肯定是 调整整个图的宽度大小 那么 肯定就是 自适应 会根据整个外部div 大小去自适应

myChart.setOption(option, true);
        window.addEventListener('resize', function() {
    	myChart.resize(); 
    	  }
        );

## 折线图 ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzM3ODg1NjUx_size_16_color_FFFFFF_t_70]  
首先 线的宽度 颜色 调整

series : [ {
    				name : 'T1探头', 这条线的名称
    				type : 'line',
    				itemStyle: {
    					normal: {
    						lineStyle: {
    							width:5, //调整 线条的宽度  5已经很宽啦
                                color : 'red' //线条颜色
    						}
    						}
    					},	
    				data : [ 120, 132, 101, 134, 90, 230, 210 ] //数值 对应y轴的值
    			}

是否显示点呢 ？？  
![在这里插入图片描述][20190111212630893.png]

showSymbol : true //  true 为 显示点 依然是在series{}中 添加

点的宽度！  
![在这里插入图片描述][20190111212654363.png]  
好像有点大 哈…

symbolSize : 20 // 20 太大了

再来看下 图例 legend 样式修改

折线图默认图例样式  
![在这里插入图片描述][20190111212721644.png]  
可以修改为 柱状图 图例样式  
![在这里插入图片描述][20190111212732942.png]  
还有 图例 位置 图例字体的 颜色 还有对齐方式

legend : {
        data : [ {name : 'T1探头',icon:'rect'}, {name : 'T2探头'} ]
        top : '5%', //距上边距 还有属性为 距下边距 距左边距 距右边距
        orient: 'vertical'，//竖直对齐
        textStyle:{//图例文字的样式
    		 color:'white' 
    	     }
         }

再来看X轴Y轴 的一些设置 x轴 与y轴设置基本相同 这里只贴x轴  
![在这里插入图片描述][2019011121281374.png]  
![在这里插入图片描述][20190111212832736.png]

xAxis: [{
    			splitLine:{show: false},//x轴网格 是否显示
    			data: [],
    			
    			name: '时间',//x轴描述   x轴名称
    			axisLabel: {
    				show: true,
    				textStyle: {
    					color: 'white' //x轴data 的颜色
                                            fontSize:25 // 让字体变大
    				}
    			},
    			nameTextStyle: {
    				color: 'white' //x轴名称的 颜色
    			},
    			
    			axisLine: {
    				symbol: ['none', 'arrow'],//是否显示 箭头  
    				lineStyle: {
    					color: 'white',//x轴颜色 
    				}
    			}
    		}],

当鼠标移到某一段x轴时 想查看具体的数值 所对应x轴与y轴的一条线 比如：  
![在这里插入图片描述][20190111212905616.png]

tooltip : {
    				trigger : 'axis',
    				axisPointer : {
    					type : 'cross',
    					
    					label : {
    						backgroundColor : 'red' // 上图显示的颜色
    					}
    				}
    			},

x轴的固定 ： 如果遇到 负值时 那么 x轴 线 会显示在y轴0刻度 一条横线 axisLine : \{ onZero : false \}

转自 [https://blog.csdn.net/qq\_35906921/article/details/82867363][https_blog.csdn.net_qq_35906921_article_details_82867363]  
对吾有过帮助，故转于此；

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzM3ODg1NjUx_size_16_color_FFFFFF_t_70]: /images/20220327/61bc49b7c0e048ada2729ba7b993837d.png
[20190111212630893.png]: /images/20220327/ee489eff153444ca8dc518fdfb1410f4.png
[20190111212654363.png]: /images/20220327/62fb5da2010f4912bf8a590fda4c471f.png
[20190111212721644.png]: /images/20220327/ceda186686394b40a337db899f1fd1f2.png
[20190111212732942.png]: /images/20220327/d0937d01b79249009b9dc2295f83b43f.png
[2019011121281374.png]: /images/20220327/47962e687d6f40cd80cd975426f20f50.png
[20190111212832736.png]: /images/20220327/9fb8e649464a40d3ae1123ea01fd1a50.png
[20190111212905616.png]: /images/20220327/95fb5781820d48e3a0bcc1cd0a5ba917.png
[https_blog.csdn.net_qq_35906921_article_details_82867363]: https://blog.csdn.net/qq_35906921/article/details/82867363