Shulou(Shulou.com)06/02 Report--

This article mainly introduces the Echart chart in the front and back of the project how to use, has a certain reference value, interested friends can refer to, I hope you can learn a lot after reading this article, the following let the editor with you to understand.

I. Project structure

My article will cover the use of the tables in the picture, and if you have learned it all, you can go to the Echart website to use a more advanced cool watch.

2. Enter the official website of the Echart Society for self-Analysis 2.1 Echart official documents

Echart official website

Enter the official website

Access to all instances

Click on the basic line chart

These are the steps you need to use Echart charts.

2.2 basic code knowledge of Echart

We introduce the basic fold diagram to explain:

Import * as echarts from 'echarts';// introduces the echarts resource var chartDom = document.getElementById (' main'); / / locate the block var myChart = echarts.init (chartDom) of the front-end id=main shown in your chart; / / initialize the chart var option in the front-end block / / Chart object option = {xAxis: {/ / the x-axis type in the icon object: 'category', / / Line type data: [' Mon', 'Tue',' Wed', 'Thu',' Fri', 'Sat',' Sun'] / / data on the current axis}, yAxis: {/ / the y-axis type in the icon object: 'value' / / type is value} Series: [{/ / the object value corresponding to the x axis For example, 'Mon' to' 150 'data: [150,230,224,218,135,147,260], type:' line' / / type is line}]} Option & & myChart.setOption (option); / / storing the option object in chart,setOption means modification. Third, the line chart uses 3.1 basic line chart.

Front-end implementation:

Create a .vue file

Define a front-end code block that displays the chart

Positioning id

Initialize chart

Define option object

Call the creation method

Create a .vue file

Page structure:

/ / the divexport default {/ / JS code block framework data () {return {}} of the table is put here

Define a front-end code block that displays the chart

Export default {data () {return {}

Locate id and initialize chart

Import * as echarts from 'echarts';export default {data () {return {}}, mounted () {this.getchart (); / / define an interface method to call in methods}, methods: {/ / Chart method getchart () {/ / get 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,2185,135,147,260], type: 'line'}]} Option & & myChart.setOption (option) / / generate charts through the setOption () method},},} .generalStyle {width: 100%; height: 90%;}

Running result:

Now our front-end can be displayed, but the front-end data is written to death, how can we call the back-end to achieve the front-end interaction of the data?

Backend implementation:

Analyze the front-end code

Front-end writing request method

Front-end replacement data

Write back-end methods

Analyze the front-end code:

Write request method

We write the code to request the 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 iconfrontimport'. / assets/font/iconfont.css'// Import axiosimport axios from 'axios'Vue.prototype.$echarts = window.echarts// mount axios to Vue prototype prototype $httpVue.prototype.$http = axios// setup request root path axios.defaults.baseURL = "http://localhost:9000/" / / change the project online to the domain name of the background server The domain name can be bound to axios.interceptors.request.use (config = > {console.log (config)). / / request header mount information config.headers.Authorization = window.sessionStorage.getItem ("flag"); / / must be return config return config;} at the end) Vue.config.productionTip = falsenew Vue ({router, render: h = > h (App)}). $mount ('# app')

Then go back to the vue page you just created and write the API request method:

Define the xre _ ydata variable in data

Data () {return {xdata: [], / / Save the x-axis coordinate data returned by the API ydata: [] / / Save the y-axis coordinate data returned by the API}}

Writing interface methods in methods

/ / call the backend interface async getSendata () {const {data: res} = await this.$http.post ("api/echartdata") / / call the interface if (rescheduling null) {/ / the backend defines a linked list of saved strings through', 'split, return an array, or return an array linked list this.xdata = res [0] .split (",") / / res is a linked list type, the first element holds the x-axis data this.ydata = res [1] .split (","); / / res is a linked list type, and the second element saves the y-axis data} this.getchart () / / data acquisition completes reinitializing the table }

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 API

