echats 折线图效果配置

xz_code

于 2020-12-07 08:24:25 发布

阅读量149

点赞数

分类专栏：可视化文章标签： echarts vue.js

本文链接：https://blog.youkuaiyun.com/qq_44767646/article/details/109272248

版权

可视化专栏收录该内容

2 篇文章

订阅专栏

本文详细介绍了使用ECharts创建图表的方法，包括x轴和y轴的配置、数据堆叠显示、标记点、标记线和标记区域等功能，并展示了如何设置平滑效果及线条样式等。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

var myCharts = this.$echarts.init('dom 元素')
let options = {
	xAxis: {
		type: 'category',
		data: 'x轴数据',
		boundaryGap: false // 紧挨边缘
	},
	yAxis: {
		type: 'value',
		scale: true, // 脱离 0 值比例 （不是从 0开始）
	},
	series: [
		{
			name: '销量',
			type: 'line',
			data: 'y轴数据',
			stack: 'all', // 堆叠图
 			markPoint: { // 标记
				data: [
					{
						type: 'max',
						name: '最大值'
					},
					{
						type: 'min',
						name: '最小值'
					}
				]
			},
			markLine: { // 标记线
				{
					type: 'average',
					name: '平均值'
				}
			},
			markArea: { // 覆盖区域
				data: [
					[
						{ // 开始值
							xAxis: '周一'
						},
						{ // 结束值
							xAxis: '周二'
						}
					],
					[
						{ // 开始值
							xAxis: '周六'
						},
						{ // 结束值
							xAxis: '周日'
						}
					]
				]
			},
			smooth: true, // 平滑效果
			lineStyle: { // 线条样式
				color: '#f90',
				type: 'solid' // 线条样式  'dashed' 'dotted' 
			},
			areaStyle: { // 区域填充样式
				color: '#f90' // 背景色
			},
		},
		{
			name: '订单数',
			type: 'line',
			data: 'y轴数据',
			stack: 'all' // 堆叠图
		}
	]
}
myCharts.setOptions(options)