echarts 各种调整样式

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

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

折线图

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

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

是否显示点呢？？
在这里插入图片描述

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

点的宽度！
在这里插入图片描述
好像有点大哈…

symbolSize : 20 // 20 太大了

再来看下图例 legend 样式修改

折线图默认图例样式
在这里插入图片描述
可以修改为柱状图图例样式

还有图例位置图例字体的颜色还有对齐方式

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

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


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轴的一条线比如：
在这里插入图片描述

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
对吾有过帮助，故转于此；

echarts 各种调整样式

折线图

猜你喜欢