echarts笔记

01.标题居中

//option
title: {
    text: '测试',
    x:'center'/*居中设置*/
},

02.标题向右并换行内容

//option
title: {
    text: 'x:3164\ny:1455    q:0.5',
    x:'left',
    y:-10,
	textStyle:{
		fontSize:15
	}
},

03.图表标题向右对齐

//option
legend: {
    data: ['数量','人数'],
    x: 'right',/*向右对齐设置*/
    padding:[35,50,0,0],/*设置padding,向右再偏左一些*/
    selected:{
        '数量':false
    }/*默认隐藏掉一部分数据*/
},

04.X轴值较长时折行显示

//option
axisLabel:{
   show:true,
   interval:0,
   textStyle:{
    color:"rgba(219,225,2555,1)"	
   },
   formatter:function(params){
    var newParamaName="";
    var paramsNameNumber=params.length;
    var provideNumber=4;/*字符串为4时折行显示*/
    var rowNumber=Math.ceil(paramsNameNumber/provideNumber);
    if (paramsNameNumber>provideNumber){
	    for (var p = 0 ; p<rowNumber;p++){
		    var tempStr="";
		    var start=p*provideNumber;
		    var end = start+provideNumber;
		    if (p==rowNumber-1){
			    tempStr=params.substring(start,paramsNameNumber);
		    }else{
			    tempStr=params.substring(start,end)+"\n";
		    }
		    newParamaName+=tempStr;
	    }
    }else{
	    newParamaName=params;
    }
    return newParamaName;
   }
  },

05.x轴截取显示

//option
xAxis: {
    data: ['2022/08/19','2022/08/20','2022/08/21','2022/08/22','2022/08/23','2022/08/24','2022/08/25'],
    axisLabel:{
    	formatter:function(value){
    		return value.slice(5,10)
    	}
    }
}

06.单独修改图例的形状

//option.legend
data:[{name:'A数据'，icon：'rect'},'B数据','C数据']

07.X轴旋转值

//option.xAxis
axisLabel:{rotate:90}

08.向右添加Y轴

//option
yAxis: [
    {type:'value' },
    {type:'value'}
],

/*在数据栏加入,即可将此项数据加入第二Y轴*/
//option.series
yAxisIndex:1

09.绘图区域单一辅助线

//option
yAxis: [
    {type:'value' },
    {type:'value',splitLine:false}//可以隐藏辅助线
],

10.绘图区域柱形图置顶时，数字超出绘图区

//option
yAxis: [
    {type:'value' },
    {type:'value',
    splitLine:false,
    boundaryGap:['0','10%']}//如果置顶则缩小10%
],

11.绘图区域调整

//option
grid:{
	show:true,
	backgroundColor:'White',
	//backgroundColor: 'rgba(0,0,0,0)'如此可以设置透明背景
	x:60,
	x2:50,
	y2:30
}

12.调节柱形图宽度

//option.series
barWidth:20

13.柱形图添加外边框

//option.series
itemStyle: {
  borderWidth:1,
  borderColor:'black'
}

14.折线图宽度以及圆点设置

//option.series
symbolSize:8,/*折线图圆点大小*/

itemStyle:{
 	normal:{
		lineStyle:{
			width:1.5
			//type:'dashed'//添加此行为虚线
		}
 	}
 },
 symbol: 'circle'/*折线图圆点形状*/
 /*circle 圆，rect 矩形，roundRect 圆角矩形，
 triangle 三角形，diamond 菱形，pin 大头针，
 arrow 剪头，none 无
*/

15.点击事件

//script
myChart.on('click',function(params){
    if(params.seriesName!="时间" && params.seriesName!="人数")
    {
    	//跳转的连接
        window.location.assign("Page.html"+"?time="+params.name+"&test="+params.seriesName)

    }
    else if(params.seriesName=="时间")
    {
        window.location.assign("Page.html?time="+params.name)
    }
    else if(params.seriesName=="人数")
    {
        window.location.assign("Page.html?test="+params.name)
    }

});

//可以和绘图，点击事件包含入方法里，然后再调用这个方法 myChart.setOptuon(option);

16.背景渐变色

/*css*/
#main{
    border: 1px solid black;
    background: #E1FFFF;/*如果浏览器支持,则渐变,否则用原色*/
    background-image: linear-gradient(white,white,#81ffff);
}

17.添加平均线

//option.series
markLine: {
  data: [{ type: 'average', name: 'Avg',lineStyle:{color:'#00FF00',width:2,type:'solid'} }]
}

18.添加平均线+辅助线

//option.series
markLine: {
    data: [{ type: 'average', name: 'Avg',lineStyle:{color:'#00FF00',width:1,type:'solid'}} ,
    { type: 'median', name: '自定义',lineStyle:{color:'#ee6666',width:1,type:'dashed'},yAxis: 95 }],
    animation:false//取消动画
}

19.x,y轴,轴与字体颜色设置(全都将颜色设置为白色)

//option
xAxis: {
	data: ['测试','测试','测试'],
	axisLabel:{
		textStyle:{color:'#fff'}
	},
	axisLine:{
		lineStyle:{color:'#fff'}
	}
},
yAxis: [
	{
		type: 'value',
		axisLabel:{textStyle:{color:'#fff'}},
		axisLine:{lineStyle:{color:'#fff'}}
	}, 
	{type: 'value'}
]

20.取消界面动画

//option
animation:false

21.x轴点击事件

//option.title.xAxis
triggerEvent:true

myChart.setOption(option);
myChart.on('click', function (params) {
    if(params.componentType == "xAxis"){
        alert("单击了"+params.value+"x轴标签");
    }else{
        alert("单击了"+params.name+"柱状图");
    }
}); 

22.滑块联动

//将两张表同时假如滑块
dataZoom:[
{
type:'inside',
yAxisIndex:0,
filterMode:'none'
}
]

//图二添加滑块
dataZoom:[
{
type:'slider',
yAxisIndex:0,
filterMode:'none'
}，{
type:'inside',
yAxisIndex:0,
filterMode:'none'
}
]

//添加联动
myChart.Group='group1';
myChart2.Group='group1';
echarts.connect('group1');
echarts.connect([myChart,myChart2]);

23.默认隐藏标题即数据

//option.legend
selected:['xx':false]