asp.net +Echarts 图表可视化

注意点：前端使用一些vue语法

1：前端页面实现  根据关键词搜索

2：JS 实现图表

    @* 下面是编写JS的代码 *@
<script>
    var vm = new Vue({
        el: "#app",
        data: { //用于页面和vue对象绑定对象使用       
            keyword: "",
            num: 1, //用于设置当前的图形类型使用
        },
        mounted() { //挂载方法
            this.show(1);//显示柱状图
        },
        methods: {
            search: function () { //点击搜索时，会触发打印data参数
                console.log(this.keyword);
                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;
                    case 2://折线图
                        this.lform();
                        break;
                    case 3://饼图
                        this.bform();
                        break;
                    case 4://散点图
                        this.sform();
                        break;
                    default: //默认柱状图
                        this.zform();
                        break;

                }
            },
            zform: function () {//显示柱状图
                axios.get('/api/getSumMon', {
                    params: {//请求的参数
                        keyword: this.keyword,
                    }
                })
                    .then(function (response) { //请求成功后的操作
                        var data = response.data;
                        var xData = []; //x轴的数据
                        var yZData = []; //y轴已完成的数据
                       
                        for (item in data) {
                            xData.push(item); //x轴的数据
                            yZData.push(data[item]); //未完成的数据
                           
                        }

                        //基于准备好的dom，初始化echarts实例
                        var myChart = echarts.init(document.getElementById('main'));
                        // 指定图表的配置项和数据
                        option = {
                            title: {
                                text: '项目金额统计',
                                subtext: '项目金额统计美金和人民币',
                                left: "center"
                            },
                            tooltip: {
                                trigger: 'axis',
                                axisPointer: {
                                    type: 'shadow'
                                }
                            },
                            legend: {

                            },
                            toolbox: {
                                show: true,
                                orient: 'vertical',
                                left: 'right',
                                top: 'center',
                                feature: {
                                    mark: { show: true },
                                    dataView: { show: true, readOnly: false },
                                    magicType: { show: true, type: ['line', 'bar', 'stack'] },
                                    restore: { show: true },
                                    saveAsImage: { show: true }
                                }
                            },
                            xAxis: {
                                data: xData
                            },
                            yAxis: [
                                {
                                    type: 'value',
                                    axisLabel: {
                                        formatter: '{value} '
                                    }
                                }
                            ],
                            series: [
                                {
                                    type: 'bar',
                                    data: yZData,
                                    barGap: '20%',
                                    barCategoryGap: '40%'

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

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

    })

</script>

3：控制器写法如下：

4：最终展示结果