echarts 使用示例

最新推荐文章于 2021-11-03 15:23:18 发布

o_瓜田李下_o

最新推荐文章于 2021-11-03 15:23:18 发布

阅读量257

点赞数

分类专栏： echarts 文章标签： echarts

本文链接：https://blog.csdn.net/weixin_43931625/article/details/120915109

版权

echarts 专栏收录该内容

12 篇文章 7 订阅

订阅专栏

本文展示了如何使用Echarts图表库与SpringBoot应用程序整合，通过一个简单的示例解释了如何从后台获取数据并展示在前端的Echarts图表上。在控制器中创建了一个返回Fruit对象列表的方法，前端页面通过jQuery的Ajax获取数据，并用Echarts绘制条形图进行数据展示。示例包括两种不同的数据绑定方式，分别是在dataset中定义数据源和直接在series中指定数据。

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

echarts 使用示例

*****************

示例

***********

pojo 层

Fruit

@Data
public class Fruit {

    private String name;
    private Float price;
}

***********

config 层

WebConfig

@Configuration
public class WebConfig implements WebMvcConfigurer {

    @Override
    public void addViewControllers(ViewControllerRegistry registry) {
        registry.addViewController("/index").setViewName("index");
        registry.addViewController("/index2").setViewName("index2");
    }
}

***********

controller 层

HelloController

@RestController
public class HelloController {

    @RequestMapping("/hello")
    public List<Fruit> hello(){
        List<Fruit> list = new ArrayList<>();

        Fruit apple = new Fruit();
        apple.setName("苹果");
        apple.setPrice(6.0f);
        list.add(apple);

        Fruit banana = new Fruit();
        banana.setName("香蕉");
        banana.setPrice(4.0f);
        list.add(banana);

        Fruit orange = new Fruit();
        orange.setName("橘子");
        orange.setPrice(3.6f);
        list.add(orange);

        Fruit pipeApple = new Fruit();
        pipeApple.setName("菠萝");
        pipeApple.setPrice(4.8f);
        list.add(pipeApple);

        return list;
    }
}

*****************

前端页面

index.html

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org" xmlns:sec="http://www.thymeleaf.org/extras/spring-security">
<head>
    <meta charset="UTF-8">
    <title>echarts 示例</title>
    <script src="/echarts/echarts.min.js"></script>
    <script src="/jquery/jquery-3.6.0.min.js"></script>
    <script>
        $(function (){
            $("#btn").click(function (){
                $.get({
                    url: "/hello",
                    success: function (data){
                        const myChart = echarts.init($("#con")[0]);
                        let source= [];

                        $.each(data,function (index,object){
                            let item = {fruit:object.name, price:object.price }
                            source.push(item);
                        });
                        console.log(source);

                        const option = {
                            title: {
                                text: 'ECharts 入门示例'
                            },
                            tooltip: {},
                            legend: {
                                data: ['价格']
                            },
                            dataset: {       //数据集提供数据源
                                source: source
                            },
                            xAxis: {
                                type: 'category'
                            },
                            yAxis: {},
                            series: [
                                {
                                    type: 'bar',
                                    seriesLayoutBy: 'row'
                                }
                            ]
                        };

                        myChart.setOption(option);
                    }
                });
            })
        })
    </script>
</head>
<body>
<div th:align="center" id="con" style="width: 600px;height:400px;">
</div>
<div th:align="center">
    <button id="btn">加载数据</button>
</div>
</body>
</html>

index2.html

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org" xmlns:sec="http://www.thymeleaf.org/extras/spring-security">
<head>
  <meta charset="UTF-8">
  <title>echarts 示例</title>
  <script src="/echarts/echarts.min.js"></script>
  <script src="/jquery/jquery-3.6.0.min.js"></script>
  <script>
    $(function (){
      $("#btn").click(function (){
        $.get({
          url: "/hello",
          success: function (data){
            const myChart = echarts.init($("#con")[0]);
            let fruits= [];
            let prices=[];

            $.each(data,function (index,object){
              fruits.push(object.name);
              prices.push(object.price);
            });

            const option = {
              title: {
                text: 'ECharts 入门示例'
              },
              tooltip: {},
              legend: {
                data: ['价格']
              },
              xAxis: {
                data: fruits     //在xAxis中提供x轴数据
              },
              yAxis: {},
              series: [
                {
                  type: 'bar',
                  data: prices   //在seris中提供纵坐标数据
                }
              ]
            };

            myChart.setOption(option);
          }
        });
      })
    })
  </script>
</head>
<body>
<div th:align="center" id="con" style="width: 600px;height:400px;">
</div>
<div th:align="center">
  <button id="btn">加载数据</button>
</div>
</body>
</html>