echart饼图中给series的data动态赋值

最新推荐文章于 2024-06-22 09:48:56 发布

bug罗

最新推荐文章于 2024-06-22 09:48:56 发布

阅读量9.3k

点赞数 3

分类专栏： js echarts-java

本文链接：https://blog.csdn.net/qq_33543227/article/details/96828964

版权

js 同时被 2 个专栏收录

3 篇文章 0 订阅

订阅专栏

echarts-java

3 篇文章 0 订阅

订阅专栏

以下是前端代码

<!DOCTYPE html>
<html style="height: 100%">
<head>
    <meta charset="utf-8">
    <title>Echart展示</title>
    <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/echarts.min.js"></script>
    <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts-gl/echarts-gl.min.js"></script>
    <script typet="text/javascript" src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>


    <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts-stat/ecStat.min.js"></script>
    <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/extension/dataTool.min.js"></script>
    <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/map/js/china.js"></script>
    <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/map/js/world.js"></script>
    <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/extension/bmap.min.js"></script>
    <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/simplex.js"></script>
</head>
<body style="height: 100%; margin: 0">

<div id="container" style="height: 100%"></div>

<script type="text/javascript">
    $(document).ready(function(){
        $.ajax({
            contentType : "application/json",
            type : "GET",
            url : "ProductInfo",
            dataType : "json",
            success : function(data) {
                var shuzu=[];
                var company=[];
                var kk=[];
                for(var a=0;a<data.length;a++){
                    //注意，这里的eval函数特别关键，可将后端返回的Json字符串，装有json字符串元素的list集合转为js可用的对象
                    kk[a]=eval('('+data[a]+ ')');
                    company[a]=kk[a].name;
                }

                for(var i=0;i<data.length;i++){
                    shuzu[i]=eval('('+data[i]+ ')')
                }

                var dom = document.getElementById("container");
                var myChart = echarts.init(dom);
                var app = {};
                option = null;
                option = {
                    title : {
                        text: '某站点用户访问来源',
                        subtext: '纯属虚构',
                        x:'center'
                    },
                    tooltip : {
                        trigger: 'item',
                        formatter: "{a} <br/>{b} : {c} ({d}%)"
                    },
                    legend: {
                        orient: 'vertical',
                        left: 'left',
                        data: company
                    },
                    series : [
                        {
                            name: '访问来源',
                            type: 'pie',
                            radius : '55%',
                            center: ['50%', '60%'],
                            data:shuzu,
                            itemStyle: {
                                emphasis: {
                                    shadowBlur: 10,
                                    shadowOffsetX: 0,
                                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                                }
                            }
                        }
                    ]
                };
                ;
                if (option && typeof option === "object") {
                    myChart.setOption(option, true);
                }
            }});

    });

</script>
</body>
</html>

以下是后端代码

package com.example.demo.controller;

import com.example.demo.entity.Product;
import com.example.demo.service.ProductService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.ResponseBody;

import java.util.ArrayList;
import java.util.List;

@Controller
public class ProductController {

    @Autowired
    public ProductService productService;

    //返回一个json元素的二维数据
    @RequestMapping(value = "/ProductInfo",method = RequestMethod.GET)
    @ResponseBody
    public List<String> ProductInfo(){
        List<Product> product=productService.getProductList();
        List<String> productList=new ArrayList<>();
        for (int i=0;i<product.size();i++){
            productList.add("{"+"value:"+product.get(i).getNumber()+","+"name:"+"'"+product.get(i).getCompany()+"'"+"}");
        }
        return  productList;
    }
}