SpringBoot[01-02]了解echarts（JSON数据练习）

最新推荐文章于 2023-11-02 14:19:46 发布

Toozky

最新推荐文章于 2023-11-02 14:19:46 发布

阅读量209

点赞数

分类专栏： # SpringBoot 文章标签： ajax echarts json spring boot

本文链接：https://blog.csdn.net/u012175183/article/details/117375009

版权

SpringBoot 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

SpringBoot[01-02]了解echarts（JSON数据练习）

准备环境

软件/工具	版本
IDEA	2020.2
JDK	1.8
jQuery	jQuery-3.4.1.js
echarts	echarts.min.js

创建springboot

创建springboot项目
IDEA创建Spring Initalizr项目
选择本机的JDK版本，选择Default starter service URL 点击next
设置Group、Artifact（全小写英文），选择本机的JDK版本
选择Web，勾选Spring Web，点击next，点击finish
（group.artifact作为项目java目录内的包名）
删除.mvn目录、.gitignore、HELP.md、mvnw、mvnw.cmd

详见链接：SpringBoot[01]springboot创建

pom.xml

pom.xml添加相关依赖
在dependencies标签中添加

    <dependencies>
        <!--spring boot-->
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-web</artifactId>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-devtools</artifactId>
            <scope>runtime</scope>
            <optional>true</optional>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-test</artifactId>
            <scope>test</scope>
        </dependency>
        <!--tomcat-->
        <dependency>
            <groupId>org.apache.tomcat.embed</groupId>
            <artifactId>tomcat-embed-jasper</artifactId>
            <scope>provided</scope>
        </dependency>
        <!--javax.servlet-->
        <dependency>
            <groupId>javax.servlet</groupId>
            <artifactId>javax.servlet-api</artifactId>
            <version>4.0.0</version>
        </dependency>
        <dependency>
            <groupId>javax.servlet</groupId>
            <artifactId>jstl</artifactId>
            <version>1.2</version>
        </dependency>
        <!--FastJson-->
        <dependency>
            <groupId>com.alibaba</groupId>
            <artifactId>fastjson</artifactId>
            <version>1.2.47</version>
        </dependency>
    </dependencies>

在project标签中添加build标签

    <build>
        <plugins>
            <plugin>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-maven-plugin</artifactId>
                <configuration>
                    <excludes>
                        <exclude>
                            <groupId>org.projectlombok</groupId>
                            <artifactId>lombok</artifactId>
                        </exclude>
                    </excludes>
                </configuration>
            </plugin>
        </plugins>
    </build>

resources

static
resources/static目录下可以放置一些静态资源，比如html页面
在static目录下分别创建jq目录、js目录
将jQuery-3.4.1.js放入jq目录，echarts.min.js放入js目录

index.html

在static目录下创建index.html文件

<!--body内容-->
<a href="echartsdemo.html">echartsdemo.html</a><br>
<a href="DoughnutChart_Demo.html">DoughnutChart_Demo.html</a><br>

接着分别在static目录下创建echartsdemo.html、DoughnutChart_Demo.html

echartsdemo.html

访问echarts官网，点击快速入门→复制绘制一个简单图表中的示例代码
详见echarts官网链接：https://echarts.apache.org/zh/index.html
引入相应的jQuery.js、echarts.js文件
添加test_data、test_JSON按钮

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/echarts.min.js"></script>
    <script type="text/javascript" src="jq/jQuery-3.4.1.js"></script>
    <script>
        $(function (){
            // 基于准备好的dom，初始化echarts实例
            var myChart = echarts.init(document.getElementById('main'));

            // 指定图表的配置项和数据
            var option = {
                title: {
                    text: 'ECharts 入门示例'
                },
                tooltip: {},
                legend: {
                    data: ['销量']
                },
                xAxis: {
                    data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]
                },
                yAxis: {},
                series: [{
                    name: '销量',
                    type: 'bar',
                    data: [5, 20, 36, 10, 10, 20]
                }]
            };
            // 使用刚指定的配置项和数据显示图表。
            myChart.setOption(option);
        })
    </script>

</head>
<body>
<button id="btn-test_data">test_data</button><br>
<button id="btn-test_JSON">test_JSON</button><br>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="main" style="width: 600px;height:400px;"></div>

</body>
</html>

运行springboot项目
浏览器地址栏中输入http://localhost:8080/回车
单击echartsdemo.html
页面显示如下
在这里插入图片描述

java

XxxApplication.java

java目录的group.artifact目录是artifactnameApplication.java文件（程序的入口）
后续创建的相关java文件最高与该文件同级（分层新建的package与此java文件同级）

import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;

@SpringBootApplication
public class SpringbootechartsdemoApplication {

    public static void main(String[] args) {
        SpringApplication.run(SpringbootechartsdemoApplication.class, args);
    }

}

