折线图中的数据再生成一个表格，和图表进行联动ECharts Gallery

20:11:45图表已生成
代码
option = {
		title: {
			show: true,	//标题是否显示，默认显示true
			text: '折线图堆叠',	//标题内容
			link: 'http://m.fangjialiang.com',	//标题链接
			target: 'self',	//当前窗口打开，默认为新窗口打开 'blank'
			textStyle:{		//设置主标题样式
				color:'#f00',	//主标题文字的颜色。
				fontStyle: 'normal',	//主标题文字字体风格三种可选方式'normal'、'italic'、'oblique'
			},
			textAlign: 'left',		//标题文本对齐方式
			textBaseline: 'top',		//标题文本垂直对齐方式
			subtext : '我是副标题',			//副标题文本
			sublink	: 'http:m.fangjialiang.com',	 //副标题链接地址
			subtarget: 'blank',	//副标题链接打开方式，同主标题
			padding	: 5,		//设置上下左右内边距为5，[ 5 , 10 ]则为上下边距5，左右10，[5,6,7,8]则表示上右下左边距
			itemGap	: 10,		//主副标题之间的间距
			left	: 'left',	//grid组件距离容器左侧的距离，left 的值可以是像 20 这样的具体像素值，可以是像 '20%' 这样相对于容器高宽的百分比，也可以是 'left', 'center', 'right'。如果 left 的值为'left', 'center', 'right'，组件会根据相应的位置自动对齐。
			backgroundColor : 'transparent'	,//标题背景色，默认透明颜色可以使用 RGB 表示，比如 'rgb(128, 128, 128)' ，如果想要加上 alpha 通道，可以使用 RGBA，比如 'rgba(128, 128, 128, 0.5)'，也可以使用十六进制格式，比如 '#ccc'
			borderColor		: '#ccc',	//标题的边框颜色。支持的颜色格式同 backgroundColor。
			borderWidth		: 0 ,	//标题的边框线宽。
			shadowBlur		:{
				shadowColor: 'rgba(0, 0, 0, 0.5)',	//阴影颜色。支持的格式同color。此配置项生效的前提是，设置了 show: true。
    			shadowBlur: 10,	//图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。此配置项生效的前提是，设置了 show: true。
    			shadowOffsetX: 0,	//阴影水平方向上的偏移距离。此配置项生效的前提是，设置了 show: true。
    			shadowOffsetY:0	//阴影垂直方向上的偏移距离。此配置项生效的前提是，设置了 show: true。
			}
		},
		tooltip: {//提示框组件。
			trigger: 'axis',//触发类型。
			show	: true
			
			
		},
		legend: {	//图例组件，图例组件展现了不同系列的标记(symbol)，颜色和名字。可以通过点击图例控制哪些系列不显示。
			show : true,	//是否展示
			orient	:	'horizontal',	//图例列表的布局朝向。可选：'horizontal'、'vertical'
			align:	'auto',	//图例标记和文本的对齐。默认自动，根据组件的位置和 orient 决定，当组件的 left 值为 'right' 以及纵向布局（orient 为 'vertical'）的时候为右对齐，及为 'right'。
			padding : 10,
			itemGap	: 10,
			itemHeight: 14,	//图例标记的图形高度。
			formatter	:' --{name}',//用来格式化图例文本，支持字符串模板和回调函数两种形式。
			// 使用字符串模板，模板变量为图例名称 {name}
			//formatter: 'Legend {name}'
			// 使用回调函数
			//formatter: function (name) {
			//    return 'Legend ' + name;
			//}
			selectedMode: true,//图例选择的模式，控制是否可以通过点击图例改变系列的显示状态。默认开启图例选择，可以设成 false 关闭。除此之外也可以设成 'single' 或者 'multiple' 使用单选或者多选模式。
			inactiveColor:'#ccc',//图例关闭时的颜色。
//			selected	:{	//设置图例哪些为选中状态
//				 // 选中'邮件营销'
//			    '邮件营销': true,
//			    // 不选中'视频广告'
//			    '视频广告': false
//			},
			
			data : ['总退保金给付（低）', '总退保金给付（中）', '总退保金给付（高）', '累计保费']
		},
		grid: {
			left: '3%',
			right: '4%',
			bottom: '3%',
			containLabel: true
		},
		toolbox: {
			feature: {
				saveAsImage: {}
			}
		},
		xAxis: {
			type: 'category',
			boundaryGap: false,
			data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
		},
		yAxis: {
			type: 'value'
		},
		series: [{
			name: '总退保金给付（低）',
			type: 'line',
//			stack: '总量',
			itemStyle:{
				normal:{
					color: '#ccc',
					borderColor: '#000',
					borderWidth: 1,
					borderType: 'solid'
				},
				emphasis:{
					color: '#ccc',
					borderColor: '#000',
					borderWidth: 1,
					borderType: 'solid'
				}
			},
			areaStyle: {normal: {}},
			data: [120, 132, 101, 134, 90, 230, 210]
		}, {
			name: '总退保金给付（中）',
			type: 'line',
//			stack: '总量',
			areaStyle: {normal: {}},
			data: [220, 182, 191, 1234, 290, 330, 310]
		}, {
			name: '总退保金给付（高）',
			type: 'line',
//			stack: '总量',
			areaStyle: {normal: {}},
			data: [150, 232, 201, 154, 190, 330, 410]
		}, {
			name: '累计保费',
			type: 'line',
//			stack: '总量',
			areaStyle: {normal: {}},
			data: [320, 332, 301, 334, 390, 330, 320]
		}]
	};
作品使用的第三方脚本

数据管理

历史数据 0 条

代码修改记录

信息提示

保存作品
