Echarts入门使用

2022-01-09 23:03:40 阅读：113 来源： 互联网

标签：name com org echarts 使用 import data Echarts 入门

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>

4、效果

在这里插入图片描述

标签：name,com,org,echarts,使用,import,data,Echarts,入门
来源： https://blog.csdn.net/WNX10086/article/details/122401259

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

Echarts入门使用

Echarts入门使用

1、依赖

1.1、pom依赖

1.2、application.yaml

2、后端

2.1、model

2.2、repository

2.3、Service

2.4、ServiceImpl

3、前端

3.1、环境准备

3.2、配置

4、效果