前端echarts加标记点及标记线和提示框 - ToB企服应用市场:ToB评测及商务社交产业平台

[/code] javascript复制代码
[table][tr][td][/td][td]var myChart = echarts.init(document.getElementById('main')); [/td][/tr][tr][td][/td][td][/td][/tr][tr][td][/td][td]var option = { [/td][/tr][tr][td][/td][td]xAxis: { [/td][/tr][tr][td][/td][td]type: 'category', [/td][/tr][tr][td][/td][td]data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] [/td][/tr][tr][td][/td][td]}, [/td][/tr][tr][td][/td][td]yAxis: { [/td][/tr][tr][td][/td][td]type: 'value' [/td][/tr][tr][td][/td][td]}, [/td][/tr][tr][td][/td][td]series: [{ [/td][/tr][tr][td][/td][td]data: [820, 932, 901, 934, 1290, 1330, 1320], [/td][/tr][tr][td][/td][td]type: 'line', [/td][/tr][tr][td][/td][td]markPoint: { [/td][/tr][tr][td][/td][td]data: [ [/td][/tr][tr][td][/td][td]{type: 'max', name: '最大值'}, [/td][/tr][tr][td][/td][td]{type: 'min', name: '最小值'} [/td][/tr][tr][td][/td][td]] [/td][/tr][tr][td][/td][td]} [/td][/tr][tr][td][/td][td]}] [/td][/tr][tr][td][/td][td]}; [/td][/tr][tr][td][/td][td][/td][/tr][tr][td][/td][td]myChart.setOption(option);[/td][/tr][/table] 在这个例子中，我们为 markPoint 添加了最大值和最小值的标记点。
[size=3]2. 添加标记线（markLine）[/size]
标记线用于突出显示图表中的某些线，比方平均值线。
[code]

复制代码

[/code] javascript复制代码
[table][tr][td][/td][td]// ... 在上面的 option 中继续添加 ... [/td][/tr][tr][td][/td][td][/td][/tr][tr][td][/td][td]tooltip: { [/td][/tr][tr][td][/td][td]trigger: 'axis', // 触发类型，可选为：'item'、'axis' [/td][/tr][tr][td][/td][td]formatter: function (params) { [/td][/tr][tr][td][/td][td]// 格式化提示框的内容 [/td][/tr][tr][td][/td][td]return params[0].seriesName + ' : ' + params[0].value; [/td][/tr][tr][td][/td][td]} [/td][/tr][tr][td][/td][td]} [/td][/tr][tr][td][/td][td][/td][/tr][tr][td][/td][td]// ...[/td][/tr][/table] 在这个例子中，我们设置了提示框的触发类型为 'axis'，这意味着当鼠标悬停在坐标轴上时，提示框会显示该坐标轴上全部系列的数据。formatter 函数用于自定义提示框的内容。
[size=3]整合示例[/size]
将上述全部配置整合到一个完整的 ECharts 选项中：
[code]

复制代码

	var myChart = echarts.init(document.getElementById('main'));

	var option = {
	tooltip: {
	trigger: 'axis',
	formatter: function (params) {
	return params[0].seriesName + ' : ' + params[0].value;
	}
	},
	xAxis: {
	type: 'category',
	data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
	},
	yAxis: {
	type: 'value'
	},
	series: [{
	data: [820, 932, 901, 934, 1290, 1330, 1320],
	type: 'line',
	markPoint: {
	data: [
	{type: 'max', name: '最大值'},
	{type: 'min', name: '最小值'}
	]
	},
	markLine: {
	data: [
	{type: 'average', name: '平均值'}
	]
	}
	}]
	};

	myChart.setOption(option);