Echart option常见属性值

基础示例

• 折线图

{
	// 标题
	title: {
		text: '体重控制监控'
	},
	// 图位置
	grid: {
		x: 35,
		x2: 10,
		y: 30,
		y2: 25
	},
	// 图例
	legend: {
		data: ['目标值', '实际值'],
	},
	// x值
	xAxis: [{
		type: 'category',//类型，category表示为自变量
		data: [15,16,17]
	}],
	yAxis: [
		{
			type: 'value',//类型，value表示因变量
			max: 106,  // 最大值
			min: 100,  // 最小值
			// 是否间隔显示阴影，也就是钢琴线
			splitArea: { show: true }
		}
	],
	series: [
		{
			name: '目标值',
			type: 'line', // 类型
			smooth: true, // 平滑过渡
			data: [1,2,3]
		}, 
		{
			name: '实际值',
			type: 'line', // 类型
			smooth: true, // 平滑过渡
			data: [1,3,2]
		}
	]
}

• 饼图

{
		title: {
			left: 'center',
			text: '计划组成占比',
			textStyle: {
				color: '#000000'
			}
		},
		//饼图颜色
		color: ['#37A2DA','#9FE6B8','#fc8251','#5470c6','#91cd77','#ef6567','#75bedc','#f9c956'],
		tooltip : {
			trigger: 'item' 
		},
		legend: {
			x:'center', // left center right
			y:'bottom' // top center bottom
		},
		series: [
			{
				type: 'pie',
				//圆心横坐标、纵坐标
				// center: ['40%','50%'],  
				radius: '60%',
				//数据项名称，在legend中展示
				encode: {
					itemName: 0,        
					value: 1
				},
				//在图上展示数据标签
				label: {
					//是否显示
					show: true,
					// 标签显示在图形的上方
					position: 'top', 
					// 在标签中显示名称和值
					formatter: function(params) {
						return params.name + ': ' + params.value; 
					},
					// 标签文本颜色为黑色
					// color: '#333', 
					// 标签字体大小为12px
					fontSize: 12, 
				},
				data: [
					{ value: 1017, name: '吃饭' },
					{ value: 583, name: '其他' },
					{ value: 873, name: '娱乐' },
					{ value: 432, name: '存款' },
					{ value: 332, name: '通行' },
					{ value: 678, name: '通信' }
				]
			}
		]
	}
}

legend

• 设置图例
• 常见属性包括如下

legend: {
	data: ['目标值', '实际值'],
	// orient: 'vertical', //horizontal 默认，水平；vertical 竖直
	x:'right', // left center right
	y:'top' // top center bottom
},

calculable

• 指定图表是否可计算（或可拖动）。当设置为true时，用户可以通过拖动图表上的区域来进行交互操作。例如，在柱状图中，用户可以通过拖动柱子的顶点来改变柱子的高度。此属性主要用于辅助数据分析和交互操作。
• 默认值是false

tooltip

• 鼠标位于图上后的提示框配置
• 常见属性包括如下

tooltip : {
    //trigger属性配置触发 tooltip 的方式
    //'item'：鼠标悬停在图表的数据项上时触发。饼图常用
	//'axis'：鼠标悬停在坐标轴上时触发。柱图、折线图常用
	//'none'：不触发 tooltip。
	trigger: 'item' ,
	//axisPointer配置坐标轴指示器的样式和行为,坐标轴触发有效也就是trigger属性为axis时触发
	//axisPointer: {
		//type: 'shadow' // 默认为直线，可选为：'line' | 'shadow' | 'cross'
	//}
},