How to use Vue+Echarts to realize simple Line Chart

In this article Xiaobian for you to introduce in detail "how to use Vue+Echarts to achieve a simple line chart", the content is detailed, the steps are clear, the details are handled properly, I hope this "how to use Vue+Echarts to achieve a simple line chart" article can help you solve your doubts, following the editor's ideas slowly in-depth, together to learn new knowledge.

Vue+Echarts implements a line chart and opens the vue project:

1. Install echarts in the project

Npm install echarts-save

2. Introduce where diagrams are needed

Import echarts from 'echarts'

3. Open my.vue

Continue to write the code as follows:

Import echarts from 'echarts' export default {name:', data () {return {charts:', / * opinion: ["1", "3", "3", "4", "5"], * / opinionData: ["3", "2", "4", "4" "5"]}, methods: {drawLine (id) {this.charts = echarts.init (document.getElementById (id)) this.charts.setOption ({tooltip: {trigger: 'axis'}) Legend: {data: ['nearly seven days earnings']}, grid: {left:'3% earnings, right:'4% earnings, bottom:'3%' ContainLabel: true}, toolbox: {feature: {saveAsImage: {} XAxis: {type: 'category', boundaryGap: false, data: ["1", "2", "3", "4", "5"]} YAxis: {type: 'value'}, series: [{name:' recent seven-day earnings', type: 'line', stack:' total' Data: this.opinionData}]}}, / / call mounted () {this.$nextTick (function () {this.drawLine ('main')})}} * {margin: 0 Padding: 0; list-style: none;}

At this time, you can see that the loaded line chart can be further improved later.

This is the most basic line chart. If the line points need to be replaced, you should pay attention to some things.

As shown in the following code

Import {getorder} from'. / api/api.js' import echarts from 'echarts' export default {name:', data () {return {charts:'', / * opinion: ["1", "3", "3", "4", "5"] * / / opinionData: ["3", "2", "4", "4", "5"] opinionData: [], temp: [], id:1,}} Methods: {drawLine (id) {/ / the front end sends the request to the back end Get data (break point) / / send request should be written in the drawLine method, otherwise opinionData can not give data, do useless work / / params are some parameters to be passed to the backend, in order to obtain the data in the database To replace it with your own parameter let params = {typ:9,id:this.id} / / this is my personal axios encapsulation, if you are interested You can read my axios encapsulated article getorder (params). Then ((result) = > {this.temp = result.data.tempdic / / console.log (this.temp) / / assign for (let I = 0) I < this.temp.length ITunes +) {var str =''str + = this.temp [I] .temp this.opinionData.push (str) / / console.log (this.temp [I] .temp)} / / the code included in the line chart This.charts = echarts.init (document.getElementById (id)) this.charts.setOption ({tooltip: {trigger: 'axis'}) Legend: {data: ['temperature display']}, grid: {left:'3%, right:'4%, bottom:'3%' ContainLabel: true}, toolbox: {feature: {saveAsImage: {} XAxis: {type: 'category', boundaryGap: false, data: []}, yAxis: {type:' value' }, series: [{name: 'temperature display', type: 'line', stack:' total' Data: this.opinionData}]})})}} / / call mounted () {this.$nextTick (function () {this.drawLine ('main')})} * {margin: 0 Padding: 0; list-style: none;} read here, this article "how to use Vue+Echarts to achieve a simple line chart" article has been introduced, want to master the knowledge of this article also need to practice and use in order to understand, if you want to know more related articles, welcome to follow the industry information channel.