v-charts 折线图渐变样式配置

v-charts中折线图值区域渐变

效果如图：

1. 页面代码

<ve-line height="100%" 
:legend-visible="false" 
:data="chartData" 
:settings="chartSettings" 
:colors="colors" 
:extend="chartExtends"
>
</ve-line>

2. js

// 折线图数据 data
chartData: {
	columns: ['日期', '金额'],
	rows: [ 
		{ '日期': '01/11', '金额': '22' },
		{ '日期': '01/12', '金额': '50' },
		{ '日期': '01/13', '金额': '56' },
		{ '日期': '01/14', '金额': '36' },
		{ '日期': '01/15', '金额': '25' }
	],
},

// 基础配置项 settings
chartSettings: {
	yAxisName: ['金额'], // y轴名称
	// 值区域填充样式
	areaStyle: {
		color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
			offset: 0, // 0% 位置颜色
			color: '#61C2FF'
		}, {
			offset: 1, // 100% 位置颜色
			color: '#fff'
		}])
	},
},

// 配置项
chartExtends: {
	// 图标展示区域 离上下左右边界的距离string number
	/* 	left: 8,
		right: 15,
		top: 35,
		bottom: 10,*/
	grid: {
		x: 8,
		x2: 15,
		y: 35,
		y2: 10,
	},
	// x轴配置
	xAxis: {
		axisLabel: {
			interval: 0 // x轴数据分割间隔,0 为全部展示
		},
	},
},
// 图表颜色
colors: ['#0063FF'],