Some problems encountered when using echarts, help me to solve this article, mark the source address: www.cnblogs.com/yyzhiqiu/p/… Before we start, I’ll lick the wave echarts. Ali’s G2 and Baidu’s Echarts are both very good. Echarts is easy to get started, has many users, documents and a good ecological environment. Therefore, Echarts is the first choice for small and medium-sized projects. As an aside, I will post both G2 and Echarts, and you can choose them according to your preference.
G2 Official Demo address:
Antv.alipay.com/zh-cn/index…
Echarts official demo address:
echarts.baidu.com/
Now let’s go to the Echarts site and see that the main parameters of the diagram are in the option function, as shown in Figure 1. We can reference option () by placing it in methods in vue.
Figure 1
Open the command line in the project (enter CMD directly in the address bar to open the DOS panel) and enter the command, as shown in Figure 2.
npm install echarts
Figure 2
Open the project, create a views folder, store the parent component index.vue, and create the echartscom.vue child component in the Components folder, as shown in Figure 3. Vue contains option (), which is used to render graphs. Index. Vue stores data. Echartscom. vue references data of index.
Figure 3
That’s it. Code’s better than ME. Look at him, don’t look at me, SKR.
Child component, echartscom.vue
Copy the code 1 2 8 9 76 77 Copy the code
Parent component, index.vue
Copy code 1 2 5 6 20 21 Copy code NPM run dev to see the result, as shown in Figure 4.
Figure 4.
So far, we’ve done most of our work, and now it’s time for the father-son transmission. At present, we use props, but vuex will be discussed later. For small projects, vuex is cumbersome and bulky, so it is not recommended. When a project is large and multiple father-child pages transfer values, Vuex will be like a magic force.
In the parent component, insert the value in data (), and the child component uses the array name of the parent component to pass the value. If you are sure to use Baidu/Google/Bing, you are sure to pass the value.
Props: {2 props: {3 type: Array, 4 default: () => [] 5} 6}, props: {3 props: Array, 4 default: () => [] 5} 6}
Parent component: index.vue
Copy code 1 2 9 10 41 42 Copy code child component: echartscom.vue
Copy the code 1, 2, 8, 9, 77, 78 At this point the browser automatically refreshes to see what the result looks like, as shown in Figure 5.
Figure 5
This article has a lot of content, in fact, the idea is very simple, all the codes are Po out, you can copy the code first run, and then combined with my text to see the code, so that you can master faster.