echarts入門（通過axios請求資料）

echarts入門（axios請求資料）

1. npm 安裝 ECharts

npm install echarts --save

2. 下面的是基本結構，裡面的資料是靜態的（寫死的，不是通過介面請求到的）

<template>
  <div>
      <div id="echart" 
           style="width : 80%;height : 300px"></div>
  </div>
</template>

<script>
import echarts from 'echarts';
export default {
    data(){
        return{
            data : [],  //所有分類資訊
            name : []    //分類名稱
        }
    },
    mounted(){
        var myChart = echarts.init(document.getElementById('echart'));
        // 繪製圖表
        myChart.setOption({
            title: {
                text: 'ECharts 入門示例'
            },
            tooltip: {},
            xAxis: {
                data: ['襯衫', '羊毛衫', '雪紡衫', '褲子', '高跟鞋', '襪子']
            },
            yAxis: {},
            series: [{
                name: '銷量',
                type: 'bar',
                data: [5, 20, 36, 10, 10, 20, 36, 10, 10, 20]
            }]
        });
    }
}
</script>

3. 把setOption中的xAxis為自己的資料，使用axios請求資料

注意要把請求資料的程式碼寫在mounted（）階段，和設定項寫在一個鉤子函式中，不能寫在created（）階段。

this.$axios.get('http://127.0.0.1:3000/admin/classify/find').then(req => {
            // console.log(req.data.list);
            this.data = req.data.list;
            let name = this.data.map(item => {
                return item.name
            })
            myChart.setOption({
                xAxis: {
                    data: name
                }
            });
        })

結果如下，下面的分類是我通過axios請求到的