v-charts中折线图值区域渐变
效果如图:
- 页面代码
<ve-line height="100%"
:legend-visible="false"
:data="chartData"
:settings="chartSettings"
:colors="colors"
:extend="chartExtends"
>
</ve-line>
- 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'],