Can vue.js use echarts?

vue.js can use echarts. The specific operation method: 1. Enter the "npm install echarts --save" command in the console to install the echarts dependency; 2. Import it globally in main.js and you can use it. echarts creates charts.

The operating environment of this tutorial: windows7 system, vue2.9 version, this method is suitable for all brands of computers.

Related recommendations: "vue.js Tutorial"

I need to use echarts in my recent work, because the project is developed using vue-cli. I found vue-echarts synthesized in vue on the Internet, but I didn’t want to use the data format specified in vue, so I made a simple demo of the vue project referencing native echarts. The implementation process is as follows: Two implementation methods are used

Preparation

1. Install echarts dependencies

Console input: npm install echarts --save

2. Global introduction

Introduced into main.js

import echarts from 'echarts'
Vue.prototype.$echarts = echarts

Create chart

The first way to create

In a Introduce multiple charts into the .vue file

Create WelcomePage.vue

The effect is as shown below:

The second implementation method (In the form of components)

Create parent component father.vue

 
{{ msg }}
 
第二种方式：通过组件的方式进行页面渲染
 

  
 

 

  
 

 

Create subcomponent barGraph.vue

 

 
{{ msg }}
 

  

 
 

Create pieGraph.vue

Effect The implementation is as follows:

The routing file is as follows:

import WelcomePage from '@/components/WelcomePage'
import Father from '@/components/father'

import BarGraph from '@/components/bargraph'
import PieGraph from '@/components/piegraph'

export default new Router({
 routes: [
 {
  path: '/',
  name: 'WelcomePage',
  component: WelcomePage
 },
 {
  path: '/father',
  name: 'father',
  component: Father,
  children:[
  {
   path: '/bargraph',
   name: 'bargraph',
   component: BarGraph
  },
  {
   path: '/piegraph',
   name: 'piegraph',
   component: PieGraph
  }
  ]
 },
 ]
})

For more programming-related knowledge, please visit: Programming teaching! !

The above is the detailed content of Can vue.js use echarts?. For more information, please follow other related articles on the PHP Chinese website!