技術標籤：vueecharts

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'],