Detailed explanation of the use of Echart charts in the front-end and back-end of the project
PrefaceCharts can help us clearly see the data we want to see in our projects, and by manipulating charts, we can quickly get the information you want. When students see some cool visualization charts on Bilibili, do they think they are so cool and awesome? This project is awesome at first glance. Now that we are approaching the graduation design stage, learning how to use Echart charts may impress your teacher with your project and give you something to say when writing your paper. If you can draw charts at work, you are a talent in the eyes of your leader. Okay, no more nonsense, let’s get started! 1. Project Architecture
My article will involve the use of tables in pictures. If you have learned them all, you can go to the Echart official website to use more advanced and cool tables. 2. Enter Echart official website and learn self-analysis2.1 Echart official documentationEchart official website
Enter the official website
Access all instances
Click on the basic line chart
The above are the steps you need to take to use Echart. 2.2 Basic knowledge of Echart codeWe introduce the basic folding diagram to explain:
import * as echarts from 'echarts'; //Introduce echarts resources var chartDom = document.getElementById('main'); //Locate the block with front-end id=main where your chart is displayed var myChart = echarts.init(chartDom); //Initialize the chart in the front-end block var option; //Chart object option = {
xAxis: { //x-axis in the chart object type: 'category', //line type data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] //data on the current axis},
yAxis: { //y-axis in the icon object type: 'value' //type is value
},
series: [
{ //Object value corresponding to the x-axis, such as 'Mon' to '150'
data: [150, 230, 224, 218, 135, 147, 260],
type: 'line' //The type is line}
]
};
option && myChart.setOption(option); //Store the option object in the chart, setOption means to modify it.
3. Use of line chart3.1 Basic Line ChartFront-end implementation:
Create a .vue file
Page structure:
<template>
//Put the div of the table here
</template>
<script>
export default{ //JS code block framework data(){
return {
}
}
}
</script>
Define a front-end code block that displays a chart
<template>
<div class="width:600px;height:400;">
<div id="main"></div>
</div>
</template>
<script>
export default{
data(){
return {
}
}
}
</script>
Locate the id and initialize the chart
<template>
<!-- The container used to hold the echarts chart must have width and height -->
<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(); //Define an interface method and call it in methods},
methods: {
//Chart method getchart() {
//Get the id and initialize the chart var chartDom = document.getElementById('main');
var myChart = echarts.init(chartDom);
//Configuration item 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) //Generate a chart using the setOption() method},
},
}
</script>
<style scoped>
.generalStyle {
width: 100%;
height: 90%;
}
</style>
Running results:
Now our front-end can be displayed, but the data on the front-end is hard-coded. How can we call the back-end to realize the front-end and back-end data interaction? Backend implementation:
Analyze the front-end code:
Writing request methods We write the code for the request interface in methods, and we use axios. Set up routing in main.js in our vue project,
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import './assets/css/global.css'
// Import iconfront
import './assets/font/iconfont.css'
// Import axios
import axios from 'axios'
Vue.prototype.$echarts = window.echarts
// Mount axios to Vue's prototype prototype's $http
Vue.prototype.$http = axios
// Set the root path of the request axios.defaults.baseURL = "http://localhost:9000/" // Change the domain name of the backend server to realize domain name binding axios.interceptors.request.use(config => {
console.log(config);
// Request header mounting information config.headers.Authorization = window.sessionStorage.getItem("flag");
// At the end, you must return config
return config;
})
Vue.config.productionTip = false
new Vue({
router,
render: h => h(App)
}).$mount('#app')
Then go back to the vue page you just created and write the interface request method: Define x and y data variables in data
data (){
return {
xdata:[], //Save the x-axis coordinate data returned by the interface ydata:[] //Save the y-axis coordinate data returned by the interface }
},
Write interface methods in methods;
//Call the backend interface async getSendata(){
const { data: res } = await this.$http.post("api/echartdata"); //Call the backend interface api/echartdata if (res!=null) {
//The backend defines a linked list to store strings, splits them by ',', and returns an array, or the backend returns an array linked list this.xdata = res[0].split(","); //res is a linked list type, the first element stores the x-axis data
this.ydata = res[1].split(","); //res is a linked list type, the second element stores the y-axis data
}
this.getchart() //Data acquisition is completed and the table is initialized again;
},
Replace data Replace the x-axis data and y-axis data in the table with what we defined in data: xdata:[], //Save the x-axis coordinate data returned by the interface ydata:[] //Save the y-axis coordinate data returned by the interface
Backend code
Write the interface method in the controller layer:
@PostMapping("/api/echartdata")
public String getchartdata(){
String x = "Ali, Tencent, Baidu, JD.com, Meituan";
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;
}
We have written it completely here, and now we start running; Remember to initialize the interface method to get the background data;
The front-end and back-end were executed successfully! Full code: front end:
<template>
<!-- The container used to hold the echarts chart must have width and height -->
<div>
<div id="main" style="height: 300px;width: 400px;"></div>
</div>
</template>
<script>
import * as echarts from 'echarts';
export default {
data (){
return {
xdata:[], //Save the x-axis coordinate data returned by the interface ydata:[] //Save the y-axis coordinate data returned by the interface }
},
mounted() {
this.getSendata(); //Define an interface method and call it in methods},
methods: {
//Call the backend interface async getSendata(){
const { data: res } = await this.$http.post("api/echartdata"); //Call the backend interface api/echartdata if (res!=null) {
//The backend defines a linked list to store strings, splits them by ',', and returns an array, or the backend returns an array linked list this.xdata = res[0].split(","); //res is a linked list type, the first element stores the x-axis data
this.ydata = res[1].split(","); //res is a linked list type, the second element stores the y-axis data
}
this.getchart() //Data acquisition is completed and the table is initialized again;
},
//Chart method getchart() {
//Get the id and initialize the chart var chartDom = document.getElementById('main');
var myChart = echarts.init(chartDom);
//Configuration item var option;
option = {
xAxis:
type: 'category',
data: this.xdata,
},
yAxis: {
type: 'value'
},
series: [
{
data:this.ydata,
type: 'line'
}
]
};
option && myChart.setOption(option) //Generate a chart using the setOption() method},
},
}
</script>
<style scoped>
.generalStyle {
width: 100%;
height: 90%;
}
</style>
3.2 Smooth Line ChartWe have already completed the construction of the code framework in the basic line chart, so we only need to replace our initialization Echart function in the Echart instance;
Full code:
<template>
<!-- The container used to hold the echarts chart must have width and height -->
<div>
<div id="main" style="height: 300px;width: 400px;"></div>
</div>
</template>
<script>
import * as echarts from 'echarts';
export default {
data (){
return {
xdata:[], //Save the x-axis coordinate data returned by the interface ydata:[] //Save the y-axis coordinate data returned by the interface }
},
mounted() {
this.getSendata(); //Define an interface method and call it in methods},
methods: {
//Call the backend interface async getSendata(){
const { data: res } = await this.$http.post("api/echartdata"); //Call the backend interface api/echartdata if (res!=null) {
//The backend defines a linked list to store strings, splits them by ',', and returns an array, or the backend returns an array linked list this.xdata = res[0].split(","); //res is a linked list type, the first element stores the x-axis data
this.ydata = res[1].split(","); //res is a linked list type, the second element stores the y-axis data
}
this.getchart() //Data acquisition is completed and the table is initialized again;
},
//Chart method getchart() {
//Get the id and initialize the chart 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>
Execution Result:
3.3 Area Line ChartLet's change it without further ado. But I don't know if you noticed that the smooth line chart just now has an attribute added to the series, which is the same as the basic line chart code:
series: [
{
data: [820, 932, 901, 934, 1290, 1330, 1320],
type: 'line',
smooth: true //Turn on smoothing}
]
Therefore, the area line chart only needs to modify the attributes in the series
series: [
{
data: [820, 932, 901, 934, 1290, 1330, 1320],
type: 'line',
areaStyle: {} //Area attribute}
]
See the effect:
3.4 Cool combination pictures
Using the same method, replace the method of initializing the table, and then replace the data with the data returned by the backend interface, and you can do whatever you want!
Directly introduce the backend interface to return res in the method Replace the source data Front-end complete code:
<template>
<!-- The container used to hold the echarts chart must have width and height -->
<div>
<div id="main" style="height: 300px;width: 400px;"></div>
</div>
</template>
<script>
import * as echarts from 'echarts';
export default {
data (){
return {
xdata:[], //Save the x-axis coordinate data returned by the interface ydata:[] //Save the y-axis coordinate data returned by the interface }
},
mounted() {
this.getchart(); //Define an interface method and call it in methods},
methods: {
//Chart method getchart() {
//Get the id and initialize the chart//Call the backend interface const { data: res } = await this.$http.post("api/echartdata1"); //Call the backend interface api/echartdata interface 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: '{b}: {@2012} ({d}%)'
},
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: '{b}: {@[' + dimension + ']} ({d}%)'
},
encode: {
value: dimension,
tooltip: dimension
}
}
});
}
});
myChart.setOption(option);
});
option && myChart.setOption(option);
},
},
}
</script>
<style scoped>
.generalStyle {
width: 100%;
height: 90%;
}
</style>
Backend complete code:
@PostMapping("/api/echartdata1")
public String getchartdata1(){
String data1 = "product, 2012, 2013, 2014, 2015, 2016, 2017";
String data2 = "Tencent, 56.5, 82.1, 88.7, 70.1, 53.4, 85.1";
String data3 = "Ali, 51.1, 51.4, 55.1, 53.3, 73.8, 68.7";
String data4 = "JD.com, 40.1, 62.2, 69.5, 36.4, 45.2, 32.5";
String data5 = "Baidu, 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;
}
run:  The above is the detailed content of the detailed explanation of the use of Echart charts in the front-end and back-end of the project. For more information on the use of Echart charts, please pay attention to other related articles on 123WORDPRESS.COM! You may also be interested in:
|
<<: Getting Started Tutorial for Beginners⑧: Easily Create an Article Site
>>: The background color or image inside the div container grows as it grows
Recommend
Specific use of the autoindex module in the Nginx Http module series
The main function of the brower module is to dete...
How to install Graphviz and get started tutorial under Windows
Download and installConfigure environment variabl...
IIS7 IIS8 http automatically jumps to HTTPS (port 80 jumps to port 443)
IIS7 needs to confirm whether the "URL REWRI...
Implementation ideas and steps for MySQL master-slave construction (multiple masters and one slave)
background: Since the company's projects seem...
Use dockercompose to build springboot-mysql-nginx application
In the previous article, we used Docker to build ...
The specific use and difference between attribute and property in Vue
Table of contents As attribute and property value...
MySQL data loss troubleshooting case
Table of contents Preface On-site investigation C...
JS achieves five-star praise case
This article shares the specific code of JS to ac...
Very practical Tomcat startup script implementation method
Preface There is a scenario where, for the sake o...
Detailed explanation of the decimal padding problem of decimal data type in MySQL
Preface During the development process, we often ...
Perfect solution to the problem of Windows Server 2012 or 2016 failing to install .NET Framework 3.5 without disk
Problem Description When using Windows Server 201...
Solution to click event failure when using better-scroll on vue mobile development
Recently I used vue to learn to develop mobile pr...
Detailed explanation of the solution to Ubuntu dual system stuck when starting
Solution to Ubuntu dual system stuck when startin...
Detailed explanation of JavaScript progress management
Table of contents Preface question principle test...
MySQL Optimization Summary - Total Number of Query Entries
1. COUNT(*) and COUNT(COL) COUNT(*) usually perfo...