关于#饼状图#传参的问题，如何解决？

img


这是Controller数据我只想取其中3个，剩下的是其他图形数据


 var pie = echarts.init(document.getElementById('pie'));
    // 指定图表的配置项和数据
    pieOption = {
        // 标题
        title: {
            //             text: 'echarts实现饼状图',
            // align="center"
            // text-align:center

        },
        // 图例
        tooltip: {
            show: true,
            trigger: "item",
            backgroundColor: "#1677FF",
            // {a}（系列名称），{b}（数据项名称），{c}（数值）, {d}（百分比）
            formatter: "{a}：{b}<br/>{c}个({d}%)"
        },
        // 不同区域的颜色
        color: ['#3e87ff', '#c0c0c0', '#b9cfec'],
        series: [
            {
                name: '课程种类',
                type: 'pie',
                // 数组的第一项是内半径，第二项是外半径；可以设置不同的内外半径显示成圆环图
                radius: '50%',
                // 饼图的中心（圆心）坐标，数组的第一项是横坐标，第二项是纵坐标；设置成百分比时第一项是相对于容器宽度，第二项是相对于容器高度
                center: ['10%', '30%'],
                data: [
                    { value: 9795, name: '创业' },
                    { value: 19840, name: '电子' },
                    { value: 38911, name: '工程' }
                ],
                itemStyle: {
                    // 显示图例
                    normal: {
                        label: {
                            show: true
                        },
                        labelLine: {
                            show: true
                        }
                    },
                    emphasis: {
                        // 图形阴影的模糊大小
                        shadowBlur: 10,
                        // 阴影水平方向上的偏移距离
                        shadowOffsetX: 0,
                        // 阴影颜色
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }

                }
            }
        ]
    };
    pie.setOption(pieOption);

这是JS也是网上找的，我应该怎么指定其中三个值呢

img


类似这种

1.试试在后端进行选择需要返回的数据，2.不会后端的话，修改前端的话代码案例如下：


$.ajax({
  url: '/charts/pie/',
  type: 'GET',
  dataType: 'JSON',
  success: function(res) {
    if (res.status) {
      option.title.text = res.data.title;
      // 过滤出不需要显示的数据
      var filteredData = res.data.data_list.filter(function(item) {
        return item.name !== '不需要显示的数据名称';
      });
      option.series[0].data = filteredData;
      myChart.setOption(option);
    }
  }
});

在请求完控制器接口的回调函数里面渲染饼图数据时候，使用 Array.prototype.filter() 方法来过滤掉原始数据列表中名称为 不需要显示的数据名称 的数据。过滤后，将剩余的数据用于为 series.data 属性设置数据。
这样，您就可以通过过滤特定 name 值来去掉不需要显示的数据。

我的案例如下：

/**
     * 初始化饼图
     */
    function InitPie(aid,creattime,creattime2) {
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('mainPie'));

        var option = {
            title: {
                text: [],
                subtext: 'Fake Data',
                left: 'center'
            },
            tooltip: {
                trigger: 'item',
                formatter: "{a} <br/>{b} : {c} ({d}%)"
            },
            legend: {
                orient: 'vertical', // 布局方式，默认为水平布局，可选为：'horizontal' ¦ 'vertical'
                // 水平安放位置，默认为左侧，可选为：'center' | 'left' | 'right' | {number}（x坐标，单位px）
                x: 'left',
                // 垂直安放位置，默认为全图顶端，可选为：'top' | 'bottom' | 'center' | {number}（y坐标，单位px）
                y: 'bottom',
                // 重写legend显示样式
                formatter: function(name) {
                    // 获取legend显示内容
                    let data = option.series[0].data;
                    let total = 0;
                    let tarValue = 0;
                    for (let i = 0, l = data.length; i < l; i++) {
                        total += data[i].value;
                        if (data[i].name == name) {
                            tarValue = data[i].value;
                        }
                    }
                    let p = (tarValue / total * 100).toFixed(2);
                    return name + ' ' + ' ' + p + '%';
                },
                data: ['出勤','缺勤','迟到','请假','早退']
            },
            series: [
                {
                    name: '课程出勤率',
                    type: 'pie',
                    radius: '50%',
                    data: [],
                    itemStyle: {
                        emphasis: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                }
            ]
        };

        $.ajax({
            url: '<%=Const.ROOT%>attendances/charts_pie.action',
            type: 'post',
            data:{"aid":aid,"creattime":creattime,"creattime2":creattime2},
            dataType: "json",
            success: function (res) {
                if (res.status) {
                    option.title.text = res.data.title;
                    option.series[0].data = res.data.data_list;
                    myChart.setOption(option);
                }
            }
        })

    }

后端：

@RequestMapping(value="/charts_pie",produces="text/html;charset=UTF-8;")
@ResponseBody
public String ShowCharts_pieDataList(String aid,String creattime,String creattime2) throws JsonProcessingException {
    Map<String, Object> data = new HashMap<String, Object>();
    ObjectMapper mapper = new ObjectMapper();

    String title = creattime+"~"+creattime2+"的出勤率";
    List<String> legend = new ArrayList<String>();
    legend.add("出勤");
    legend.add("缺勤");
    legend.add("迟到");
    legend.add("请假");
    legend.add("早退");
    List<HashMap> piedata = new ArrayList<HashMap>();
    for(String type:legend){
        HashMap hm = new HashMap();
        hm.put("name",type);
        Integer f = attendanceService.queryPieCountByStatusTime(type,aid,creattime,creattime2);
        hm.put("value",f);
        piedata.add(hm);
    }
    Map data1 = new HashMap();
    data1.put("title",title);
    data1.put("data_list",piedata);

// data = [
// {'value': 1048, 'name': '农产品类'},
// {'value': 735, 'name': '水果类'},
// {'value': 580, 'name': '海鲜鱼类'},
// {'value': 484, 'name': '烟酒茶类'},
// {'value': 300, 'name': '美食类'}
// ]
data.put("status",true);
data.put("data", data1);
// result = {
// 'status': True,
// 'data': {
// 'title': title,
// 'data_list': data
// }
// }
String mapJakcson = mapper.writeValueAsString(data); //把查出的商品信息转换为json格式
System.out.println("测试输出"+mapJakcson);
return mapJakcson;
}

我是把所有数据都添加到这个model里边了，你是说我需要3条数据就返回3条吗，其他的图也要用，剩下的数据我想给其他的图