Every installation

npm install echarts --save
Copy the code

Introduced and initialized in the component

Prepare a container in the template

<template>
    <div id="line-charts" style="height: 400px;" ></div>
</template>
Copy the code

import * as echarts from 'echarts' const _debounce = require('lodash/debounce') export default { name: 'LineCharts', data() { return { chart: null } }, mounted() { this.initLineCharts() }, beforeDestroy() { this.destroyChart() }, methods: {initLineCharts() {// Based on the prepared DOM, Chart = echarts.init(document.getelementById ('line-charts')) const option = { Title: {text: 'title'}, tooltip: xAxis: {}, {data: [' shirts' and 'sweater', 'snow spins unlined upper garment,' pants', 'high heels',' socks']}, yAxis: {}, the series: [{name: 'sales ', type: 'bar', data: [20, 30, 50, 60, 70, 80] } ] } this.chart.setOption(option) }, DestroyChart () {if(this.chart) {this.chart.dispose() this.chart = null}}}}Copy the code

Asynchronously request and modify the diagram

In a real scenario, our data comes from the back end, we need to send a request, get the data, and render it to the page

Export default {mounted() {this.updateseries (); }, methods: {// omit other code... updateSeries() { this.getList() .then(list => { if (list && Array.isArray(list)) { if (this.chart) { const option = Series [0].data = list this.chart.clear() this.chart.setoption (option)} }}, getList() {return new Promise(resolve, reject) => { SetTimeout (() => {const list = new Array(6).fill(1).map(_ => parseInt(math.random () * 100)) resolve(list)}, 300)})}, initLineCharts() {// Based on the prepared DOM, Chart = echarts.init(document.getelementById ('line-charts')) const option = { Title: {text: 'title'}, tooltip: xAxis: {}, {data: [' shirts' and 'sweater', 'snow spins unlined upper garment,' pants', 'high heels',' socks']}, yAxis: {}, the series: [{name: 'sales ', type: 'bar', // data: []}]} this.chart.setoption (option)}}Copy the code

Listen to the window and resize the chart

There is an experience problem. When we change the browser window size, the chart does not automatically scale, which requires us to listen for the browser window change and change the chart size as it changes

// omit other code... // const _debounce = require('lodash/debounce') export default {name: {return {debounceResizeHandler: null}}, mounted() {// omit other code... This.addresizelistener ()}, beforeDestroy() {// omit other code... Enclosing removeResizeListener ()}, the methods: {/ / omit other code... addResizeListener() { this.debounceResizeHandler = _debounce(() => { this.resize() }, 200) window.addEventListener('resize', this.debounceResizeHandler) }, removeResizeListener() { if(this.debounceResizeHandler) { window.removeResizeListener('resize', Enclosing debounceResizeHandler)}}, / / screen size change, reset the size of the resize () {enclosing chart && enclosing chart. The resize ()}}}Copy the code

Complete sample

<template> <div> <el-button type="primary" size="mini" @click="updateSeries"> </el-button> 400px;" id="line-charts"></div> </div> </template> <script> import * as echarts from 'echarts' const _debounce = require('lodash/debounce') export default { name: 'LineCharts', data() { return { chart: null, loading: false, debounceResizeHandler: null } }, mounted() { this.initLineCharts() this.addResizeListener() this.updateSeries() }, beforeDestroy() { this.removeResizeListener() this.destroyChart() }, methods: { updateSeries() { this.getList() .then(list => { if (list && Array.isArray(list)) { if (this.chart) { const option = This.chart.getoption () // Replace option.series[0]. Data = list this.chart.clear() this.chart.setOption(option) } } }) }, getList() { return new Promise((resolve, Reject) => {const list = new Array(6).fill(1).map(_ => parseInt(math.random () * 100)) Resolve (list)}, 300)})}, initLineCharts() {// Based on the prepared DOM, Chart = echarts.init(document.getelementById ('line-charts')) const option = { Title: {text: 'title'}, tooltip: xAxis: {}, {data: [' shirts' and 'sweater', 'snow spins unlined upper garment,' pants', 'high heels',' socks']}, yAxis: {}, the series: [{name: 'sales ', type: 'bar', data: [] } ] } this.chart.setOption(option) }, addResizeListener() { this.debounceResizeHandler = _debounce(() => { this.resize() }, 200) window.addEventListener('resize', this.debounceResizeHandler) }, removeResizeListener() { if(this.debounceResizeHandler) { window.removeResizeListener('resize', Enclosing debounceResizeHandler)}}, / / the screen size changes, Resize () {this.chart && this.chart. Resize ()}, DestroyChart () {if(this.chart) {this.chart.dispose() this.chart = null}}}} </script>Copy the code