Ydata: [] / / Save the y-axis coordinate data returned by the API

Back-end code

Write interface methods in the controller layer:

@ PostMapping ("/ api/echartdata") public String getchartdata () {String x = "Ali, Tencent, Baidu, JD.com, Meituan"; String y = "200120200160120"; List list = new LinkedList (); list.add (x); list.add (y); String s = JSON.toJSONString (list); System.out.println (s); return s;}

We've got it all written here, and it's running now.

Remember to initialize the interface method before you can get the background data

The front and rear end executes successfully!

Complete code:

Front end:

Import * as echarts from 'echarts';export default {data () {return {xdata: [], / / Save the x-axis coordinate data returned by the API ydata: [] / / Save the y-axis coordinate data returned by the API}}, mounted () {this.getSendata () / / define an interface method to be called in methods}, methods: {/ / call the backend interface async getSendata () {const {data: res} = await this.$http.post ("api/echartdata") / / call the interface if (rescheduling null) {/ / the backend defines a linked list of saved strings through', 'split, return an array, or return an array linked list this.xdata = res [0] .split (",") / / res is a linked list type, the first element holds the x-axis data this.ydata = res [1] .split (","); / / res is a linked list type, and the second element saves the y-axis data} this.getchart () / / data acquisition completes reinitializing the table }, / / Chart method getchart () {/ / get 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},},} .generalStyle {width: 100%; height: 90%;} 3.2 smooth line chart through the setOption () method

We have finished building the code framework in the basic line chart, so we just need to go to the Echart instance and replace our initialization Echart function.

Complete code:

Import * as echarts from 'echarts';export default {data () {return {xdata: [], / / Save the x-axis coordinate data returned by the API ydata: [] / / Save the y-axis coordinate data returned by the API}}, mounted () {this.getSendata () / / define an interface method to be called in methods}, methods: {/ / call the backend interface async getSendata () {const {data: res} = await this.$http.post ("api/echartdata") / / call the interface if (rescheduling null) {/ / the backend defines a linked list of saved strings through', 'split, return an array, or return an array linked list this.xdata = res [0] .split (",") / / res is a linked list type, the first element holds the x-axis data this.ydata = res [1] .split (","); / / res is a linked list type, and the second element saves the y-axis data} this.getchart () / / data acquisition completes reinitializing the table }, / / Chart method getchart () {/ / get 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) },},} .generalStyle {width: 100%; height: 90%;

Execution result:

3.3 area line chart

Needless to say, we will switch directly, but I don't know if you have noticed that the smooth line chart just now has an attribute added to the series with the basic line chart code:

Series: [{data: [820,932,901,934, 1290, 1330, 1320], type: 'line', smooth: true / / enable smoothing}]

So the area line chart only needs to modify the properties in series.

Series: [{data: [820,932,901,934, 1290, 1330, 1320], type: 'line', areaStyle: {} / / area attribute}]

Depending on the effect:

3.4 cool combination chart

In the same way, instead of initializing the table, you can do whatever you want by replacing the data with the data returned by the back-end interface!

Directly introduce the back-end interface into the method and return res

Replace source data

The complete code of the front end:

Import * as echarts from 'echarts';export default {data () {return {xdata: [], / / Save the x-axis coordinate data returned by the API ydata: [] / / Save the y-axis coordinate data returned by the API}}, mounted () {this.getchart () / / define an interface method to call in methods}, methods: {/ / Chart method getchart () {/ / get id and initialize the chart / / call the backend interface const {data: res} = await this.$http.post ("api/echartdata1") / / call the interface whose backend interface is 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:'{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);},},} .generalStyle {width: 100%; height: 90%;}

Complete backend 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 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:

Thank you for reading this article carefully. I hope the article "how to use the Echart Chart in the front and back of the project" shared by the editor will be helpful to everyone. At the same time, I also hope that you will support and pay attention to the industry information channel. More related knowledge is waiting for you to learn!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.