js图表库 echart

官方文档：https://www.echartsjs.com/examples/

1 图例  legend

legend: {			//可以通过点击图例控制哪些系列不显示。
				// data: ["访问"],
				show: true,
				zlevel: 0,
				left: 200,
				top: 20,
				width: "auto",
				height: 'auto',			//图例组件的高度。默认自适应。
				orient: "horizontal",	//图例列表的布局朝向
				padding:  [5, 10],		//图例内边距
				itemGap: 10,			//图例每项之间的间隔
				itemWidth: 35,			//图例标记的图形宽度。
				itemHeight: 16,			//图例标记的图形高度
				formatter: function(name) { //用来格式化图例文本
					return "哈哈" + name;
				},
				selectedMode: true,		//控制是否可以通过点击图例改变系列的显示状态
				inactiveColor: "yellow",//图例关闭时的颜色。
				textStyle: {			//图例的公用文本样式
					color: "blue",
					fontStyle: "italic",
					fontWeight: "bold",
					fontSize: 20
				},
				tooltip: {				//文字很多的时候对文字做裁剪并且开启 tooltip
			        show: false
			    },
			    data: [{				//设置单独一项的样式
			    	name: "访问",
			    	icon: 'circle',
			    	textStyle: {
				        color: 'green'
				    }
			    }],
			    backgroundColor: 'rgb(128, 128, 128)',//图例背景色
			    borderColor: "black",
			    borderWidth: 2,
			    shadowBlur: 20,
			    shadowColor: "green",
			    shadowOffsetX: 10,
			    shadowOffsetY: 10
			} 

2 提示框  tooltip

tooltip: {
				show: true,				//是否显示提示框组件
				trigger: "item",		//触发类型,[ default: 'item' ]
				showContent: true,		//是否显示提示框浮层
				alwaysShowContent: false,//设置为 true 可以保证一直显示提示框内容。
				triggerOn: "mousemove|clic",//提示框触发的条件
				showDelay: 0,		//浮层显示的延迟
				hideDelay: 0,		//浮层隐藏的延迟
				enterable: true,	//鼠标是否可进入提示框浮层中，默认为false
				confine: false,		//是否将 tooltip 框限制在图表的区域内
				transitionDuration: 0,//提示框浮层的移动动画过渡时间
				position: [10, 10],	//提示框浮层位置，默认不设置时位置会跟随鼠标的位置。
				formatter: "{a} <br/>{b} : {c} ({d}%)",//提示框浮层内容格式器
				backgroundColor: "pink",//提示框浮层的背景颜色。
				borderColor: "black",
				borderWidth: 1,
				padding:  [5, 10],
				textStyle: {		//额外附加到浮层的 css 样式
					color: "red",
					fontStyle: "normal",
					fontWeight: "normal",
					fontSize: 15

				}
			}

3 标题    title

title: {
				text: "标题",
				left: "center",		//grid 组件离容器左侧的距离
				top: 20,
				show: true,			//grid 组件离容器上侧的距离。
				link: "http://www.baidu.com",
				target: "self",
				textStyle: {		//主标题文字的颜色。
					color: "red",
					fontStyle: "italic",
					fontWeight: "normal",
					fontSize: 30
				},
				subtext: "副标提",
				sublink: "http://echarts.baidu.com/demo.html#pie-custom",
				subtarget: "self",
				subtextStyle: {		//副标题文字的颜色。
					color: "blue",
					fontStyle: "italic",
					fontWeight: 100,
					fontSize: 10

				},
				padding: [10, 10],   // 设置上下的内边距为 5，左右的内边距为 10
				itemGap: 0,			// 主副标题之间的间距。
				zlevel: 5,			//zlevel用于 Canvas 分层
				backgroundColor: 'rgb(128, 128, 128)',	//标题背景色，默认透明
				borderColor: "yellow",	//标题的边框颜色
				borderWidth: 1,			//标题的边框线宽。
				shadowBlur: 30,			//图形阴影的模糊大小
				shadowColor: "blue",	//阴影颜色
				shadowOffsetX: 10,		//阴影水平方向上的偏移距离。
				shadowOffsetY: 10		//阴影垂直方向上的偏移距离。		
			}

4 背景色  backgroundColor

backgroundColor: "rgba(128, 128, 128, 0.5)",

5 颜色顺序   color

color：['#c23531','#2f4554', '#61a0a8', '#d48265', '#91c7ae','#749f83',  '#ca8622', '#bda29a','#6e7074', '#546570', '#c4ccd3']