Echarts中常用的参数总结以及参数自定义示例_echarts series参数(3)

最新推荐文章于 2024-06-20 20:33:37 发布

kOS0ym

最新推荐文章于 2024-06-20 20:33:37 发布

阅读量647

点赞数 8

分类专栏：程序员文章标签：大数据面试学习

本文链接：https://blog.csdn.net/kOS0ym/article/details/138664700

版权

程序员专栏收录该内容

184 篇文章 0 订阅

订阅专栏

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，涵盖了95%以上大数据知识点，真正体系化！

由于文件比较多，这里只是将部分目录截图出来，全套包含大厂面经、学习笔记、源码讲义、实战项目、大纲路线、讲解视频，并且后续会持续更新

需要这份系统化资料的朋友，可以戳这里获取

containLabel 为 false 的时候：
grid.left grid.right grid.top grid.bottom grid.width grid.height 决定的是由坐标轴形成的矩形的尺寸和位置。
containLabel 为 true 的时候：
grid.left grid.right grid.top grid.bottom grid.width grid.height 决定的是包括了坐标轴标签在内的所有内容所形成的矩形的位置。
这常用于『防止标签溢出』的场景，标签溢出指的是，标签长度动态变化时，可能会溢出容器或者覆盖其他组件

4.legend

legend：图例

data：图例的具体文字
textStyle：图例的文字
icon：图例的形状（包括：circle，rect ，roundRect，triangle，diamond，pin，arrow，none）

  legend: {
         data: ['xx', 'xx', 'xx', 'xx'],
         right: '33%',
         top: '10%',
         textStyle: {
                 fontSize: 12,
                 color: '#666'
        },
           icon: "circle",  
           itemWidth: 10,  // 设置宽度
           itemHeight: 10, // 设置高度
           itemGap: 40 // 设置间距
     },

5.xAxis

xAxis ：x轴设置

name：单位
splitLine：网格线
- show：false （去除网格线）
data：x轴坐标显示的数据，数组类型
axisLine：设置x轴的轴线
- show：true（设置显示）
- lineStyle：设置轴线的样式
  - color：颜色
  - width：宽度
  - type：线条类型

- axisLabel：设置x轴文字样式
  - textStyle：文字样式，对象类型
    - show：是否展示
    - fontSize：字体大小
    - color：文字颜色
  - formatter：自定义文字，后面跟一个函数，默认会一个参数，x坐标的值

	xAxis: {
		type: "value",
			// x轴的名字，可以理解成单位
			name: "单位(K)",
				nameTextStyle: {
			// x轴的名字的样式相关
			color: "#BFBFBF",
				nameLocation: "start",
                    },
		splitLine: {
			//去除网格线
			show: false,
                    },
		//去除网格区域，否则会有一片区域
		splitArea: { show: false },
		data: [0, 5000, 10000, 15000, 20000, 25000, 30000, 35000],
			axisLine: {
			// 把x轴从实线变成虚线
			show: true,
				lineStyle: {
				// 设置x轴线条样式的颜色
				color: "#BDBDBD",
					width: 1,
						type: "solid",
                        },
		},
		axisLabel: {
			formatter: function (value) {
				return value >= 5000 ? parseInt(value / 1000) + "K" : value;
			},
			scale: true, // 设置数据自动缩放
        }
	},

6.yAxis

yAxis：与x轴基本同理

7.series

series：图标系列，对象类型

