<script>

        var vm = new Vue({
            el: "#app",
            data: { 
                num: 1, //用于设置当前的图形类型使用
            },
            mounted() { //挂载方法
                this.show(1);//显示柱状图
            },
            methods: {
                search: function () { //点击搜索时，会触发打印data参数
                    this.show(this.num);
                },
                show: function (num) { //不同情况下，会显示不同的图形
                    //避免上一个图形影响到下一个，需要对图形进行注销
                    var myChart = echarts.init(document.getElementById('main'));
                    myChart.dispose(); //注销原图形
                    this.num = num;
                    switch (num) {
                        case 1://柱状图
                            this.zform();
                            break;
                            this.zform();          
                    }
                },
                zform: function () {//显示柱状图
                    axios.get('/api/getInfo', {
                        params: {//请求的参数
                        }
                    })
                        .then(function (response) { //请求成功后的操作
                            var data = response.data;
                            var xData = []; 
                            var yFData = []; 
                            for (item in data) {
                                xData.push(item); 
                                yFData.push(data[item]); 
                            }

                            //基于准备好的dom，初始化echarts实例
                            var myChart = echarts.init(document.getElementById('main'));
                            // 指定图表的配置项和数据
                            option = {
                                xAxis: {
                                    data: xData
                                },
                                yAxis: [
                                    {
                                        type: 'value',
                                        axisLabel: {
                                            formatter: '{value}条'
                                        }
                                    }
                                ],
                                series: [
                                    {
                                        type: 'bar',
                                        data: yFData,
                                        barGap: '20%',
                                        barCategoryGap: '40%'

                                    },                                    
                                ]
                            };
                            // 使用刚指定的配置项和数据显示图表。
                            myChart.setOption(option);

                        })
                        .catch(function (error) { //请求失败后的操作
                            console.log(error);
                        });
                },          
            }

        })

    </script>