MyController.java

在src/main/java目录的group.artifact目录下创建controller层
在controller层中创建MyController.java

为MyController类添加@Controller注解映射

在MyController类中写
@RequestMapping("/getdata")
@ResponseBody
注解映射并写出方法，返回JSON对象的toString的java字符串
（当不写@ResponseBody时，返回值则为跳转的网页名称；加@ResponseBody时则为网页内传值）

再在MyController类中写
@RequestMapping("/getJsonArray")
@ResponseBody
注解映射并写出方法，返回JSON对象列表的toString的java字符串

这里的作用是模拟数据变化，真实的开发应是从数据库中获取数据（相应的改变图表的值）

import com.alibaba.fastjson.JSONArray;
import com.alibaba.fastjson.JSONObject;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;

@Controller
public class MyController {

    @RequestMapping("/getdata")
    @ResponseBody
    public String getData(){
        JSONObject js=new JSONObject();
        js.put("data1","40");
        js.put("data2","60");
        return js.toJSONString();
    }

    @RequestMapping("/getJsonArray")
    @ResponseBody
    public String getJsonArray(){
        JSONArray jsonArray=new JSONArray();

        jsonArray.add(10);
        jsonArray.add(30);
        jsonArray.add(100);
        jsonArray.add(60);
        jsonArray.add(80);
        jsonArray.add(20);

        JSONObject jsonObject=new JSONObject();
        jsonObject.put("jsonArray",jsonArray);

        return jsonObject.toJSONString();
    }
}

resources

echartsdemo.html

补全echartsdemo.html中的jquery代码，设置单击按钮变化图表数据

    <script>
        $(function (){
            // 基于准备好的dom，初始化echarts实例
            var myChart = echarts.init(document.getElementById('main'));

            // 指定图表的配置项和数据
            var option = {
                title: {
                    text: 'ECharts 入门示例'
                },
                tooltip: {},
                legend: {
                    data: ['销量']
                },
                xAxis: {
                    data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]
                },
                yAxis: {},
                series: [{
                    name: '销量',
                    type: 'bar',
                    data: [5, 20, 36, 10, 10, 20]
                }]
            };
            // 使用刚指定的配置项和数据显示图表。
            myChart.setOption(option);

            $("#btn-test_data").click(function () {
                // alert("aaa");
                $.ajax({
                    type: "post",
                    url:"/getdata",
                    dataType:"json",
                    contentType:"application/json;charset=utf-8",
                    success:function (data) {
                        // alert(data.data1+":"+data.data2)

                        // 基于准备好的dom，初始化echarts实例
                        myChart = echarts.init(document.getElementById('main'));

                        // 指定图表的配置项和数据
                        option = {
                            title: {
                                text: 'ECharts 入门示例'
                            },
                            tooltip: {},
                            legend: {
                                data: ['销量']
                            },
                            xAxis: {
                                data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]
                            },
                            yAxis: {},
                            series: [{
                                name: '销量',
                                type: 'bar',
                                data: [data.data1, 20, data.data2, 10, 10, 20]
                            }]
                        };
                        // 使用刚指定的配置项和数据显示图表。
                        myChart.setOption(option);
                    }

                })
            })

            $("#btn-test_JSON").click(function () {
                person={"name":"张三"}
                alert(person.name)

                $.ajax({
                    type: "post",
                    url:"/getJsonArray",
                    dataType:"json",
                    contentType:"application/json;charset=utf-8",
                    success:function (data) {
                        // alert(data.data1+":"+data.data2)

                        // 基于准备好的dom，初始化echarts实例
                        myChart = echarts.init(document.getElementById('main'));

                        // 指定图表的配置项和数据
                        option = {
                            title: {
                                text: 'ECharts 入门示例'
                            },
                            tooltip: {},
                            legend: {
                                data: ['销量']
                            },
                            xAxis: {
                                data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]
                            },
                            yAxis: {},
                            series: [{
                                name: '销量',
                                type: 'bar',
                                data: [data.jsonArray[0], data.jsonArray[1], data.jsonArray[2], data.jsonArray[3], data.jsonArray[4], data.jsonArray[5]]
                            }]
                        };
                        // 使用刚指定的配置项和数据显示图表。
                        myChart.setOption(option);
                    }

                })
            })

        })
    </script>

在点击事件中person={"name":"张三"}通过person.name就可以直接取到JSON格式的数据

这里ajax中的success传值为data，取到相应的值需要对比java controller方法中传值格式
若直接put JSON对象传值，如js.put("data1","40");取到40的代码为data.data1
若先用JSONArray对象存储数据（列表），又将JSONArray对象放入JSON对象中，put JSON对象传值如jsonArray.add(80); jsonArray.add(20);
jsonObject.put("jsonArray",jsonArray);则取值的代码为data.jsonArray[0]、data.jsonArray[1]……
操作如图
在这里插入图片描述

