Since echarts is a native js, it is not possible to directly put it into a vue file, and some writing methods need to be changed.
Step 1: Enter echarts official website
Click "Get echarts" in it
Step 2: Install echarts
npm install echarts --save
Step 3: Import (emphasis)
Click on "Quick Start", you can see a case written for us, but it needs to be modified to use it.
First you need to introduce it in main.js
import * as echarts from 'echarts';And mount it on the instance in main.js
Vue.prototype.$echarts=echartsThen in the required components, define a container, in order to put the echarts chart
<body>
<!-- 为 ECharts 准备一个定义了宽高的 DOM -->
<div id="main" style="width: 600px;height:400px;"></div>
</body>Then you need to modify this line of code
First of all, in this line of code, it defines a variable mychart, which needs to be put into data in vue, and a chart is defined in data to store this variable.
The following is echarts.init, which uses the method init in echarts. In Vue, the init method is defined in mothods, and all init needs to be put into mothods. That is, this initialization code should be put into mothods.
A method is defined, and the initialization operation of the chart is performed in the method. Since echarts has been linked to the instance before, the method on the instance needs to use this.$echarts, and the dom element is obtained in vue through the ref attribute. To obtain, it is necessary to bind the ref attribute when defining the box, and use the this.$refs. attribute value to obtain the dom element.
Afterwards, the initialization operation of this method needs to be mounted on the hook function. The mounting of third-party plug-ins is generally done in mounted, and all are initialized in mounted. This can be used in vue.
Friends, come and try it~ヾ(◍°∇°◍)ﾉﾞ