我們這次來繼續做圖表，讓網頁更漂亮。
此篇參考:
點我

折線圖

這是折線圖的基本架構，元件名稱叫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%"
        />