In the background management system, charts are a very common element. Currently commonly used icon plug-ins are charts, Echarts, highcharts. This time, we will introduce the application of Echarts in the Vue project.
1. Install plug-ins
Install Echarts using cnpm
cnpm install echarts -S
Similar to the axios introduced earlier, echarts cannot be called globally through ()
Usually it is directly introduced in .vue files that require the use of charts
import echarts from 'echarts'
You can also introduce it in , and then modify the prototype chain
.$echarts = echarts
Then it can be used globally
let myChart = this.$(('myChart'))2. Create a chart
First, you need to create a container for the chart in HTML
It should be noted that the container of the chart must specify the width and height, that is, width and height cannot use percentage, only px
This is indeed not flexible enough, but we can use js to change width and height to make the chart container adaptable. For specific implementation, please look at it later.
Then create a chart in mounted for specific configuration referenceOfficial Documentation, I won't repeat it here
3. Introduce on demand
The echarts introduced above contain all the charts, but sometimes we only need one or two basic charts, and the complete echarts appear to be cumbersome.
If you only need to create a pie chart, you can do this:
// Introduce basic templates let echarts = require('echarts/lib/echarts')
// Introduce pie chart component require('echarts/lib/chart/pie')
// Introduce prompt boxes and legend components require('echarts/lib/component/tooltip')
require('echarts/lib/component/legend')The reason why you use require instead of import is that require can be directly searched from node_modules, and import must write the path all
See the list of modules that can be introduced on demand/ecomfe/echarts/blob/master/
4. Adapt container
As mentioned above, the container of the chart must be fixed in width and height, which is indeed a rather strange setting.
To solve this problem, you need to add another container to the outside of the chart container, and the width and height of this outer container can adapt to the page. The above <div class="charts"> is such an external container
let chartBox = ('charts')[0]
let myChart = ('myChart')
// Used to make chart adaptive height and width, calculate the container height and width through the form height and widthfunction resizeCharts () {
= + 'px'
= + 'px'
}
// Set the container height and widthresizeCharts()
let mainChart = (myChart)
(options)
When the page is loaded, assign the width and height of the outer container to the chart container
But this only solves the adaptive problem when the page is loading
If the chart is still required to adapt to the width and height of the page after the page is loaded, you need to use echartsMedia Inquiry
The above is all the content of this article. I hope it will be helpful to everyone's study and I hope everyone will support me more.