# LineChart 折线图
# 基础用法
<template>
<div class="chart">
<line-chart :data="data" />
</div>
</template>
<script>
export default {
name: "LineBase",
data() {
return {
data: [
{
name: "收入",
data: [
{
label: "2016",
value: 84000
},
{
label: "2017",
value: 90000
},
{
label: "2018",
value: 80000
},
{
label: "2019",
value: 100000
}
]
}
]
};
}
};
</script>
<style scoped>
.chart {
width: 100%;
height: 300px;
}
</style>
显示代码
# 光滑曲线
设置
smooth属性为true, 显示光滑曲线
<template>
<div class="chart">
<line-chart
:data="data"
smooth
/>
</div>
</template>
<script>
export default {
name: "LineBase",
data() {
return {
data: [
{
name: "收入",
data: [
{
label: "2016",
value: 84000
},
{
label: "2017",
value: 90000
},
{
label: "2018",
value: 80000
},
{
label: "2019",
value: 100000
}
]
}
]
};
}
};
</script>
<style scoped>
.chart {
width: 100%;
height: 300px;
}
</style>
显示代码
# 填充颜色
设置
area属性为true, 填充折线区域颜色
<template>
<div class="chart">
<line-chart
:data="data"
area
/>
</div>
</template>
<script>
export default {
name: "LineBase",
data() {
return {
data: [
{
name: "收入",
data: [
{
label: "2016",
value: 84000
},
{
label: "2017",
value: 90000
},
{
label: "2018",
value: 80000
},
{
label: "2019",
value: 100000
}
]
}
]
};
}
};
</script>
<style scoped>
.chart {
width: 100%;
height: 300px;
}
</style>
显示代码
# 堆叠区域图
<template>
<div class="chart">
<line-chart :data="data" area />
</div>
</template>
<script>
export default {
name: "LineStack",
data() {
return {
data: [
{
name: "收入",
data: [
{ label: "2016", value: 1040000 },
{ label: "2017", value: 1200000 },
{ label: "2018", value: 1800000 },
{ label: "2019", value: 2000000 }
]
},
{
name: "支出",
data: [
{ label: "2016", value: 540000 },
{ label: "2017", value: 400000 },
{ label: "2018", value: 600000 },
{ label: "2019", value: 700000 }
]
}
]
};
}
};
</script>
<style scoped>
.chart {
width: 100%;
height: 300px;
}
</style>
显示代码