SpringBoot和Vue整合ECharts
一、Vue安装ECharts
npm i echarts -S
二、Vue整合ECharts
其实这个很简单
首先在vue中引入ECharts
2.然后我们直接去ECharts官网使用一些图形的代码,放到Home.vue中,所以Home.vue中的所有内容直接改成如下所示
例如这个折线图:
这需要在
<!--最外层要用一个div包裹这-->
<template>
<div> <el-col :span="12"> <div id="main" style="width: 500px;height: 400px"></div> </el-col> </div> </template>
然后把这些代码复制到
<script></script>中就行了,注意这写复制来的代码要用
mounted() {//页面元素渲染之后在触发
}
这个包裹。
例如
<script> // 引入Echarts import * as echarts from 'echarts' export default { name: "Home", data() { return {} }, // 页面元素渲染之后再触发 mounted() { // 柱状折线图 var option = { xAxis: { type: 'category', data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] }, yAxis: { type: 'value' }, series: [ { data: [150, 230, 224, 218, 135, 147, 260], type: 'line' }, { data: [150, 230, 224, 218, 135, 147, 260], type: 'bar' } ] }; var chartDom = document.getElementById('main'); var myChart = echarts.init(chartDom); myChart.setOption(option); } </script> <style scoped> </style>
然后完整代码就是这样的
<template> <div> <el-col :span="12"> <div id="main" style="width: 500px;height: 400px"></div> </el-col> <el-col :span="12"> <div id="pie" style="width: 500px;height: 400px"></div> </el-col> </div> </template> <script> // 引入Echarts import * as echarts from 'echarts' export default { name: "Home", data() { return {} }, // 页面元素渲染之后再触发 mounted() { // 柱状折线图 var option = { xAxis: { type: 'category', data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] }, yAxis: { type: 'value' }, series: [ { data: [150, 230, 224, 218, 135, 147, 260], type: 'line' }, { data: [150, 230, 224, 218, 135, 147, 260], type: 'bar' } ] }; var chartDom = document.getElementById('main'); var myChart = echarts.init(chartDom); myChart.setOption(option); // 饼图 var pieOption = { title: { text: 'Referer of a Website', subtext: 'Fake Data', left: 'center' }, tooltip: { trigger: 'item' }, legend: { orient: 'vertical', left: 'left' }, series: [ { name: 'Access From', type: 'pie', radius: '50%', data: [ {value: 1048, name: 'Search Engine'}, {value: 735, name: 'Direct'}, {value: 580, name: 'Email'}, {value: 484, name: 'Union Ads'}, {value: 300, name: 'Video Ads'} ], emphasis: { itemStyle: { shadowBlur: 10, shadowOffsetX: 0, shadowColor: 'rgba(0, 0, 0, 0.5)' } } } ] }; var pieDom = document.getElementById('pie'); var pieChart = echarts.init(pieDom); pieChart.setOption(pieOption); } } </script> <style scoped> </style>
运行出来是这样的:
三、后台实现ECharts数据传输接口
在网站上复制的数据是写死的,这样不适合我们网站,为了动态展示数据,要从后台获取数据,首先在此目录下新建EchartsController.java
然后看这个例子:
后端先写一个接口:
@GetMapping("/example") public Result get() { Map<String, Object> map = new HashMap<>(); map.put("x", CollUtil.newArrayList("Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun")); map.put("y", CollUtil.newArrayList(150, 230, 224, 218, 135, 147, 260));//HuTool_集合工具中的一个可以直接弄成list return Result.success(map); }
然后就是在前端填空了
在来看这个饼图,
然后这饼图的后端是调用了数据库:
其中这个quarterEnum是计算某个日期属于那个季度的
然后总的代码就是可以研究一下
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<template> <div> <!-- gutter是这四个的间距,margin-bottom是距离下面的间距--> <el-row :gutter="10" style="margin-bottom: 60px"> <el-col :span="6"> <el-card style="color: #409EFF"> <div><i class="el-icon-user-solid" /> 用户总数</div> <div style="padding: 10px 0; text-align: center; font-weight: bold"> 100 </div> </el-card> </el-col> <el-col :span="6"> <el-card style="color: #F56C6C"> <div><i class="el-icon-money" /> 销售总量</div> <div style="padding: 10px 0; text-align: center; font-weight: bold"> ¥ 1000000 </div> </el-card> </el-col> <el-col :span="6"> <el-card style="color: #67C23A"> <div><i class="el-icon-bank-card" /> 收益总额</div> <div style="padding: 10px 0; text-align: center; font-weight: bold"> ¥ 300000 </div> </el-card> </el-col> <el-col :span="6"> <el-card style="color: #E6A23C"> <div><i class="el-icon-s-shop" /> 门店总数</div> <div style="padding: 10px 0; text-align: center; font-weight: bold"> 20 </div> </el-card> </el-col> </el-row> <el-row> <el-col :span="12"> <div id="main" style="width: 500px; height: 450px"></div><!--最外层要用一个div包裹这--> </el-col> <el-col :span="12"> <div id="pie" style="width: 500px; height: 400px"></div> </el-col> </el-row> </div> </template> <script> import * as echarts from 'echarts' export default { name: "Home", data(){ return { } }, mounted() {//页面元素渲染之后在触发 //柱状图加折线图 var option = { title: { text: '各季度会员数量统计', subtext: '趋势图', left: 'center' }, tooltip: { trigger: 'item' }, legend: { orient: 'vertical', left: 'left' }, xAxis: { type: 'category', //下面的数据要从后台穿过来 //data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] data:["第一季度", "第二季度", "第三季度", "第四季度"] }, yAxis: { type: 'value' }, series: [ {//折线图 //下面的数据要从后台穿过来 //data: [150, 230, 224, 218, 135, 147, 260], name:"星巴克", data:[], type: 'bar' }, {//柱状图 //下面的数据要从后台穿过来 //data: [150, 230, 224, 218, 135, 147, 260], name:"星巴克", data:[], type: 'line' }, {//折线图 //下面的数据要从后台穿过来 //data: [150, 230, 224, 218, 135, 147, 260], name:"瑞幸咖啡", data:[], type: 'bar' }, {//柱状图 //下面的数据要从后台穿过来 //data: [150, 230, 224, 218, 135, 147, 260], name:"瑞幸咖啡", data:[], type: 'line' } ] }; //饼图 var pieOption = { title: { text: '各季度会员数量统计', subtext: '比例图', left: 'center' }, tooltip: { trigger: 'item' }, legend: { orient: 'vertical', left: 'left' }, series: [ { type: 'pie', radius: '50%', label: { //饼图图形上的文本标签 normal: { show: true, position: 'inner', //标签的位置 textStyle: { fontWeight: 300, fontSize: 14, //文字的字体大小 color: "#fff" }, formatter: '{d}%'//饼图上的比例 }, }, data: [],//填空 emphasis: { itemStyle: { shadowBlur: 10, shadowOffsetX: 0, shadowColor: 'rgba(0, 0, 0, 0.5)' } } } ] }; //柱状图加折线图 var chartDom = document.getElementById('main'); var myChart = echarts.init(chartDom); //饼图 var pieDom = document.getElementById('pie'); var pieChart = echarts.init(pieDom); this.request.get("/echarts/members").then(res=>{ //填空 // option.xAxis.data=res.data.x option.series[0].data=res.data option.series[1].data=res.data option.series[2].data=[3,4,5,6] option.series[3].data=[3,4,5,6] //数据准备完成之后在set myChart.setOption(option) //饼图填空 pieOption.series[0].data = [ {name: "第一季度", value: res.data[0]}, {name: "第二季度", value: res.data[1]}, {name: "第三季度", value: res.data[2]}, {name: "第四季度", value: res.data[3]}, ] pieChart.setOption(pieOption) }) } } </script> <style scoped> </style>
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
package com.xxxx.demo.controller; import cn.hutool.core.collection.CollUtil; import cn.hutool.core.date.DateUtil; import cn.hutool.core.date.Quarter; import com.xxxx.demo.common.Result; import com.xxxx.demo.entity.User; import com.xxxx.demo.service.IUserService; import org.springframework.beans.factory.annotation.Autowired; import org.springframework.web.bind.annotation.GetMapping; import org.springframework.web.bind.annotation.RequestMapping; import org.springframework.web.bind.annotation.RestController; import java.util.HashMap; import java.util.Date; import java.util.List; import java.util.Map; /** * @ClassName EchartsController * @Description springboot整合echart * @Author Lishipu * @Date 2023/1/23 22:19 * Version 1.0 **/ @RestController @RequestMapping("/echarts") public class EchartsController { @Autowired private IUserService userService; @GetMapping("/example") public Result get() { Map<String, Object> map = new HashMap<>(); map.put("x", CollUtil.newArrayList("Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun")); map.put("y", CollUtil.newArrayList(150, 230, 224, 218, 135, 147, 260));//HuTool_集合工具中的一个可以直接弄成list return Result.success(map); } @GetMapping("/members") public Result members() { List<User> list = userService.list(); int q1 = 0; // 第一季度 int q2 = 0; // 第二季度 int q3 = 0; // 第三季度 int q4 = 0; // 第四季度 for (User user : list) { Date createTime = (Date) user.getCreateTime(); Quarter quarter = DateUtil.quarterEnum(createTime); switch (quarter) { case Q1: q1 += 1; break; case Q2: q2 += 1; break; case Q3: q3 += 1; break; case Q4: q4 += 1; break; default: break; } } return Result.success(CollUtil.newArrayList(q1, q2, q3, q4));//HuTool_集合工具中的一个可以直接弄成list } }