echarts 可视化表格参数配置

桃扇骨 2023-01-06 05:47 261阅读 0赞

以下是我在使用 Echarts 表格对不同配置信息的使用，对我使用过的做一个总结：

let option ={ 
    	// 默认色板
        color：['#ff7f50','#87cefa','#da70d6','#32cd32','#6495ed','#ff69b4','#ba55d3','#cd5c5c','#ffa500','#40e0d0','#1e90ff','#ff6347','#7b68ee','#00fa9a','#ffd700','#6699FF','#ff6666','#3cb371','#b8860b','#30e0e0'],
        // 标题
    	title:{ 
    		show:true, //是否显示
    		text: '表格名称', // 主标题、'\n'指定换行 
    		link:'', //主标题文本超链接,默认值true 
    		target: null, //指定窗口打开主标题超链接，支持'self' | 'blank'，不指定等同为'blank'（新窗口）
    		subtext: '副标题', //副标题文本，'\n'指定换行 
            sublink: '', //副标题文本超链接 
            subtarget: null, //指定窗口打开副标题超链接，支持'self' | 'blank'，不指定等同为'blank'（新窗口） 
    		x: 'left', // 水平位置(左中右)
    		y: 'top', // 垂直位置（上中下）
    		textAlign: null ,//水平对齐方式，默认根据x设置自动调整，可选为： left' | 'right' | 'center 
            backgroundColor: 'rgba(0,0,0,0)', //标题背景颜色，默认'rgba(0,0,0,0)'透明 
            borderColor: '#ccc', //标题边框颜色,默认'#ccc' 
            borderWidth: 0, //标题边框线宽，单位px，默认为0（无边框） 
    		padding: 5, // 边距（px）
    		itemGap: 10, // 主副标题纵向间隔，单位px，默认为10
    		textStyle:{  // 主标题样式
    			fontFamily: 'Arial, Verdana, sans...', 
                fontSize: 12, 
                fontStyle: 'normal', 
                fontWeight: 'normal', 
    		},
    		subtextStyle：{  // 副标题样式
    			fontFamily: 'Arial, Verdana, sans...', 
                fontSize: 12, 
                fontStyle: 'normal', 
                fontWeight: 'normal',
    		},
    		 zlevel: 0, //一级层叠控制。
    		 z: 6, //二级层叠控制，默认6,同一个canvas（相同zlevel）上z越高约靠顶层。
    	},
    	//图例属性
    	legend:{ 
    		show: 'true', // 图例是否展示
    		zlevel:0, //所属图形的Canvas分层，zlevel 大的 Canvas 会放在 zlevel 小的 Canvas 的上面
       		z:2, //所属组件的z分层，z值小的图形会被z值大的图形覆盖
        	left:"center", //组件离容器左侧的距离,'left', 'center', 'right','20%'
        	top:"top", //组件离容器上侧的距离,'top', 'middle', 'bottom','20%'
        	right:"auto", //组件离容器右侧的距离,'20%'
        	bottom:"auto", //组件离容器下侧的距离,'20%'
        	width:"auto",  //图例宽度
        	height:"auto",  //图例高度
    		orient: 'horizontal', // 图例排列方向 （'horizontal','vertical'）
    		align:"auto", //图例标记和文本的对齐,left,right
    		x: 'left', // 水平位置(左中右)
    		y: 'top', // 垂直位置（上中下）
    		padding: 5, // 边距（px）
    		itemGap: 10, // 各个item之间的间隔，单位px，默认为10，
    		itemWidth: 20, // 图例图形宽度
    		itemHeight: 14, // 图例图形高度
    		formatter:function (name) {  //用来格式化图例文本，支持字符串模板和回调函数两种形式。模板变量为图例名称 {name}
    	        return 'Legend ' + name;
    	    },
    	    selectedMode:"single",  //图例选择的模式,true开启,false关闭,single单选,multiple多选
    	    inactiveColor:"#ccc", //图例关闭时的颜色
    		textStyle: {  //字体样式
    			color: '#333'
    		},
    		type: 'scroll', // 图例展示类型
    		data: [], // 图例数据
    		backgroundColor:"transparent", //标题背景色
    	    borderColor:"#ccc", //边框颜色
    	    borderWidth:0, //边框线宽
    	    shadowColor:"red", //阴影颜色
    	    shadowOffsetX:0, //阴影水平方向上的偏移距离
    	    shadowOffsetY:0, //阴影垂直方向上的偏移距离
    	    shadowBlur:10, //阴影的模糊大小
    	},
    	// 提示框
    	tooltip：{ 
    		trigger：'item', // 触发类型（’item‘ 'axis'）
    		showDelay: 20, // 显示延迟，添加显示延迟可以避免频繁切换，单位ms
    		hideDelay: 100, // 隐藏延迟，单位ms
    		transitionDuration : 0.4, // 动画变换时间，单位s
    		backgroundColor: 'rgba(0,0,0,0.7)', // 背景颜色
    		borderColor: '#333', // 边框颜色
    		borderRadius: 4, // 边框圆角，单位px
    		borderWidth: 0, // 边框线宽，单位px
    		padding: 5, // 内边距，单位px
    		textStyle: {  //字体样式
    			color: '#fff'
    		},
    		axisPointer : {  // 坐标轴指示器，坐标轴（axis）触发有效
    			type : 'line', // 默认为直线（'line' 'shadow'）
    			lineStyle : {  // 直线指示器样式设置
    				width: 2,
    				type: 'solid'
    			},
    			shadowStyle:{  //阴影指示器样式设置
    				width: 'auto', // 阴影大小
    				color: '#ccc' // 阴影颜色
    			},
    		},
    		formatter: function(params){  //自定义提示内容
    			return `${ params.name}</br>${ params.value}`
    		}
    	},
    	// 区域缩放控制器
    	dataZoom:{ 
    		show:true,  //是否显示 组件。
    		id: 'dataZoomX', //组件 ID。默认不指定。
    		type:'slider', //slider表示有滑动块的，inside表示内置的
    		orient: 'horizontal', // 布局方式('horizontal' 'vertical')
    		xAxisIndex:0, //设置 dataZoom-inside 组件控制的 x轴,可以用数组表示多个轴
            yAxisIndex:[0,2], //设置 dataZoom-inside 组件控制的 y轴,可以用数组表示多个轴
            zoomLock:false, //是否锁定选择区域
    		x: 10, // 水平安放位置（px）
    		y: 10, // 垂直安放位置（px）
    		width: 10, // 指定宽度（px）
    		height: 10, // 指定高度（px）
    		backgroundColor: 'rgba(0,0,0,0)', // 背景颜色
    		dataBackgroundColor: '#eee', // 数据背景颜色
    		fillerColor: 'rgba(144,197,237,0.2)', // 填充颜色
    		handleColor: 'rgba(70,130,180,0.8)' // 手柄颜色
    	},
    	// 网格
    	grid: { 
    		x: 80, 
    		y: 60,
    		x2: 80,
    		y2: 60,
    		show: true, // 是否显示，默认false
    		containLabel:true, // grid 区域是否包含坐标轴的刻度标签
    		width: { totalWidth} - x - x2,
    		height: { totalHeight} - y - y2,
    		backgroundColor: 'rgba(0,0,0,0)',
    		borderWidth: 1,
    		borderColor: '#ccc'
    	},
    	//x轴属性
    	xAxis：{ 
    	 	name: 'name', // X轴名称
    	 	nameLocation：'end', //坐标轴名称显示位置（'start' 'middle' 'end'）
    		type: "category", // 类型（'category' 'time'）
    		inverse:false, // 是否是反向坐标轴
    	    data: [], // 数据
    	    min：function(value){  // 最小刻度，可以用一个函数动态填写
    			return value.min - 10
    		},
    		max: 10, // 最大刻度
    		position：'bottom', // 位置（'top' 'bottom'）
    		offset:0, // 偏移，在相同的 position 上有多个 X 轴的时候有用
    		splitLine：false, // 分割线
    		axisTick：{  //坐标轴刻度相关设置
    			show:true, // 是否显示
    			alignWithLabel:false, // 类目轴中在 boundaryGap 为 true 的时候有效，可以保证刻度线和标签对齐
    			inside:false, // 坐标轴刻度是否朝内
    			length:5 // 坐标轴刻度的长度
    		},
            splitArea: {  //区分阴影
                show: true,
                areaStyle: { 
                    color: ['rgba(255,255,255,0.5)','rgba(200,200,200,0.5)']
                }
            }
    	},
    	//y轴属性
    	yAxis：{  // 跟xAxis差不多
    		scale:true, // y轴自适应
    		type：'value', // 类型('value' 'category' 'time' 'log')
    		show: true, // 是否显示 Y轴
    	    name: '降雨量(mm)', // 坐标轴名称
    	    nameLocation: 'end', // 坐标轴名称显示位置。('start''middle''center''end')
    	    nameTextStyle: { ...}, // 坐标轴名称的文字样式。
    	    nameGap: 15, // 坐标轴名称与轴线之间的距离。
    	    splitNumber: 5 , // 坐标轴的分割段数
    	    silent: false , // 坐标轴是否是静态无法交互。
    	    position: "left", // 默认 grid 中的第一个 y 轴在 grid 的左侧（'left'），第二个 y 轴视第一个 y 轴的位置放在另一侧。
    	    offset: 0, // Y 轴相对于默认位置的偏移，在相同的 position 上有多个 Y 轴的时候有用。
    	    max: 5, // 设置最大值，不设置会自动计算
    	    min: 0,
    	    axisLine: {  // 坐标轴刻度相关设置。
    	      show: true ,
    	      inside: false , // 坐标轴刻度是否朝内，默认朝外。
    	      length: 5 , // 坐标轴刻度的长度。
    	      lineStyle: {  // 刻度线的样式设置。
    	        color: "#ccc", // 刻度线的颜色，默认取 axisTick.lineStyle.color。
    	        width: 1 ,
    	        type: 'solid' , // (实线：'solid'，虚线：'dashed'，星罗棋布的：'dotted')
    	        shadowColor: 'rgba(0, 0, 0, 0.5)',
    	        shadowBlur: 10,
    	        shadowOffsetX: 0 ,
    	        shadowOffsetY: 0 ,
    	        opacity: 1
    	      } ,
    	    } , // 坐标轴轴线相关设置。
    	    axisTick: { 
    	      	show:true, // 是否显示
    			alignWithLabel:false, // 类目轴中在 boundaryGap 为 true 的时候有效，可以保证刻度线和标签对齐
    			inside:false, // 坐标轴刻度是否朝内
    			length:5 // 坐标轴刻度的长度
    	    } ,
    	    axisLabel: {  // 坐标轴刻度标签的相关设置。
    	      show: true ,
    	      interval: 'auto',
    	      inside: false,
    	      margin: 8,
    	      fontStyle: 'normal',
    	      fontWeight: normal,
    	      fontSize: 1 ,
    	      backgroundColor: 'transparent',
    	      borderColor: 'transparent',
    	      borderWidth: 0,
    	      borderRadius: 0,
    	      padding: 0 
    	    } ,
    	    splitLine: {   // 坐标轴在 grid 区域中的分隔线。
    	      show: true,
    	      interval: 'auto' 
    	    } 
    	  }
    	series:[{ 
    		barWidth:26,// 柱形宽度（折线图无）
          	name: '',// legend对应的名称
          	type: 'bar',// 图形类型
          	stack: 'TUE',// 若多个值一样，则堆叠到一起
          	data: [1,1,1,11],// 数值
          	smooth: true, // 线条平滑展示，折线图起作用
          	areaStyle: { },// 面积填充,折线图有效
          	emphasis: { // 高亮
              label: { 
                  show: true,
                  position:'inner',// 文字展示在图形上
                  textStyle: { 
                      color: '#333333',
                      fontWeight: 'bold'
                  }
              }
          }
    	}]
    }

想了解更多详细的配置信息可以去 [Echarts 官网][Echarts]

[Echarts]: https://echarts.apache.org/zh/option.html#title