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

安裝

cmd到專案資料夾

npm i -s dr-vue-echarts

到main.js

import DrVueEcharts from 'dr-vue-echarts';
Vue.use(DrVueEcharts)

就可以使用了

長條圖

這是長條圖的基本配置。
BarChart元件是長條圖，
data為長條圖的資料，資料個格式要像data1一樣，x-name和y-name為橫軸和縱軸名稱。

<template>
  <div >
    <div class="chart">
        <BarChart  
        :data="data1"
        x-name="時間"
        y-name="數量"
        />
    </div>
  </div>
</template>

<script>
// @ is an alias to /src
/*eslint-disable*/

export default {
  name:'usechart',
  data:()=>({
      data1: [
          {
          name: "動物數量",
          data: [
            {label: "2016",value: 1},
            {label: "2017",value: 11},
            {label: "2018",value: 22},
            {label: "2019",value: 33},
            {label: "2020",value: 44},
            {label: "2021",value: 55},
            {label: "2022",value: 66},
            {label: "2023",value: 77},
            {label: "2024",value: 88},
          ]
          },
        ],
  }),
  components: {
  },
  methods:{
  }
}
</script>
<style  scoped>
.chart {
  width: 100%;
  height: 400px;
}
</style>

加上:label-rotate="true"，可使標題傾斜

    <div class="chart">
        <BarChart  
        :data="data1"
        x-name="時間"
        y-name="數量"
        :label-rotate="true"
        />
    </div>

加上:zoom="true"，可開啟縮放功能。

    <div class="chart">
        <BarChart  
        :data="data1"
        x-name="時間"
        y-name="數量"
        :zoom="true"
        />
    </div>

加上:horizontal="true"，可以水平顯示

    <div class="chart">
        <BarChart  
        :data="data1"
        x-name="時間"
        y-name="數量"
        :horizontal="true"
        />
    </div>

若要顯示多個資料源，只需增加data1的資料。

      data1: [
          {
          name: "動物數量",
          data: [
            {label: "2016",value: 1},
            {label: "2017",value: 11},
            {label: "2018",value: 22},
            {label: "2019",value: 33},
            {label: "2020",value: 44},
            {label: "2021",value: 55},
            {label: "2022",value: 66},
            {label: "2023",value: 77},
            {label: "2024",value: 88},
          ]
          },
          {
          name: "飼養員數量",
          data: [
            {label: "2016",value: 1},
            {label: "2017",value: 3},
            {label: "2018",value: 5},
            {label: "2019",value: 7},
            {label: "2020",value: 9},
            {label: "2021",value: 11},
            {label: "2022",value: 13},
            {label: "2023",value: 15},
            {label: "2024",value: 17},
          ]
          },
          {
          name: "資金(億)",
          data: [
            {label: "2016",value: 1.3},
            {label: "2017",value: 2.3},
            {label: "2018",value: 3.6},
            {label: "2019",value: 4.3},
            {label: "2020",value: 5.1},
            {label: "2021",value: 4.2},
            {label: "2022",value: 4.7},
            {label: "2023",value: 4.1},
            {label: "2024",value: 4.8},
          ]
          },
        ],