前言
因?yàn)樯衔闹刑岬降男枨缶褪窃?vue2 里面繪制echarts，所以，這里就搭建一個(gè) vue2 的腳手架了。
想要深入了解 echarts 屬性，請(qǐng)到此篇文章：如何用echarts畫(huà)一個(gè)好看的餅圖
至于如何在 vue2 中使用 echarts，請(qǐng)見(jiàn)這篇文章：https://blog.csdn.net/m0_54355172/article/details/131960527
1. 項(xiàng)目搭建
1.1. 前端
-
先搭建一個(gè) vue2.0 的腳手架
-
安裝vue-cli
-
卸載老版本
npm uninstall vue-cli -g -
安裝腳手架
npm install -g @vue/cli
-
-
新建一個(gè) vue2 的項(xiàng)目
vue create pie_front
-
-
引入 echarts 依賴：見(jiàn)博客：https://blog.csdn.net/m0_54355172/article/details/131960527
-
MyPie.vue 初始代碼如下：
<template> <div> <div class="charts"> <div id="comPie" style="height: 400px; width: 44em" /> </div> </div> </template> <script> export default { name: 'myPie', data () { return { pieOption : { 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: [ { value: 1048, name: 'Search Engine' }, { value: 735, name: 'Direct' }, { value: 580, name: 'Email' }, { value: 484, name: 'Union Ads' }, { value: 300, name: 'Video Ads' } ] } ] }, } }, mounted () { this.showPie() }, methods: { showPie () { // 指定 echarts 圖表初始化的容器 const pieCharts = this.$echarts.init(document.querySelector('#comPie')) // 渲染 echarts pieCharts.setOption(this.pieOption, true) }, }, } </script> <style scoped type="text/less"> #channelPie { margin-top: 1em; } button { width: 80px; height: 30px; border: 1px solid #2a69ee; border-radius: 5px; font: normal normal 14px 微軟雅黑; color: #2a69ee; background-color: white; } .charts { display: flex; justify-content: center; } </style> -
App.vue 原始代碼
<template> <div id="app"> <myPie msg="Welcome to Your Vue.js App"/> </div> </template> <script> import myPie from './components/MyPie.vue' export default { name: 'App', components: { myPie } } </script> <style> </style> -
初始頁(yè)面
1.2. 后端
postgreSQL 表數(shù)據(jù)：
后端接口：http://127.0.0.1:8099/pie/getPieData
依賴：
application.yml
spring:
datasource:
type: com.alibaba.druid.pool.DruidDataSource
url: jdbc:postgresql://localhost:5432/study?useUnicode=true&characterEncoding=UTF-8&useSSL=false
username: postgres
password: admin
driver-class-name: org.postgresql.Driver
server:
port: 8099
PieReadMapper.java
@Repository
public interface PieReadMapper extends BaseMapper<Commodity> {
}
Commodity.java 實(shí)體類
@TableName("t_commodity")
@Data
public class Commodity {
@TableId("cid")
private String id;
@TableField("cname")
private String name;
private Integer count;
private BigDecimal income;
}
PieController.java
@Slf4j
@RestController
@RequestMapping("/pie")
public class PieController {
@Resource
private PieReadMapper pieReadMapper;
@PostMapping("getPieData")
public JSONArray getPieData(String param) {
log.info("前端參數(shù)===>{}", param);
// QueryWrapper<Commodity> wrapper = new QueryWrapper<>();
// wrapper.setEntity(new Commodity());
List<Commodity> commodities = pieReadMapper.selectList(null);
String s = JSONObject.toJSONString(commodities);
return JSONArray.parseArray(s);
}
}
PieBackApplication.java 啟動(dòng)類
@MapperScan("com.chenjy.pie_back.mapper.**")
@SpringBootApplication
public class PieBackApplication {
public static void main(String[] args) {
SpringApplication.run(PieBackApplication.class, args);
}
}
2. 后端數(shù)據(jù)渲染前端
2.1 補(bǔ)充1：在 vue 中使用 axios
-
引入依賴
npm install axios -
main.js 全局引入 axios
import axios from 'axios' Vue.prototype.$axios = axios -
使用 axios 發(fā)送 post 請(qǐng)求
getPieData() { const url = 'http://127.0.0.1:8099/pie/getPieData' this.$axios({ method: 'post', url: url, data: null }).then(res => { console.log(res.data) }, err => { console.log('錯(cuò)誤信息：', err.message) }) }那如何用 axios 發(fā)送 GET 請(qǐng)求呢？如下：
testGet() { const url = 'http://127.0.0.1:8099/pie/testGet' this.$axios({ // method: 'get', 默認(rèn) get，可不寫(xiě) url: url, params: { str: '前端發(fā)起一次 get 請(qǐng)求' } }).then(res => { console.log(res.data) }, err => { console.log('錯(cuò)誤信息：', err.message) }) }
2.2. 補(bǔ)充2：Springboot 處理跨域問(wèn)題
-
解決跨域問(wèn)題
在后臺(tái)新加一個(gè)配置類@Configuration public class config implements WebMvcConfigurer { @Override public void addCorsMappings(CorsRegistry registry) { registry.addMapping("/**") .allowedOriginPatterns("*") .allowCredentials(true) .allowedMethods("GET", "POST", "DELETE", "PUT", "PATCH") .maxAge(3600); } }
2.3. 修改前端代碼
2.3.1 修改餅圖樣式
假數(shù)據(jù)先不去掉，后續(xù)把方法加上了再去掉。文章來(lái)源：http://www.zghlxwxcb.cn/news/detail-707539.html
pieOption : {
title: {
show: true,
text: '商品收益',
x: 'left',
y: 'top'
},
tooltip: {
trigger: 'item'
},
legend: {
orient: 'vertical',
x: 'right',
y: 'center',
align: 'left',
icon: 'circle',
},
series: [
{
type: 'pie',
radius: ['60%', '70%'],
roseType: 'area',
avoidLabelOverlap: false,
itemStyle: {
borderRadius: 10,
borderColor: '#fff',
borderWidth: 2
},
label: {
show: false,
position: 'center'
},
labelLine: {
show: false
},
data: [
{ value: 1048, name: 'Search Engine' },
{ value: 735, name: 'Direct' },
{ value: 580, name: 'Email' },
{ value: 484, name: 'Union Ads' },
{ value: 300, name: 'Video Ads' }
]
}
]
},
}
2.3.2 調(diào)用后臺(tái)數(shù)據(jù)渲染餅圖
<template>
<div>
<div class="charts">
<div id="comPie" style="height: 400px; width: 44em" />
</div>
</div>
</template>
<script>
export default {
name: 'myPie',
data () {
return {
pieOption : {
title: {
show: true,
text: '商品收益',
left: 100,
},
tooltip: {
trigger: 'item',
formatter: '  n5n3t3z% <br> 商品收益}  {c}',
},
legend: {
orient: 'vertical',
right: 80,
top: 100,
align: 'left',
icon: 'circle',
data:[],
},
series: [
{
type: 'pie',
radius: ['60%', '70%'],
roseType: 'area',
avoidLabelOverlap: false,
itemStyle: {
borderRadius: 10,
borderColor: '#fff',
borderWidth: 2
},
label: {
show: false,
position: 'center'
},
labelLine: {
show: false
},
data: []
}
]
},
}
},
mounted () {
this.getPieData()
},
methods: {
// 每次給餅圖傳入新的數(shù)據(jù)之后都要調(diào)用這個(gè)函數(shù)來(lái)重新渲染餅圖
showPie () {
// 指定 echarts 圖表初始化的容器
const pieCharts = this.$echarts.init(document.querySelector('#comPie'))
// 渲染 echarts
pieCharts.setOption(this.pieOption, true)
},
// 調(diào)用后臺(tái)獲取餅圖數(shù)據(jù)，并重新渲染餅圖
getPieData() {
const url = 'http://127.0.0.1:8099/pie/getPieData'
this.$axios({
method: 'post',
url: url,
data: null
}).then(res => {
const datas = res.data
this.setPieData(datas)
this.showPie()
}, err => {
console.log('錯(cuò)誤信息：', err.message)
})
},
// 根據(jù)傳入數(shù)據(jù)給餅圖參數(shù)賦值
setPieData(datas) {
// 根據(jù) arrays 配置 option 的 legend 和 series.data 的數(shù)據(jù)
const data = Array.from(datas)
const legendArr = []
const seriesArr = []
for (let i = 0; i < data.length; i++) {
const seriesObj = {}
legendArr.push(data[i].name)
seriesObj.value = data[i].income
seriesObj.name = data[i].name
seriesArr.push(seriesObj)
}
this.pieOption.legend.data = legendArr
this.pieOption.series[0].data = seriesArr
}
},
}
</script>
<style scoped type="text/less">
#channelPie {
margin-top: 1em;
}
button {
width: 80px;
height: 30px;
border: 1px solid #2a69ee;
border-radius: 5px;
font: normal normal 14px 微軟雅黑;
color: #2a69ee;
background-color: white;
}
.charts {
display: flex;
justify-content: center;
}
</style>
2.3.3 改造成內(nèi)外兩個(gè)圈
如果要弄成內(nèi)外兩個(gè)圈的餅圖，可以在 series 中再加一個(gè)數(shù)組：文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-707539.html
series: [
{
name: '商品收益',
type: 'pie',
radius: ['60%', '70%'],
roseType: 'area',
avoidLabelOverlap: false,
itemStyle: {
borderRadius: 10,
borderColor: '#fff',
borderWidth: 2
},
label: {
show: false,
position: 'center'
},
labelLine: {
show: false
},
data: []
},
{
name: '商品收益',
type: 'pie',
radius: '35%',
// roseType: 'area',
avoidLabelOverlap: false,
itemStyle: {
borderRadius: 10,
borderColor: '#fff',
borderWidth: 2
},
label: {
show: false,
position: 'center'
},
labelLine: {
show: false
},
data: []
}
]
},
setPieData(datas) {
// 根據(jù) arrays 配置 option 的 legend 和 series.data 的數(shù)據(jù)
const data = Array.from(datas)
const legendArr = []
const seriesArr = []
for (let i = 0; i < data.length; i++) {
const seriesObj = {}
legendArr.push(data[i].name)
seriesObj.value = data[i].income
seriesObj.name = data[i].name
seriesArr.push(seriesObj)
}
到了這里，關(guān)于動(dòng)態(tài)渲染 echarts 餅圖（vue 2 + axios + Springboot）的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
