我们这次来继续做图表,让网页更漂亮。
此篇参考:
点我
这是折线图的基本架构,元件名称叫line-chart,资料为data2。
<template>
<div >
<div class="chart">
<line-chart :data="data2"
x-name="年份"
y-name="金额"
/>
</div>
</div>
</template>
<script>
// @ is an alias to /src
/*eslint-disable*/
export default {
name:'usechart',
data:()=>({
data2: [
{
name: "营业额",
data: [
{label: "2015",value: 111000},
{label: "2016",value: 87000},
{label: "2017",value: 78000},
{label: "2018",value: 81000},
{label: "2019",value: 98000},
{label: "2020",value: 75000}
]
}
]
}),
components: {
},
methods:{
}
}
</script>
<style scoped>
.chart {
width: 100%;
height: 400px;
}
</style>
若想要直直的线变弯曲的线,加上:smooth="true"
<line-chart :data="data2"
x-name="年份"
y-name="金额"
:smooth="true"
/>
若要新增多笔资料源,则修改data2的资料
data2: [
{
name: "营业额",
data: [
{label: "2015",value: 111000},
{label: "2016",value: 87000},
{label: "2017",value: 78000},
{label: "2018",value: 81000},
{label: "2019",value: 98000},
{label: "2020",value: 75000}
]
},
{
name: "成本",
data: [
{label: "2015",value: 90000},
{label: "2016",value: 80000},
{label: "2017",value: 83000},
{label: "2018",value: 84000},
{label: "2019",value: 79000},
{label: "2020",value: 71000}
]
}
]
这是圆饼图的基本型态,使用data3的资料
<template>
<div >
<div class="chart">
<pie-chart :data="data3"/>
</div>
</div>
</template>
<script>
// @ is an alias to /src
/*eslint-disable*/
export default {
name:'usechart',
data:()=>({
data3: [
{
name: '东部',
value: 33,
},
{
name: '南部',
value: 14,
},
{
name: '西部',
value: 11,
},
{
name: '北部',
value: 46,
},
],
}),
components: {
},
methods:{
}
}
</script>
<style scoped>
.chart {
width: 100%;
height: 400px;
}
</style>
若想改成空心圆,加上pie-style="donut"。
<pie-chart :data="data3"
pie-style="donut"
/>
还有另一种样式pie-style="rose",变成大小不一的圆饼图
<pie-chart :data="data3"
pie-style="rose"
/>
radius="60%",可以设定圆的半径。
<pie-chart :data="data3"
pie-style="pizze"
radius="60%"
/>
>>: 来讲讲 Cypher 的 Coding Style 吧
It's truly the beginning. Scoping is a big hurdle...
当概念验证过有价值且方向大致正确後,就会开始撰写 User Story,然後进入正式的 UX/UI ...
终於完结第十一周作业 最後集中在两天的时间把部落格作业写出来,前面花时间跟留言板搏斗的经验果然有派上...
各位在刚载好VScode都会做甚麽样的设定或安装甚麽扩充功能呢? 虽然网路上一大堆的介绍,但零零总总...
“I am a cage, in search of a bird.” ― Franz Kafka...