type：line（图标类型为线性图标）
smooth：true（设置折线为光滑）
name：图标名称
areaStyle：图标区域的样式（本文中的图标设置的为渐进色）
data：图标的数据
markLine：基线
symbol：none（去掉基线的箭头）
lable：基线的文字设置
- position：基线文字位置（start,middle,end）
- show：是否显示基线文字
- formatter：基线文字内容
data：设置基线（Array类型）
- silent：鼠标悬停（true/false）
- lineStyle：基线线条设置，对象类型
  - type：solid（基线线条类型）
  - color：基线线条颜色
  - yAxis：y轴基线的值

 series: [
                    {
                        data: this.trendLineData.map(item => item.defenceScore),
                        type: 'line',
                        smooth: true,
                        name: "答辩评分",
                        areaStyle: {
                            normal: {
                                opacity: 0.3,
                                color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                    offset: 0,
                                    color: '#679CF6'
                                }, {
                                    offset: 1,
                                    color: '#fff'
                                }])
                            }
                        },
                        // 基线设置
                        markLine: {
                            symbol: "none",
                            data: [{
                                silent: false,             
                                lineStyle: {   
                                    type: "solid",
                                    color: "#E34949",
                                },
                                yAxis: 3.5       
                            },
                            {
                                silent: false,           
                                lineStyle: {               
                                    type: "solid",
                                    color: "#3BC9A9",
                                },
                                yAxis: 4  
                            }
                            ]
                        }
                    },
                ],

附：常见问题

1、自定义X轴文字（文字替换）

   axisLabel: {
        formatter: function (value) {
              return value >= 5000 ? parseInt(value / 1000) + "K" : value;
           },
     scale: true, // 设置数据自动缩放，要不然数据多的话就堆一块了
   }

2、自定义X轴文字（文字换行）

其中this.trendLineData为后端数据，其实就是将x轴的类目项文字可以动态换行

 		formatter: (value) => {
			if (this.trendLineData.length > 2) {
			    //拼接加\n返回的类目项 
				var ret = "";
				//每项显示文字个数 
				var maxLength = 12; 
				//X轴类目项的文字个数 
				var valLength = value.length;
				//类目项需要换行的行数 
				var rowN = Math.ceil(valLength / maxLength);
				if (rowN > 1) 
				{
					for (var i = 0; i < rowN; i++) {
					    //每次截取的字符串 
						var temp = ""; 
						//开始截取的位置 
						var start = i \* maxLength;
						//结束截取的位置 
						var end = start + maxLength; 
						//这里也可以加一个是否是最后一行的判断
						temp = value.substring(start, end) + "\n";
						//拼接最终的字符串 
						ret += temp; 
					}
					return ret;
				}
				else {
					return value;
				}
			} else {
				return value;
			}
		}

3、自定义tooltip

	tooltip: {
		    trigger: 'axis',
		    // 显示延迟，添加显示延迟可以避免频繁切换，单位ms
			showDelay: 200, 


![img](https://img-blog.csdnimg.cn/img_convert/54bd4fb5b2b3cd8d499c3a03cf71d8d6.png)
![img](https://img-blog.csdnimg.cn/img_convert/1e7ad8d38a2fd964a1753985ecf2b314.png)

**网上学习资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。**

**[需要这份系统化资料的朋友，可以戳这里获取](https://bbs.csdn.net/forums/4f45ff00ff254613a03fab5e56a57acb)**


**一个人可以走的很快，但一群人才能走的更远！不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！**

15322112777)]

**网上学习资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。**

**[需要这份系统化资料的朋友，可以戳这里获取](https://bbs.csdn.net/forums/4f45ff00ff254613a03fab5e56a57acb)**


**一个人可以走的很快，但一群人才能走的更远！不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！**

kOS0ym

关注

8
点赞
踩
15

收藏

觉得还不错? 一键收藏
0
评论
Echarts中常用的参数总结以及参数自定义示例_echarts series参数(3)

,scale: true, // 设置数据自动缩放，要不然数据多的话就堆一块了其中为后端数据，其实就是将x轴的类目项文字可以动态换行//拼接加\n返回的类目项//每项显示文字个数//X轴类目项的文字个数//类目项需要换行的行数i < rowN;i++) {//每次截取的字符串//开始截取的位置//结束截取的位置//这里也可以加一个是否是最后一行的判断//拼接最终的字符串return ret;
复制链接

扫一扫