“This is my 11th day of the Gwen Challenge in November. Check out the details: [Last Gwen Challenge 2021]

ECharts is an open source icon library implemented in JavaScript. It is compatible with most browsers (IE8+) and relies on ZRender (a lightweight Canvas class library) for highly customized data visualization ICONS.

ECharts website address: echarts.apache.org/v4/zh/featu…

I. Installation under Vue project:

npm install echarts --save
Copy the code

Create chart.vue. Find a case code in the documentation on ECharts’ website. Copy it to the chart.vue file.

<template> <div ref="chartDom" style="height:100px"></div> </template> <script> import * as echarts from 'echarts'; Export default {mounted(){var myChart = echarts.init(this.$refs.chartdom); var myChart = echarts.init(this.$refs.chartdom); Mychart.setoption ({title: {text: 'ECharts starting example '}, Tooltip: {}, xAxis: {data: [' shirts' and 'sweater', 'snow spins unlined upper garment,' pants', 'high heels',' socks']}, yAxis: {}, series: [{name: 'sales' type:' bar 'data: [5, 20, 36, 10, 10, 20]}]}) } } </script> <style> </style>Copy the code

3. Declare the Chart component in the form of Components on the required page.

<template> <div> <Chart></Chart> </div> </template> <script> import Chart from ".. /views/Chart.vue"; // Export default {components:{Chart}}; // Export default {components:{Chart}}; </script>Copy the code

4, this time open the page will be able to display the Echart icon. The following figure

Note, however, that when using ICONS, they will start rendering before the template renders, which will distort the display. So we need to listen for changes in the DOM container and then redraw the diagram.

5. Monitor DOM changes.

Here we need to use a third-party library resize-Detector, which will be installed first.

npm install resize-detector --save
Copy the code

However, this kind of listening can trigger multiple times when the browser changes, so we also need to use LoDash to optimize performance.

npm install lodash --save
Copy the code

The encoding is as follows:

<template> <div ref="chartDom" style="height: 400px"></div> </template> <script> import * as echarts from "echarts"; import { addListener, removeListener } from "resize-detector"; import debounce from "lodash/debounce"; export default { created() { this.resize = debounce(this.resize, 300); }, mounted() {this.chart = echarts.init(this.$refs.chartdom); // Add a listener (this.$refs.chartdom, this.resize); SetOption ({title: {text: "ECharts starting example ",}, tooltip: {}, xAxis: {data: [" shirt "and" sweater ", "snow spins unlined upper garment", "pants", "high heels", "socks"],}, yAxis: {}, series: [{name: "sales", type: "bar", data: [5, 20, 36, 10, 10, 20],}); }, beforeDestroy() {// Destroy listener and object removeListener(this.$refs.chartdom, this.resize); this.chart.dispose(); this.chart = null; }, methods: { resize() { console.log("resize()"); // Check how many times this.chart.resize() is called; ,}}}; </script> <style></style>Copy the code

Ok, we’re almost done now.

Ps: If a format warning is reported, install an exLint plugin and change the format with one click.