Echarts 的使用？如何接收后台数据

- 日理万妓 2023-06-22 03:25 110阅读 0赞

效果：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2R4eXpoYmI_size_16_color_FFFFFF_t_70]  
后台 源码：

/** * Created by joe强 on 2018/8/24 10:18 */
     
    @Controller
    @RequestMapping("/echarts")
    @Scope(value = "prototype")
    public class EchartsController { 
        @Autowired
        EchartsService echartsService;
        @RequestMapping("/getEchartsDate.action")
        @ResponseBody
        public JSONObject getJson() { 
            //实体类
            EchartsVo echartsVo = new EchartsVo();
            //集合
            List<Integer> data = new ArrayList<>();
            //从数据库获取所有的用户名
            List<String> categories = echartsService.getNickname();
            for (String name : categories) { 
               //根据用户名来获取对应的权限数
                Integer count = echartsService.getPermission(name);
                //放入集合中
                data.add(count);
            }
            //放到实体类中
            echartsVo.setCategories(categories);
            echartsVo.setData(data);
            //转换为Json数据
            return JSONObject.fromObject(echartsVo);
     
        }
    }

前台 接收：

<%--
      Created by IntelliJ IDEA.
      User: joe强
      Date: 2018/8/24
      Time: 11:11
      To change this template use File | Settings | File Templates.
    --%>
    <%@ page contentType="text/html;charset=UTF-8" language="java" %>
    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8">
        <title>ECharts</title>
        
        <script src="/js/common/echarts/echarts.common.min.js"></script>
        
        <script src="/js/common/bootstrap/js/jquery/2.0.0/jquery.min.js"></script>
    </head>
    <body>
    
    <div id="main" style="width: 600px;height:400px;"></div>
    <script type="text/javascript">
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));
     
        // 指定图表的配置项和数据
        myChart.setOption({ 
            //树状图颜色
            color: ['#3398DB'],
            title: { 
                text: '异步数据加载示例'
            }, 
          //切换展示模式
          tooltip: { 
            trigger: 'axis',
                axisPointer: { 
                type: 'cross',
                    crossStyle: { 
                    color: '#999'
                }
            }
        },
            toolbox: { 
                feature: { 
                    dataView: { show: true, readOnly: false},
                    magicType: { show: true, type: ['line', 'bar']},
                    restore: { show: true},
                    saveAsImage: { show: true}
                }
            },
            legend: { 
                data: ['权限']
            },
            xAxis: { 
                data: []
            },
            yAxis: { },
            series: [{ 
                name: '权限',
                type: 'bar',
                data: []
            }]
        });
     
        // 异步加载数据
        $.get('/echarts/getEchartsDate.action').done(function (data) { 
            // 填入数据
            myChart.setOption({ 
                xAxis: { 
                   //获取数据
                    data: data.categories
                },
                series: [{ 
                    // 根据名字对应到相应的系列
                    name: '权限',
                    data: data.data
                }]
            });
        });
     
    </script>
    </body>
    </html>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2R4eXpoYmI_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20191213170632737.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2R4eXpoYmI=,size_16,color_FFFFFF,t_70