echarts ajax请求方式

落日映苍穹つ 2022-06-10 05:43 399阅读 0赞

<script>
        var myChart;
        $(document).ready(function () {
            //getEcharts();
        });
        function getEcharts() {
            myChart = echarts.init(document.getElementById("container"));
    
            var options = {
                title: {
                    text: '实际监测的各类食品的构成比',
                    subtext: '',
                    x: 'center'
                },
                tooltip: {
                    trigger: 'item',
                    formatter: "{a} <br/>{b} : {c} ({d}%)"
                },
                toolbox: {
                    show: true,
                    feature: {
                        mark: {show: true},
                        dataView: {show: true, readOnly: false},
                        magicType: {
                            show: true,
                            type: ['pie', 'funnel', 'line', 'bar', 'stack', 'tiled'],
                        },
                        restore: {show: true},
                        saveAsImage: {show: true}
                    }
                },
                legend: {
                    orient: 'vertical',
                    left: 'left'
                },
                series: [
                    {
                        name: '访问来源',
                        type: 'pie',
                        radius: '55%',
                        center: ['50%', '60%'],
                        itemStyle: {
                            emphasis: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        }
                    }
                ]
            };
    
            myChart.setOption(options); //先把可选项注入myChart中
            getChartData();//ajax后台交互
        }
        function getChartData() {
            var names = [];    //（选项描述）
            myChart.showLoading({
                text: "图表数据正在努力加载..."
            });
            //通过Ajax获取数据
            $.ajax({
                type: "post",
                url: "/foodMic/statistics/getFoodSamples",
                dataType: "json",
                //  data:
                success: function (data) {
                    result = eval(data.resultObject);
                    //console.log(result);
                    var dataList = [];
                    for (var i = 0; i < result.length; i++) {
                        //console.log(result[i].foodCategoryName);
                        names.push(result[i].foodCategoryName);    //挨个取出类别并填入类别数组
                        var obj = {};
                        obj.value = result[i].sampleNum;
                        obj.name = result[i].foodCategoryName;
                        dataList.push(obj);
    
                    }
    
                    //console.log(names);
                    //console.log(dataList);
    
                    myChart.hideLoading();    //隐藏加载动画
                    myChart.setOption({        //加载数据图表
                        legend: {
                            data: names
                        },
                        series: [
                            {
                                data: dataList
                            }
                        ]
                    });
    
                },
                error: function (errorMsg) {
                    alert("图表请求数据失败啦!");
                    myChart.hideLoading();
                }
            });
        }
    </script>

发表评论取消回复

表情：

评论列表（有 0 条评论，399人围观）

还没有评论，来说两句吧...

相关阅读

相关使用axios方式实现Ajax请求

> 项目已开源至gitee：[https://gitee.com/guo-qianliang/es6-vue-node.js][https_gitee.com_guo-qian

r囧r小猫/ 2022年11月17日 13:37/ 0 赞/ 482 阅读

相关关于Ajax请求方式的详解随笔

对于Ajax的请求方式，我们经常在开发中使用，今天，就想来详细记录下Ajax中参数的详解；首先，上图，这是开发中随便粘来的一个ajax请求： $.ajax({

Dear 丶/ 2022年11月01日 10:51/ 0 赞/ 197 阅读

相关 echarts ajax请求方式

<script> var myChart; $(document).ready(function () { //

落日映苍穹つ/ 2022年06月10日 05:43/ 0 赞/ 400 阅读

相关 AJAX发送请求(POST方式)

AJAX请求 AJAX 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术：这里介绍一下AJAX发送请求（POST） POST比GET提交方式更

本是古典何须时尚/ 2022年05月24日 00:10/ 0 赞/ 290 阅读

相关 AJAX发送请求(GET方式)

AJAX请求 AJAX 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术：这里介绍一下AJAX发送请求（GET）首先我们看一下效果 > 当

分手后的思念是犯贱/ 2022年05月23日 23:58/ 0 赞/ 379 阅读

相关 Ajax之get方式请求

ajax之get请求需要注意的两个地方： 1. 在url后边以请求字符串（传递的get参数信息）形式传递数据。 2. 对中文、=、&等特殊符号处理对特殊信息的处

╰+哭是因爲堅強的太久メ/ 2022年05月20日 06:37/ 0 赞/ 337 阅读

相关 springboot ajax form json 请求方式

1.form请求的后台代码 1.定义实体 Student package com.bsx.test.entity; import com.

川长思鸟来/ 2022年05月08日 10:52/ 0 赞/ 260 阅读

相关 Ajax请求方式

get请求方式 :请求实体直接拼接在URL后面 ajax.open("get","ajax?name=张三&age=12"); ajax

电玩女神/ 2022年04月12日 09:49/ 0 赞/ 304 阅读

相关 ajax请求方式有几种

ajax请求方式有几种 1、$.ajax()返回其创建的 XMLHttpRequest 对象 $.ajax() 只有一个参数：参数key/value对象，包含各配置及回调...

红太狼/ 2020年06月06日 16:55/ 1 赞/ 1016 阅读

相关 ajax请求方式有几种

如果你指定了dataType选项，那么需要保证服务器返回正确的MIME信息，(如 xml 返回 "text/xml")。实例：保存数据到服务器，成功时显示信息。

朱雀/ 2020年05月10日 16:49/ 2 赞/ 927 阅读