Echarts入门使用
1、依赖
1.1、pom依赖
<?xml version="1.0" encoding="UTF-8"?>
<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 https://maven.apache.org/xsd/maven-4.0.0.xsd">
<modelVersion>4.0.0</modelVersion>
<parent>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-parent</artifactId>
<version>2.1.3.RELEASE</version>
<relativePath/> <!-- lookup parent from repository -->
</parent>
<groupId>com.wnx.mall.tiny</groupId>
<artifactId>echarts-back</artifactId>
<version>0.0.1-SNAPSHOT</version>
<name>echarts-back</name>
<description>Demo project for Spring Boot</description>
<properties>
<java.version>1.8</java.version>
</properties>
<dependencies>
<!--springboot通用依赖-->
<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>
<!--jpa-->
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-data-jpa</artifactId>
</dependency>
<dependency>
<groupId>mysql</groupId>
<artifactId>mysql-connector-java</artifactId>
<scope>runtime</scope>
</dependency>
<dependency>
<groupId>org.projectlombok</groupId>
<artifactId>lombok</artifactId>
<optional>true</optional>
</dependency>
<!--Swagger-UI API文档生产工具-->
<dependency>
<groupId>io.springfox</groupId>
<artifactId>springfox-swagger2</artifactId>
<version>2.7.0</version>
</dependency>
<dependency>
<groupId>io.springfox</groupId>
<artifactId>springfox-swagger-ui</artifactId>
<version>2.7.0</version>
</dependency>
</dependencies>
<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>
</project>
1.2、application.yaml
JPA的配置意思为展示SQL
server:
port: 9000
address: 127.0.0.1
spring:
datasource:
url: jdbc:mysql://localhost:3306/book?useUnicode=true&characterEncoding=utf-8&serverTimezone=Asia/Shanghai
username: root
password: root
jpa:
show-sql: true
properties:
hibernate:
format_sql: true
2、后端
2.1、model
package com.wnx.mall.tiny.entity;
import io.swagger.annotations.ApiModelProperty;
import lombok.Data;
import javax.persistence.Column;
import javax.persistence.Entity;
import javax.persistence.Table;
import javax.persistence.Id;
import javax.persistence.GeneratedValue;
import java.io.Serializable;
/**
* @Description
* @Author wangnaixing
* @Date 2022-01-09 21:59:38
*/
@Data
@Entity
@Table ( name ="tb_book" , schema = "")
public class Book implements Serializable {
@Id
@ApiModelProperty("自增主键")
@Column(name = "id" )
private Long id;
@Column(name = "name" )
@ApiModelProperty("图书名称")
private String name;
@Column(name = "number" )
@ApiModelProperty("图书数量")
private Long number;
}
2.2、repository
package com.wnx.mall.tiny.repository;
import com.wnx.mall.tiny.entity.Book;
import org.springframework.data.jpa.repository.JpaRepository;
import org.springframework.stereotype.Repository;
@Repository
public interface BookRepository extends JpaRepository<Book,Long> {
}
2.3、Service
package com.wnx.mall.tiny.service;
import com.wnx.mall.tiny.entity.Book;
import java.util.List;
public interface BookService {
List<Book> findAll();
}
2.4、ServiceImpl
package com.wnx.mall.tiny.service.impl;
import com.wnx.mall.tiny.entity.Book;
import com.wnx.mall.tiny.repository.BookRepository;
import com.wnx.mall.tiny.service.BookService;
import org.springframework.stereotype.Service;
import javax.annotation.Resource;
import java.util.List;
@Service
public class BookServiceImpl implements BookService {
@Resource
private BookRepository bookRepository;
@Override
public List<Book> findAll() {
return bookRepository.findAll();
}
}
3、前端
3.1、环境准备
- 构建vue项目
http://nodejs.cn/ #安装基于Chrome V8引擎得到JavaScript运行环境 他提供了包管理器npm，可以安装我们想要的前端jar包！
npm install vue #安装vue环境
npm install -g @vue/cli @vue/cli-service-global #安装vue图形化构建工具
vue ui #打开图形化工具，创建Vue2项目
- 下载axios,echarts
npm install axios --save
npm install echarts --save
- 在我的项目全局使用他
#main.js
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import axios from 'axios'
import * as echarts from 'echarts'
Vue.config.productionTip = false
Vue.prototype.$axios = axios
Vue.prototype.$echarts = echarts
new Vue({
router,
store,
render: h => h(App)
}).$mount('#app')
3.2、配置
https://echarts.apache.org/examples/zh/editor.html?c=pie-borderRadius
<template>
<div class="home">
<h3>这是echarts图像等下展示的地方</h3>
<div id="myChart" :style="{ width: '700px', height: '700px' }"></div>
</div>
</template>
<script>
export default {
name: "Home",
methods: {
data(){
return {
data:[]
}
},
draw() {
var myChart = this.$echarts.init(document.getElementById("myChart"));
myChart.setOption({
tooltip: {
trigger: "item",
},
legend: {
top: "5%",
left: "center",
},
series: [
{
name: "Access From",
type: "pie",
radius: ["40%", "70%"],
avoidLabelOverlap: false,
itemStyle: {
borderRadius: 10,
borderColor: "#fff",
borderWidth: 2,
},
label: {
show: false,
position: "center",
},
emphasis: {
label: {
show: true,
fontSize: "40",
fontWeight: "bold",
},
},
labelLine: {
show: false,
},
data:this.data,
},
],
});
},
},
mounted(){
this.$axios.get('http://localhost:9000/book/findAll').then(res=>{
console.log(res.data);
let bookList = res.data.data;
//构造图饼展示data
let data = [];
for(let i =0;i<bookList.length;i++){
let element = {name:'',value:0};
element.name = bookList[i].name;
element.value = bookList[i].number;
data.push(element);
}
data.sort((a,b)=>b.value-a.value);
this.data = data;
this.draw();
}).catch(err=>{
console.log(err);
alert("请求失败！请检查后端接口！！");
});
}
};
</script>