在Springboot项目中整合echarts

最新推荐文章于 2024-04-03 02:58:13 发布

xiaochen0913

最新推荐文章于 2024-04-03 02:58:13 发布

阅读量3.6k

点赞数 2

分类专栏： echarts Springboot 文章标签： spring boot maven javascript

本文链接：https://blog.csdn.net/xiaochen0913/article/details/108667135

版权

Springboot 同时被 2 个专栏收录

6 篇文章 0 订阅

订阅专栏

echarts

2 篇文章 0 订阅

订阅专栏

在Springboot项目中整合echarts

1.构建一个Springboot项目

首先呢就是先在开发环境中新建一个maven项目，至于怎么新建我就不过多的阐述了，新建完之后就是完善Springboot的一个包结构，完善之后大概的一个结构就长下面这样。

这里面Java包下面的test和echarts包，分别是我在创建maven项目时取的groupid和afraicid，就这两个包的名字就按自己在创建时所取的名字。

构建完包结构之后，然后就是导入Springboot项目中那些所必须的依赖了，这儿还是一样把整个pom.xml文件放出来

<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
  xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
  <modelVersion>4.0.0</modelVersion>

  <groupId>test</groupId>
  <artifactId>echarts</artifactId>
  <version>0.0.1-SNAPSHOT</version>
  <packaging>jar</packaging>

  <name>echarts</name>
  <url>http://maven.apache.org</url>

  <properties>
    <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
  </properties>
  
   <parent>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-parent</artifactId>
        <version>1.4.1.RELEASE</version>
   </parent>

  <dependencies>
    <dependency>
      <groupId>junit</groupId>
      <artifactId>junit</artifactId>
      <version>3.8.1</version>
      <scope>test</scope>
    </dependency>
    
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-web</artifactId>
        </dependency>
 
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-test</artifactId>
            <scope>test</scope>
        </dependency>
 
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-thymeleaf</artifactId>
        </dependency>
    
  </dependencies>
</project>

然后是写application.properties这一个配置文件
application.properties

#thymeleaf start
spring.thymeleaf.mode=HTML5
spring.thymeleaf.encoding=UTF-8
spring.thymeleaf.content-type=text/html

spring.thymeleaf.cache=false
#thymeleaf end


#spring.thymeleaf.mode
spring.thymeleaf.mode = LEGACYHTML5

spring.thymeleaf.mode.cache=false

依赖导进去然后就修改启动类
App.java

package test.echarts;

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

/**
 * Hello world!
 *
 */

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

因为现在就只是在做一个小测试，我这儿就只写一个控制类，控制类就写一个返回。
DemoContrtoller.java

package test.echarts.controller;

import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.servlet.ModelAndView;

@Controller
public class DemoContrtoller {
	
	@RequestMapping(value="demo")
	public String firstDemo(){
		
		return "demo";
		
	}
	
	

}

然后在templates下面的demo.html中写上我们echarts的代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"></meta>
    <title>ECharts 实例</title>
    <!-- 引入 echarts.js -->
    <script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>
</head>
<body>
    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    <div id="main" style="width: 600px;height:400px;"></div>
    <script type="text/javascript">
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));
 
        
        setTimeout(function () {

            option = {
			    //标题
			    title:{
				text:'四档说唱节目观众喜爱度走向',//标题内容
				x:'center',//水平安放位置，默认为左对齐，可选为“center”，“left”，“right”,以及是具体的数值，单位是px
				y:'bottom'//垂直安放位置，默认为全图顶端，可选'top' ¦ 'bottom' ¦ 'center'，以及是具体的数值，单位是px
				},
				//图例
                legend: {
				},
				
				//提示框
                tooltip: {
                    trigger: 'axis',//触发类型，默认数据触发，可选为item和axis
                    showContent: false
                },
                dataset: {
                    source: [
                        ['product', '2012', '2013', '2014', '2015', '2016', '2017'],
                        ['中国新说唱', 41.1, 30.4, 65.1, 53.3, 83.8, 98.7],
                        ['说唱新世代', 86.5, 92.1, 85.7, 83.1, 73.4, 55.1],
                        ['说唱听我的', 24.1, 67.2, 79.5, 86.4, 65.2, 82.5],
                        ['我们的说唱', 55.2, 67.1, 69.2, 72.4, 53.9, 39.1]
                    ]
                },
                xAxis: {type: 'category'},
                yAxis: {gridIndex: 0},
                grid: {top: '55%'},
                series: [
                    {type: 'line', smooth: true, seriesLayoutBy: 'row'},
                    {type: 'line', smooth: true, seriesLayoutBy: 'row'},
                    {type: 'line', smooth: true, seriesLayoutBy: 'row'},
                    {type: 'line', smooth: true, seriesLayoutBy: 'row'},
                    {
                        type: 'pie',
                        id: 'pie',
                        radius: '30%',
                        center: ['50%', '25%'],
                        label: {
                            formatter: '{b}: {@2012} ({d}%)'
                        },
                        encode: {
                            itemName: 'product',
                            value: '2012',
                            tooltip: '2012'
                        }
                    }
                ]
            };

            myChart.on('updateAxisPointer', function (event) {
                var xAxisInfo = event.axesInfo[0];
                if (xAxisInfo) {
                    var dimension = xAxisInfo.value + 1;
                    myChart.setOption({
                        series: {
                            id: 'pie',
                            label: {
                                formatter: '{b}: {@[' + dimension + ']} ({d}%)'
                            },
                            encode: {
                                value: dimension,
                                tooltip: dimension
                            }
                        }
                    });
                }
            });

            myChart.setOption(option);

        });
    </script>
</body>
</html>

然后就到了检验我们成果的时候了，运行启动类，在网页上输入http://127.0.0.1:8080/demo
在这里插入图片描述
可以看到，这边是已经测试成功了的，但实际上我们在现在还没有进行整合，因为现在我们图表上的数据是我们直接在前端就已经给出来的，而不是从后端传递到前端的，所以我们到现在还并没有进行整合这一块，今天就先暂时这样吧。

xiaochen0913

关注

2
点赞
踩
13

收藏

觉得还不错? 一键收藏
3
评论
在Springboot项目中整合echarts

在Springboot项目中整合echarts1.构建一个Springboot项目首先呢就是先在开发环境中新建一个maven项目，至于怎么新建我就不过多的阐述了，新建完之后就是完善Springboot的一个包结构，完善之后大概的一个结构就长下面这样。这里面Java包下面的test和echarts包，分别是我在创建maven项目时取的groupid和afraicid，就这两个包的名字就按自己在创建时所取的名字。构建完包结构之后，然后就是导入Springboot项目中那些所必须的依赖了，这儿还是一样把
复制链接

扫一扫