echarts需求总结

1. 关于tooltipd 提示文字的使用.

单条提示

 tooltip: {                           
    trigger: "axis",//触发类型；轴触发，axis则鼠标hover到一条柱状图显示全部数据，item则鼠标hover到折线   点显示相应数据，       
    axisPointer: { // 坐标轴指示器配置项。
    type: 'shadow', // 'line' 直线指示器 'shadow' 阴影指示器 'none' 无指示器 'cross' 十字准星指示器。
    axis: 'auto', // 指示器的坐标轴。 
    snap: true, // 坐标轴指示器是否自动吸附到点上
    },                     
   backgroundColor: "#fff",//背景                            
   borderWidth: "1", //边框宽度设置1 边框要记住写宽度
   borderColor:'rgba(204, 204, 204, 1)',//边框颜色     
   triggerOn: 'mouseover', // 触发时机  'mouseover'鼠标移动时触发。     'click'鼠标点击时触发。  'mousemove|click'同时鼠标移动和点击时触发。  
   confine: false, // 是否将 tooltip 框限制在图表的区域内。                       
   textStyle: {  //字体样式设置
   color: "#000", 
  },                                                    },

多条提示

  tooltip: {                           
   trigger: "axis",                            
   backgroundColor: "#fff",                            
   borderWidth: "1", //边框宽度设置1                            
   borderColor:'rgba(204, 204, 204, 1)',                                 
   textStyle: {                                
   color: "#000",                                                          },                            
   formatter: "{a0}: {c0} <br/>{a1}: {c1} <br/>{a2}: {c2} <br/>{a3}: {c3} ",  //格式设置   
   // 折线/区域/柱状/条形/图: a（系列名称），b（类目值），c（数值）, d（无）  单条格式可直接写成 {a}:{c}                 },

若要实现下图原点前缀,直接在formatter标签内添加

 tooltip: { 
 trigger: "axis", 
 shadowStyle: {  //阴影
  width: 5,  
  color: "rgba(7,0,2,.2)", 
  }, 
  backgroundColor: "#fff",//背景
  borderWidth: "1", //边框宽度设置1 
  borderColor: "rgba(204, 204, 204, 1)", //边框颜色                           
 borderRadius: 4,                           
   textStyle: {  
  color: "#666", 
  fontSize: 16,   },
  formatter:  "<span style='background-color:#d6a2e8'></span>{a0}: {c0} <br/>
  <span style='background-color:#a2ead9'></span>{a1}: {c1} <br/>
  <span style='background-color:#b8c8dc'></span>{a2}: {c2} <br/>
  <span style=background-color:#b2c9eb'></span>{a3}: {c3} ",                        },

2. 关于y轴 坐标及y轴顶部文字的使用

yAxis: [                          
  {                              
    min: 0, //自定义初始值                            
    max: 120,//自定义终止值                            
    interval: 20, //间自定义隔
    name: "(笔)", //命名
   nameTextStyle: { //文字样式
   	padding: [0, 0, 2, -40], //内边距 可移动文字位置                                    
    fontSize: 16,  
    fontweight: "bold"                             
    },                                                       },                        ],

3.关于多条柱状图中间间隔问题使用

 yAxis: [                            
 {
 ~~~~~~~                                                         
  },                               
   barGap: "0%",  柱图间距
   //同类目的直接在     yAxis设置 barGap  
   //不同类的在自身设置                  

},    ],

4.X轴 Y轴网格线虚线实现

下面以x轴为例子讲解

 xAxis: {
 splitLine: { //网格线
   show: true, //显示 若不显示设置为false
   lineStyle: {
   type: "dotted",//虚线 solid实线
   color: "#ccc",
   },},
   .....
     }, },

5. x坐标轴文字样式

xAxis: {
		axisLabel: {
		interval: 0,//x轴坐标轴显示完
		rotate: -30, //旋转角度
		margin: 22, //外边距
		padding: [0, 0, 0, -15], //内边距
		show: true,
		textStyle: {
		color: "#fff",
		fontSize: 10,
		fontweight: "bold"
		}
	}
},

6. 去掉y轴刻度线（x轴同理）

yAxis: {
    axisTick: {
        show: false
    }
}

7.柱状图每条柱子显示不同颜色

series: [
						{
							data: [211.6, 995.9, 559.0, 5526.4, 4445.9, 2229.0, 9006.4],
							type: "bar",
							itemStyle: {
								normal: {
									color: function(params) {
										var colorList = [
											"#0080B0",
											"#0691C5",
											"#04B5DB",
											"#00D1F0",
											"#06DDFD",
											"#00FFFC",
											"#93FBFF"
										];
										return colorList[params.dataIndex];
									}
								}
							}
						}
					]

8.图表定位

grid: {
						x: 60,
						y: 39,
						x2:39,
						y2: 39
					},

9. x轴文字实现两端对齐

利用空格进行占位 骚操作

axisLabel: {
	formatter: function(value, index) {
    let seriesData = data[0].data;
    if (index === 0) {
          return `     ${value}`;
    } else if (index === seriesData.length - 1) {
          return `${value}      `;
    }
         return value;
    },
	}