preface
As the saying goes, “To do a good job, you must sharpen your tools.” Today there are many mature and easy-to-use visualization solutions, such as ECharts, AntV and so on. We can think of these solutions as a mature set of “tools,” but how do we apply these “tools” to the two most popular front-end frameworks today?
Now let’s use ECharts as an example to try out a variety of uses of the word “tool.”
Use ECharts in Vue
First we need to download ECharts:
npm install echarts --save
Copy the codeGlobal references
The advantage of global references is that once we have introduced ECharts into the project, we can use ECharts in any component.
First introduce ECharts in the project main.js and then bind it to the vue prototype:
import echarts from 'echarts'
Vue.prototype.$echarts = echarts
Copy the codeNow we can reference ECharts in the component we want to use:
<template>
<div>
<div id="myChart"></div>
</div>
</template>
<script>
export default{
name: 'chart'.
data () {
return {
chart: null,
options: {}
}
},
mounted () {
this.initOptions()
this.initCharts()
},
methods: {
initOptions () {
this.options = {
xAxis: {
type: 'category'.
data: ['Mon'.'Tue'.'Wed'.'Thu'.'Fri'.'Sat'.'Sun']
},
yAxis: {
type: 'value'
},
series: [{
data: [820, 932, 901, 934, 1290, 1330, 1320],
type: 'line'
}]
}
},
initCharts () {
this.chart = this.$echarts.init(document.getElementById('myChart'))
this.chart.setOption(this.options)
}
}
}
</script>
<style scoped>
#myChart{
width: 400px;
height: 400px;
}
</style>
Copy the codeLook at the results:
On-demand reference
A global reference is a complete introduction of Echarts, which has the disadvantage of introducing a lot of additional configuration files that are not useful and can cause the project to become too large. If it takes too long for resources to load, it will also affect the experience of people who like to be fast and fast.
To solve the above problems, we can adopt an on-demand approach. If you have a lot of pages to use
Echarts, we’ll introduce this in main.js:
let echarts = require('echarts/lib/echarts')
require('echarts/lib/chart/line')
require('echarts/lib/component/tooltip')
require('echarts/lib/component/title')
Vue.prototype.$echarts = echarts
Copy the codeIf only for occasional page references, it can also be introduced separately in.vue:
<script>
let echarts = require('echarts/lib/echarts')
require('echarts/lib/chart/line')
require('echarts/lib/component/tooltip')
require('echarts/lib/component/title')
</script>
Copy the codeThen change the Echarts configuration:
this.options = {
title: {
text: "Test Form"
},
tooltip: {
trigger: 'axis'
},
xAxis: {
type: 'category'.
data: ['Mon'.'Tue'.'Wed'.'Thu'.'Fri'.'Sat'.'Sun']
},
yAxis: {
type: 'value'
},
series: [{
data: [820, 932, 901, 934, 1290, 1330, 1320],
type: 'line'
}]
}
Copy the code
Ref for DOM
As you can see from the above examples, getElementById() is used to get the div of the rendered diagram, and ref is also used to manipulate the actual DOM. We make the following changes to the code:
<template>
<div>
<div id="myChart" ref="myChart"></div>
</div>
</template>
Copy the codeinitCharts () {
// this.chart = this.$echarts.init(document.getElementById('myChart'))
this.chart = this.$echarts.init(this.$refs.myChart)
this.chart.setOption(this.options)
}
Copy the codeThe end result is the same
React uses ECharts
React uses ECharts in much the same way as Vue, except in a slightly different way
All the introduction of
chart.jsx
import React, { Component } from 'react';
import echarts from 'echarts'
import './chart.less';
export class App extends Component {
constructor(props) {
super(props);
this.state = {
data:[820, 932, 901, 934, 1290, 1330, 1320]
}
}
componentDidMount() {
this.initCharts();
}
/ / initialization
initCharts = () => {
let myChart = echarts.init(document.getElementById('myChart'));
let option = {
title: {
text: "Test table -react"
},
tooltip: {
trigger: 'axis'
},
xAxis: {
type: 'category'.
data: ['Mon'.'Tue'.'Wed'.'Thu'.'Fri'.'Sat'.'Sun']
},
yAxis: {
type: 'value'
},
series: [{
data: this.state.data,
type: 'line'
}]
};
myChart.setOption(option);
window.addEventListener("resize".function () {
myChart.resize();
});
}
render() {
return (
<div className="chart">
<div id="myChart"></div>
</div>
)
}
}
Copy the codechart.less
.chart{
display: flex;
flex: 1;
#myChart{
width: 400px;
height: 400px;
}
}
Copy the codeThe effect
According to the need to introduce
In React, if ECharts were introduced in its entirety, it would also face the negative impact of large project packages. ECharts can also be introduced in React on demand, similar to Vue
import echarts = 'echarts/lib/echarts'
import 'echarts/lib/chart/line'
import 'echarts/lib/component/tooltip'
import 'echarts/lib/component/title'
Copy the codeUsed in react-hooks
In the old days without hooks, we wrote code in a class, just like the above method. But now that Hook is a good thing, why not use it?
import React, { useEffect, useRef } from 'react';
import echarts from 'echarts';
function MyChart () {
const chartRef = useRef()
let myChart = null
const options = {
title: {
text: "Test table-react-hook"
},
tooltip: {
trigger: 'axis'
},
xAxis: {
type: 'category'.
data: ['Mon'.'Tue'.'Wed'.'Thu'.'Fri'.'Sat'.'Sun']
},
yAxis: {
type: 'value'
},
series: [{
data: [820, 932, 901, 934, 1290, 1330, 1320],
type: 'line'
}]
}
function renderChart() {
const chart = echarts.getInstanceByDom(chartRef.current)
if (chart) {
myChart = chart
} else {
myChart = echarts.init(chartRef.current)
}
myChart.setOption(options)
}
useEffect(() => {
renderChart()
return() = > {
myChart && myChart.dispose()
}
})
return (
<>
<div style={{width: "400px", height: "400px"}} ref={chartRef} />
</>
)
}
export default MyChart
Copy the codeSee the effect
Now that we’ve successfully referenced Echarts in the Hook, why not pull the code out and make it reusable? We can pass some data as parameters according to the actual situation:
useChart.js
import React, { useEffect } from 'react';
import echarts from 'echarts';
function useChart (chartRef, options) {
let myChart = null;
function renderChart() {
const chart = echarts.getInstanceByDom(chartRef.current)
if (chart) {
myChart = chart
} else {
myChart = echarts.init(chartRef.current)
}
myChart.setOption(options)
};
useEffect(() => {
renderChart()
}, [options])
useEffect(() => {
return() = > {
myChart && myChart.dispose()
}
}, [])
return
}
export default useChart
Copy the codeNext quote we just pulled out of the good Hook:
import React, { useRef } from 'react'
import useChart from './useChart'
function Chart () {
const chartRef = useRef(null)
const options = {
title: {
text: "Test table react-hook extraction"
},
tooltip: {
trigger: 'axis'
},
xAxis: {
type: 'category'.
data: ['Mon'.'Tue'.'Wed'.'Thu'.'Fri'.'Sat'.'Sun']
},
yAxis: {
type: 'value'
},
series: [{
data: [820, 932, 901, 934, 1290, 1330, 1320],
type: 'line'
}]
}
useChart (chartRef, options)
return (
<>
<div style={{width: "400px", height: "400px"}} ref={chartRef} />
</>
)
}
export default Chart
Copy the code
The last
This article summarizes the basic use of ECharts as an efficient tool for data visualization in several popular front-end frameworks today. I believe that this aspect of contact with less small partners should still have certain help drops ~
If the article has deficiencies or better suggestions, welcome to put forward, we discuss ~
Copyright by xmanlin. Commercial reprint please contact the author for authorization, non-commercial reprint please indicate the source.
– END –