Echart圖表在項(xiàng)目中的前后端使用詳解
更新時(shí)間：2021年11月24日 14:16:46 作者：沉默著忍受
圖表在我們的項(xiàng)目中可以幫我們很明確的看到我們想要看到的數(shù)據(jù)，本文將主要介紹Echart圖表在項(xiàng)目中前后端使用的詳細(xì)教程，感興趣的同學(xué)可以學(xué)習(xí)一下
前言
圖表在我們的項(xiàng)目中可以幫我們很明確的看到我們想要看到的數(shù)據(jù)，并且通過(guò)操控圖表，可以很快獲得你想要的信息，在b站上同學(xué)們看見(jiàn)一些炫酷的可視化圖表時(shí)否覺(jué)得好炫酷，好牛逼。一看這個(gè)項(xiàng)目就很nb,現(xiàn)在臨近畢業(yè)設(shè)計(jì)階段，學(xué)會(huì)如何使用Echart圖表，或許會(huì)讓你的項(xiàng)目打動(dòng)老師，也會(huì)讓你在編寫(xiě)論文中有話好說(shuō)。在工作中會(huì)一手圖表，在leader眼中你就是個(gè)人才。好了，廢話不多說(shuō)，開(kāi)干!
一、項(xiàng)目架構(gòu)
我的文章會(huì)涉及圖片中的表格使用，如果你都學(xué)會(huì)了，可以去Echart官網(wǎng)使用更高級(jí)炫酷的表了。
二、進(jìn)入Echart官網(wǎng)學(xué)會(huì)自我分析
2.1 Echart官方文檔
進(jìn)入官網(wǎng)
進(jìn)入所有實(shí)例
點(diǎn)擊基礎(chǔ)折線圖
以上就是你在使用Echart圖表所需要的步驟。
2.2 Echart基礎(chǔ)代碼常識(shí)
我們引入基礎(chǔ)折圖來(lái)講解：
import * as echarts from 'echarts';//引入echarts資源
var chartDom = document.getElementById('main');//定位你圖表顯示的前端id=main的塊
var myChart = echarts.init(chartDom);//初始化前端塊中的圖表
var option; //圖表對(duì)象
option = {
xAxis: { //圖標(biāo)對(duì)象中x軸
type: 'category', //線條類型
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] //當(dāng)前軸上的數(shù)據(jù)
},
yAxis: { //圖標(biāo)對(duì)象中y軸
type: 'value' //類型為value
},
series: [
{ //與x軸對(duì)應(yīng)的對(duì)象值，比如‘Mon'對(duì)'150'
data: [150, 230, 224, 218, 135, 147, 260],
type: 'line' //類型是線條
}
]
};
option && myChart.setOption(option); //將option對(duì)象存入chart,setOption的意思就是修改。
三，折線圖使用
3.1 基礎(chǔ)折線圖
前端實(shí)現(xiàn)：
- 創(chuàng)建一個(gè).vue文件
- 定義一個(gè)顯示圖表的前端代碼塊
- 定位id
- 初始化chart
- 定義option對(duì)象
- 調(diào)用創(chuàng)建方法
創(chuàng)建一個(gè).vue文件
頁(yè)面結(jié)構(gòu)：
<template>
//這里放表的div
</template>
<script>
export default{ //JS代碼塊框架
data(){
return{
}
}
}
</script>
定義一個(gè)顯示圖表的前端代碼塊
<template>
<div class="width:600px;height:400;">
<div id="main"></div>
</div>
</template>
<script>
export default{
data(){
return{
}
}
}
</script>
定位id并初始化chart
<template>
<!-- 用來(lái)放echarts圖表的容器，一定要有寬高 -->
<div>
<div id="main" style="height: 300px;width: 400px;"></div>
</div>
</template>
<script>
import * as echarts from 'echarts';
export default {
data (){
return{
}
},
mounted() {
this.getchart();//定義一個(gè)接口方法在methods中調(diào)用
},
methods: {
//圖表方法
getchart() {
//獲取id并初始化圖表
var chartDom = document.getElementById('main');
var myChart = echarts.init(chartDom);
//配置項(xiàng)
var option;
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'
}
]
};
option && myChart.setOption(option)//通過(guò)setOption()方法生成圖表
},
},
}
</script>
<style scoped>
.generalStyle {
width: 100%;
height: 90%;
}
</style>
運(yùn)行結(jié)果：
現(xiàn)在我們前端已經(jīng)可以展示了，但是前端的數(shù)據(jù)是寫(xiě)死的，如何才可以調(diào)用后端來(lái)實(shí)現(xiàn)數(shù)據(jù)的前后端交互呢？
后端實(shí)現(xiàn)：
- 分析前端代碼
- 前端編寫(xiě)請(qǐng)求方法
- 前端替換數(shù)據(jù)
- 編寫(xiě)后端方法
分析前端代碼：
編寫(xiě)請(qǐng)求方法
我們?cè)趍ethods中編寫(xiě)請(qǐng)求接口的代碼，我們用到的是axios。
在我們的vue項(xiàng)目中的main.js中設(shè)置路由，
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import './assets/css/global.css'
// 導(dǎo)入iconfront
import './assets/font/iconfont.css'
// 導(dǎo)入axios
import axios from 'axios'
Vue.prototype.$echarts = window.echarts
// 掛載axios 到Vue的原型prototype的$http
Vue.prototype.$http = axios
// 設(shè)置請(qǐng)求的根路徑
axios.defaults.baseURL = "http://localhost:9000/" //項(xiàng)目上線改為后臺(tái)服務(wù)器域名，即可實(shí)現(xiàn)域名綁定
axios.interceptors.request.use(config => {
console.log(config);
// 請(qǐng)求頭掛載信息
config.headers.Authorization = window.sessionStorage.getItem("flag");
// 在最后必須return config
return config;
})
Vue.config.productionTip = false
new Vue({
router,
render: h => h(App)
}).$mount('#app')
然后回到剛剛創(chuàng)建的vue頁(yè)面編寫(xiě)接口請(qǐng)求方法：
在data中定義下x，ydata變量
data (){
return{
xdata:[], //保存接口返回的x軸坐標(biāo)數(shù)據(jù)
ydata:[] //保存接口返回的y軸坐標(biāo)數(shù)據(jù)
}
},
在methods編寫(xiě)接口方法；
//調(diào)用后端接口
async getSendata(){
const { data: res } = await this.$http.post("api/echartdata"); //調(diào)用后端接口為api/echartdata的接口
if(res!=null){
//后端定義一個(gè)保存字符串的鏈表，通過(guò)‘,'切分,返回一個(gè)數(shù)組,或者后端返回一個(gè)數(shù)組鏈表
this.xdata = res[0].split(","); //res是鏈表類型，第一個(gè)元素保存x軸data
this.ydata = res[1].split(","); //res是鏈表類型，第二個(gè)元素保存y軸data
}
this.getchart() //數(shù)據(jù)獲取完成重新初始表；
},
替換數(shù)據(jù)
將表中的x軸data和y軸data替換為我們?cè)赿ata中定義好的：
xdata:[], //保存接口返回的x軸坐標(biāo)數(shù)據(jù)
ydata:[] //保存接口返回的y軸坐標(biāo)數(shù)據(jù)
后端代碼
在controller層里編寫(xiě)接口方法：
@PostMapping("/api/echartdata")
public String getchartdata(){
String x = "阿里,騰訊,百度,京東,美團(tuán)";
String y = "200,120,200,160,120";
List<String> list = new LinkedList<>();
list.add(x);
list.add(y);
String s = JSON.toJSONString(list);
System.out.println(s);
return s;
}
我們這里就完整的寫(xiě)好了，現(xiàn)在開(kāi)始運(yùn)行；
記得初始化接口方法，才可以拿到后臺(tái)數(shù)據(jù)；
前后端執(zhí)行成功！
完整代碼：
前端：
<template>
<!-- 用來(lái)放echarts圖表的容器，一定要有寬高 -->
<div>
<div id="main" style="height: 300px;width: 400px;"></div>
</div>
</template>
<script>
import * as echarts from 'echarts';
export default {
data (){
return{
xdata:[], //保存接口返回的x軸坐標(biāo)數(shù)據(jù)
ydata:[] //保存接口返回的y軸坐標(biāo)數(shù)據(jù)
}
},
mounted() {
this.getSendata();//定義一個(gè)接口方法在methods中調(diào)用
},
methods: {
//調(diào)用后端接口
async getSendata(){
const { data: res } = await this.$http.post("api/echartdata"); //調(diào)用后端接口為api/echartdata的接口
if(res!=null){
//后端定義一個(gè)保存字符串的鏈表，通過(guò)‘,'切分,返回一個(gè)數(shù)組,或者后端返回一個(gè)數(shù)組鏈表
this.xdata = res[0].split(","); //res是鏈表類型，第一個(gè)元素保存x軸data
this.ydata = res[1].split(","); //res是鏈表類型，第二個(gè)元素保存y軸data
}
this.getchart() //數(shù)據(jù)獲取完成重新初始表；
},
//圖表方法
getchart() {
//獲取id并初始化圖表
var chartDom = document.getElementById('main');
var myChart = echarts.init(chartDom);
//配置項(xiàng)
var option;
option = {
xAxis: {
type: 'category',
data: this.xdata,
},
yAxis: {
type: 'value'
},
series: [
{
data:this.ydata,
type: 'line'
}
]
};
option && myChart.setOption(option)//通過(guò)setOption()方法生成圖表
},
},
}
</script>
<style scoped>
.generalStyle {
width: 100%;
height: 90%;
}
</style>
3.2 平滑折線圖
我們?cè)诨A(chǔ)折線圖里已經(jīng)完成了代碼框架的搭建，所以我們只需要去Echart實(shí)例里將我們初始化Echart函數(shù)換掉就可以；
完整代碼：
<template>
<!-- 用來(lái)放echarts圖表的容器，一定要有寬高 -->
<div>
<div id="main" style="height: 300px;width: 400px;"></div>
</div>
</template>
<script>
import * as echarts from 'echarts';
export default {
data (){
return{
xdata:[], //保存接口返回的x軸坐標(biāo)數(shù)據(jù)
ydata:[] //保存接口返回的y軸坐標(biāo)數(shù)據(jù)
}
},
mounted() {
this.getSendata();//定義一個(gè)接口方法在methods中調(diào)用
},
methods: {
//調(diào)用后端接口
async getSendata(){
const { data: res } = await this.$http.post("api/echartdata"); //調(diào)用后端接口為api/echartdata的接口
if(res!=null){
//后端定義一個(gè)保存字符串的鏈表，通過(guò)‘,'切分,返回一個(gè)數(shù)組,或者后端返回一個(gè)數(shù)組鏈表
this.xdata = res[0].split(","); //res是鏈表類型，第一個(gè)元素保存x軸data
this.ydata = res[1].split(","); //res是鏈表類型，第二個(gè)元素保存y軸data
}
this.getchart() //數(shù)據(jù)獲取完成重新初始表；
},
//圖表方法
getchart() {
//獲取id并初始化圖表
var chartDom = document.getElementById('main');
var myChart = echarts.init(chartDom);
var option;
option = {
xAxis: {
type: 'category',
data:this.xdata
},
yAxis: {
type: 'value'
},
series: [
{
data: this.ydata,
type: 'line',
smooth: true
}
]
};
option && myChart.setOption(option);
},
},
}
</script>
<style scoped>
.generalStyle {
width: 100%;
height: 90%;
}
</style>
執(zhí)行結(jié)果：
3.3 面積折線圖
還是不用多說(shuō)我們直接換，但是剛剛平滑折線圖不知道你有沒(méi)有發(fā)現(xiàn)，就是其實(shí)和基礎(chǔ)的折線圖代碼就在series中加了一個(gè)屬性：
series: [
{
data: [820, 932, 901, 934, 1290, 1330, 1320],
type: 'line',
smooth: true //開(kāi)啟平滑
}
]
所以面積折線圖也只需要修改series中的屬性
series: [
{
data: [820, 932, 901, 934, 1290, 1330, 1320],
type: 'line',
areaStyle: {} //面積屬性
}
]
看效果：
3.4 炫酷組合圖
同樣方法，替換初始化表格的方法，在將數(shù)據(jù)替換為后端接口返回的數(shù)據(jù)就可以為所欲為了！
在方法中直接引入后端接口返回res
將source數(shù)據(jù)替換
前端完整代碼：
<template>
<!-- 用來(lái)放echarts圖表的容器，一定要有寬高 -->
<div>
<div id="main" style="height: 300px;width: 400px;"></div>
</div>
</template>
<script>
import * as echarts from 'echarts';
export default {
data (){
return{
xdata:[], //保存接口返回的x軸坐標(biāo)數(shù)據(jù)
ydata:[] //保存接口返回的y軸坐標(biāo)數(shù)據(jù)
}
},
mounted() {
this.getchart();//定義一個(gè)接口方法在methods中調(diào)用
},
methods: {
//圖表方法
getchart() {
//獲取id并初始化圖表
//調(diào)用后端接口
const { data: res } = await this.$http.post("api/echartdata1"); //調(diào)用后端接口為api/echartdata的接口
var chartDom = document.getElementById('main');
var myChart = echarts.init(chartDom);
var option;
setTimeout(function () {
option = {
legend: {},
tooltip: {
trigger: 'axis',
showContent: false
},
dataset: {
source: [
res[0].split(","),
res[1].split(","),
res[2].split(","),
res[3].split(","),
res[4].split(","),
]
},
xAxis: { type: 'category' },
yAxis: { gridIndex: 0 },
grid: { top: '55%' },
series: [
{
type: 'line',
smooth: true,
seriesLayoutBy: 'row',
emphasis: { focus: 'series' }
},
{
type: 'line',
smooth: true,
seriesLayoutBy: 'row',
emphasis: { focus: 'series' }
},
{
type: 'line',
smooth: true,
seriesLayoutBy: 'row',
emphasis: { focus: 'series' }
},
{
type: 'line',
smooth: true,
seriesLayoutBy: 'row',
emphasis: { focus: 'series' }
},
{
type: 'pie',
id: 'pie',
radius: '30%',
center: ['50%', '25%'],
emphasis: {
focus: 'self'
},
label: {
formatter: ': {@2012} (wppm3vysvbp%)'
},
encode: {
itemName: 'product',
value: '2012',
tooltip: '2012'
}
}
]
};
myChart.on('updateAxisPointer', function (event) {
const xAxisInfo = event.axesInfo[0];
if (xAxisInfo) {
const dimension = xAxisInfo.value + 1;
myChart.setOption({
series: {
id: 'pie',
label: {
formatter: ': {@[' + dimension + ']} (wppm3vysvbp%)'
},
encode: {
value: dimension,
tooltip: dimension
}
}
});
}
});
myChart.setOption(option);
});
option && myChart.setOption(option);
},
},
}
</script>
<style scoped>
.generalStyle {
width: 100%;
height: 90%;
}
</style>
后端完整代碼：
@PostMapping("/api/echartdata1")
public String getchartdata1(){
String data1 = "product, 2012, 2013, 2014, 2015, 2016, 2017";
String data2 = "騰訊, 56.5, 82.1, 88.7, 70.1, 53.4, 85.1";
String data3 = "阿里, 51.1, 51.4, 55.1, 53.3, 73.8, 68.7";
String data4 = "京東, 40.1, 62.2, 69.5, 36.4, 45.2, 32.5";
String data5 = "百度, 25.2, 37.1, 41.2, 18, 33.9, 49.1";
List<String> list = new LinkedList<>();
list.add(data1);
list.add(data2);
list.add(data3);
list.add(data4);
list.add(data5);
String s = JSON.toJSONString(list);
System.out.println(s);
return s;
}
運(yùn)行：
以上就是Echart圖表在項(xiàng)目中的前后端使用詳解的詳細(xì)內(nèi)容，更多關(guān)于Echart圖表使用的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
vue自定義loader將行內(nèi)樣式px轉(zhuǎn)rem適配
這篇文章主要為大家介紹了vue自定義loader將行內(nèi)樣式px轉(zhuǎn)rem適配示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-08-08
本篇文章主要分享了Vue實(shí)現(xiàn)購(gòu)物車功能的實(shí)例代碼。具有很好的參考價(jià)值。下面跟著小編一起來(lái)看下吧2017-04-04
這篇文章主要給大家介紹了如何通過(guò)一篇文章學(xué)會(huì)Vue中間件管道的相關(guān)資料,什么是中間件管道？中間件管道是一堆不同的中間件并行運(yùn)行,本文通過(guò)示例代碼介紹的非常詳細(xì),需要的朋友可以參考下2021-06-06
Vue.js實(shí)現(xiàn)雙向數(shù)據(jù)綁定方法(表單自動(dòng)賦值、表單自動(dòng)取值)
今天小編就為大家分享一篇Vue.js實(shí)現(xiàn)雙向數(shù)據(jù)綁定方法(表單自動(dòng)賦值、表單自動(dòng)取值)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-08-08
vue?navbar?tabbar導(dǎo)航條根據(jù)位置移動(dòng)實(shí)現(xiàn)定位、顏色過(guò)渡動(dòng)畫(huà)效果的代碼
這篇文章主要介紹了vue?navbar?tabbar導(dǎo)航條根據(jù)位置移動(dòng)實(shí)現(xiàn)定位、顏色過(guò)渡動(dòng)畫(huà)效果,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2022-08-08
Vite是一款非常輕量級(jí)的Web開(kāi)發(fā)框架，它可以幫助開(kāi)發(fā)者快速搭建一個(gè)開(kāi)發(fā)環(huán)境。Vite搭建的開(kāi)發(fā)環(huán)境可以提供更快的編譯速度，更少的配置，更好的性能和更多的開(kāi)發(fā)者友好性，使開(kāi)發(fā)者可以更快地構(gòu)建出功能強(qiáng)大的Web應(yīng)用程序。2023-02-02
本文主要介紹了淺談Vue組件及組件的注冊(cè)方法，詳細(xì)的介紹了什么是組件，及其組件注冊(cè)的兩種方式(全局和局部)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2018-08-08
Vue項(xiàng)目如何部署到SpringBoot工程下
這篇文章主要介紹了Vue項(xiàng)目如何部署到SpringBoot工程下問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-07-07
vue中echarts點(diǎn)擊事件點(diǎn)擊一次多次觸發(fā)問(wèn)題
這篇文章主要介紹了vue中echarts點(diǎn)擊事件點(diǎn)擊一次多次觸發(fā)問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-06-06
vue-draggable實(shí)現(xiàn)pc端拖拽效果
這篇文章主要為大家詳細(xì)介紹了vue-draggable實(shí)現(xiàn)pc端拖拽效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-04-04