echarts力导向图的前后台交互（ajax+json+struts）

最新推荐文章于 2024-08-17 21:55:43 发布

Ezrealmore

最新推荐文章于 2024-08-17 21:55:43 发布

阅读量4k

点赞数 4

本文为博主原创文章，转载时请注明出处链接。

本文链接：https://blog.csdn.net/lk7688535/article/details/51833761

版权

本文介绍了如何在MyEclipse环境下，结合Echarts 3.0和Struts2框架，创建一个关系图。重点讨论了HTML代码的编写，特别是Ajax与后台的数据交互，以及Struts2的配置，包括web.xml和struts2.xml的设置，Action类和Bean的处理，最终实现了数据的JSON输出，成功完成任务。

摘要由CSDN通过智能技术生成

目标：用百度研发的echarts数据可视化插件做个关系图

环境：myeclipse+echarts3.0+struts2

html代码

<!DOCTYPE html>
<html>
<header>
    <meta charset="utf-8">
    <!-- 引入 ECharts 文件 -->
    <script src="echarts.min.js"></script>
    <script src="jquery.js"></script>
</header>
<body>
<!-- 为 ECharts 准备一个具备大小（宽高）的Dom -->
<div id="main" style="width: 1000px;height:800px;"></div>
<script type="text/javascript">
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('main'));

    // 指定图表的配置项和数据
    option = {
        title: {
            text: 'Graph 简单示例'
        },
        tooltip: {},
        animationDurationUpdate: 1500,
        animationEasingUpdate: 'quinticInOut',
        series : [
            {
                type: 'graph',
                layout: 'force',
                symbolSize: 50,
                roam: true,
                label: {
                    normal: {
                        show: true
                    }
                },
                symbol:'circle',
                force:{repulsion: 2000},
                categories : [
                    {
                        name: '人物'
                    },
                    {
                        name: '家人'
                    },
                    {
                        name:'朋友'
                    }