您好,登錄后才能下訂單哦!
這篇文章主要介紹了Echart圖表在項目中的前后端怎么用,具有一定借鑒價值,感興趣的朋友可以參考下,希望大家閱讀完這篇文章之后大有收獲,下面讓小編帶著大家一起了解一下。
我的文章會涉及圖片中的表格使用,如果你都學(xué)會了,可以去Echart官網(wǎng)使用更高級炫酷的表了。
Echart官網(wǎng)
進(jìn)入官網(wǎng)
進(jìn)入所有實例
點(diǎn)擊基礎(chǔ)折線圖
以上就是你在使用Echart圖表所需要的步驟。
我們引入基礎(chǔ)折圖來講解:
import * as echarts from 'echarts';//引入echarts資源 var chartDom = document.getElementById('main');//定位你圖表顯示的前端id=main的塊 var myChart = echarts.init(chartDom);//初始化前端塊中的圖表 var option; //圖表對象 option = { xAxis: { //圖標(biāo)對象中x軸 type: 'category', //線條類型 data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] //當(dāng)前軸上的數(shù)據(jù) }, yAxis: { //圖標(biāo)對象中y軸 type: 'value' //類型為value }, series: [ { //與x軸對應(yīng)的對象值,比如‘Mon'對'150' data: [150, 230, 224, 218, 135, 147, 260], type: 'line' //類型是線條 } ] }; option && myChart.setOption(option); //將option對象存入chart,setOption的意思就是修改。
前端實現(xiàn):
創(chuàng)建一個.vue文件
定義一個顯示圖表的前端代碼塊
定位id
初始化chart
定義option對象
調(diào)用創(chuàng)建方法
創(chuàng)建一個.vue文件
頁面結(jié)構(gòu):
<template> //這里放表的div </template> <script> export default{ //JS代碼塊框架 data(){ return{ } } } </script>
定義一個顯示圖表的前端代碼塊
<template> <div class="width:600px;height:400;"> <div id="main"></div> </div> </template> <script> export default{ data(){ return{ } } } </script>
定位id并初始化chart
<template> <!-- 用來放echarts圖表的容器,一定要有寬高 --> <div> <div id="main" ></div> </div> </template> <script> import * as echarts from 'echarts'; export default { data (){ return{ } }, mounted() { this.getchart();//定義一個接口方法在methods中調(diào)用 }, methods: { //圖表方法 getchart() { //獲取id并初始化圖表 var chartDom = document.getElementById('main'); var myChart = echarts.init(chartDom); //配置項 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)//通過setOption()方法生成圖表 }, }, } </script> <style scoped> .generalStyle { width: 100%; height: 90%; } </style>
運(yùn)行結(jié)果:
現(xiàn)在我們前端已經(jīng)可以展示了,但是前端的數(shù)據(jù)是寫死的,如何才可以調(diào)用后端來實現(xiàn)數(shù)據(jù)的前后端交互呢?
后端實現(xiàn):
分析前端代碼
前端編寫請求方法
前端替換數(shù)據(jù)
編寫后端方法
分析前端代碼:
編寫請求方法
我們在methods中編寫請求接口的代碼,我們用到的是axios。
在我們的vue項目中的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è)置請求的根路徑 axios.defaults.baseURL = "http://localhost:9000/" //項目上線改為后臺服務(wù)器域名,即可實現(xiàn)域名綁定 axios.interceptors.request.use(config => { console.log(config); // 請求頭掛載信息 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頁面編寫接口請求方法:
在data中定義下x,ydata變量
data (){ return{ xdata:[], //保存接口返回的x軸坐標(biāo)數(shù)據(jù) ydata:[] //保存接口返回的y軸坐標(biāo)數(shù)據(jù) } },
在methods編寫接口方法;
//調(diào)用后端接口 async getSendata(){ const { data: res } = await this.$http.post("api/echartdata"); //調(diào)用后端接口為api/echartdata的接口 if(res!=null){ //后端定義一個保存字符串的鏈表,通過‘,'切分,返回一個數(shù)組,或者后端返回一個數(shù)組鏈表 this.xdata = res[0].split(","); //res是鏈表類型,第一個元素保存x軸data this.ydata = res[1].split(","); //res是鏈表類型,第二個元素保存y軸data } this.getchart() //數(shù)據(jù)獲取完成重新初始表; },
替換數(shù)據(jù)
將表中的x軸data和y軸data替換為我們在data中定義好的:
xdata:[], //保存接口返回的x軸坐標(biāo)數(shù)據(jù)
ydata:[] //保存接口返回的y軸坐標(biāo)數(shù)據(jù)
后端代碼
在controller層里編寫接口方法:
@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àn)在開始運(yùn)行;
記得初始化接口方法,才可以拿到后臺數(shù)據(jù);
前后端執(zhí)行成功!
完整代碼:
前端:
<template> <!-- 用來放echarts圖表的容器,一定要有寬高 --> <div> <div id="main" ></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();//定義一個接口方法在methods中調(diào)用 }, methods: { //調(diào)用后端接口 async getSendata(){ const { data: res } = await this.$http.post("api/echartdata"); //調(diào)用后端接口為api/echartdata的接口 if(res!=null){ //后端定義一個保存字符串的鏈表,通過‘,'切分,返回一個數(shù)組,或者后端返回一個數(shù)組鏈表 this.xdata = res[0].split(","); //res是鏈表類型,第一個元素保存x軸data this.ydata = res[1].split(","); //res是鏈表類型,第二個元素保存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' } ] }; option && myChart.setOption(option)//通過setOption()方法生成圖表 }, }, } </script> <style scoped> .generalStyle { width: 100%; height: 90%; } </style>
我們在基礎(chǔ)折線圖里已經(jīng)完成了代碼框架的搭建,所以我們只需要去Echart實例里將我們初始化Echart函數(shù)換掉就可以;
完整代碼:
<template> <!-- 用來放echarts圖表的容器,一定要有寬高 --> <div> <div id="main" ></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();//定義一個接口方法在methods中調(diào)用 }, methods: { //調(diào)用后端接口 async getSendata(){ const { data: res } = await this.$http.post("api/echartdata"); //調(diào)用后端接口為api/echartdata的接口 if(res!=null){ //后端定義一個保存字符串的鏈表,通過‘,'切分,返回一個數(shù)組,或者后端返回一個數(shù)組鏈表 this.xdata = res[0].split(","); //res是鏈表類型,第一個元素保存x軸data this.ydata = res[1].split(","); //res是鏈表類型,第二個元素保存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é)果:
還是不用多說我們直接換,但是剛剛平滑折線圖不知道你有沒有發(fā)現(xiàn),就是其實和基礎(chǔ)的折線圖代碼就在series中加了一個屬性:
series: [ { data: [820, 932, 901, 934, 1290, 1330, 1320], type: 'line', smooth: true //開啟平滑 } ]
所以面積折線圖也只需要修改series中的屬性
series: [ { data: [820, 932, 901, 934, 1290, 1330, 1320], type: 'line', areaStyle: {} //面積屬性 } ]
看效果:
同樣方法,替換初始化表格的方法,在將數(shù)據(jù)替換為后端接口返回的數(shù)據(jù)就可以為所欲為了!
在方法中直接引入后端接口返回res
將source數(shù)據(jù)替換
前端完整代碼:
<template> <!-- 用來放echarts圖表的容器,一定要有寬高 --> <div> <div id="main" ></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();//定義一個接口方法在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} (ymbyzes%)' }, 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 + ']} (inn2uyn%)' }, 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)行:
感謝你能夠認(rèn)真閱讀完這篇文章,希望小編分享的“Echart圖表在項目中的前后端怎么用”這篇文章對大家有幫助,同時也希望大家多多支持億速云,關(guān)注億速云行業(yè)資訊頻道,更多相關(guān)知識等著你來學(xué)習(xí)!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報,并提供相關(guān)證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權(quán)內(nèi)容。