DoughnutChart_Demo.html

同理，尝试echats中的其他示例
访问访问echarts官网，点击所有示例→饼图→环形图→复制示例代码
详见echarts官网链接：https://echarts.apache.org/zh/index.html
对示例代码稍作修改，还是设置同上的两个变化数据的按钮

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/echarts.min.js"></script>
    <script type="text/javascript" src="jq/jQuery-3.4.1.js"></script>
    <script>
        $(function () {
            // 基于准备好的dom，初始化echarts实例
            var myChart = echarts.init(document.getElementById('main'));

            // 指定图表的配置项和数据
            var option = {
                tooltip: {
                    trigger: 'item'
                },
                legend: {
                    top: '5%',
                    left: 'center'
                },
                series: [
                    {
                        name: '访问来源',
                        type: 'pie',
                        radius: ['40%', '70%'],
                        avoidLabelOverlap: false,
                        label: {
                            show: false,
                            position: 'center'
                        },
                        emphasis: {
                            label: {
                                show: true,
                                fontSize: '40',
                                fontWeight: 'bold'
                            }
                        },
                        labelLine: {
                            show: false
                        },
                        data: [
                            {value: 1048, name: '搜索引擎'},
                            {value: 735, name: '直接访问'},
                            {value: 580, name: '邮件营销'},
                            {value: 484, name: '联盟广告'},
                            {value: 300, name: '视频广告'},
                            {value: 200, name: '链接广告'}
                        ]
                    }
                ]
            };
            // 使用刚指定的配置项和数据显示图表。
            myChart.setOption(option);

            $("#btn-test_data").click(function () {
                // alert("aaa");
                $.ajax({
                    type: "post",
                    url: "/getdata",
                    dataType: "json",
                    contentType: "application/json;charset=utf-8",
                    success: function (data) {
                        myChart = echarts.init(document.getElementById('main'));

                        // 指定图表的配置项和数据
                        option = {
                            tooltip: {
                                trigger: 'item'
                            },
                            legend: {
                                top: '5%',
                                left: 'center'
                            },
                            series: [
                                {
                                    name: '访问来源',
                                    type: 'pie',
                                    radius: ['40%', '70%'],
                                    avoidLabelOverlap: false,
                                    label: {
                                        show: false,
                                        position: 'center'
                                    },
                                    emphasis: {
                                        label: {
                                            show: true,
                                            fontSize: '40',
                                            fontWeight: 'bold'
                                        }
                                    },
                                    labelLine: {
                                        show: false
                                    },
                                    data: [
                                        {value: 1048, name: '搜索引擎'},
                                        {value: 735, name: '直接访问'},
                                        {value: 580, name: '邮件营销'},
                                        {value: 484, name: '联盟广告'},
                                        {value: data.data2, name: '视频广告'},
                                        {value: data.data1, name: '链接广告'}
                                    ]
                                }
                            ]
                        };
                        // 使用刚指定的配置项和数据显示图表。
                        myChart.setOption(option);
                    }

                })
            })

            $("#btn-test_JSON").click(function () {
                $.ajax({
                    type: "post",
                    url: "/getJsonArray",
                    dataType: "json",
                    contentType: "application/json;charset=utf-8",
                    success: function (data) {
                        myChart = echarts.init(document.getElementById('main'));

                        // 指定图表的配置项和数据
                        option = {
                            tooltip: {
                                trigger: 'item'
                            },
                            legend: {
                                top: '5%',
                                left: 'center'
                            },
                            series: [
                                {
                                    name: '访问来源',
                                    type: 'pie',
                                    radius: ['40%', '70%'],
                                    avoidLabelOverlap: false,
                                    label: {
                                        show: false,
                                        position: 'center'
                                    },
                                    emphasis: {
                                        label: {
                                            show: true,
                                            fontSize: '40',
                                            fontWeight: 'bold'
                                        }
                                    },
                                    labelLine: {
                                        show: false
                                    },
                                    data: [
                                        {value: data.jsonArray[0], name: '搜索引擎'},
                                        {value: data.jsonArray[1], name: '直接访问'},
                                        {value: data.jsonArray[2], name: '邮件营销'},
                                        {value: data.jsonArray[3], name: '联盟广告'},
                                        {value: data.jsonArray[4], name: '视频广告'},
                                        {value: data.jsonArray[5], name: '链接广告'}
                                    ]
                                }
                            ]
                        };
                        // 使用刚指定的配置项和数据显示图表。
                        myChart.setOption(option);
                    }
                })
            });
        })
    </script>

</head>
<body>
<button id="btn-test_data">test_data</button><br>
<button id="btn-test_JSON">test_JSON</button><br>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="main" style="width: 600px;height:400px;"></div>

</body>
</html>