The basic use

First, introduce Echarts

NPM install Echarts –save to install Echarts

Use Echarts

Import with import in the main.js file, and use

import * as echarts from 'echarts'

Vue.prototype.$echarts = echarts

Third, page development

Create the echarts.vue file, follow the example of the Echarts development document, and use the corresponding diagram directly, such as the ring diagram code as follows:

<template> <! -- Set chart size --><div>
    <div id="main" style="width: 600px; height:400px;"></div> 
  </div>
</template>

<script>
export default {
  name: 'Echarts'.methods: {myEcharts(){   // Create a chart call method
		  // Initializes the echarts instance based on the prepared DOM
		var chartDom = document.getElementById('main');  // Follow the official example
        var myChart = this.$echarts.init(chartDom);   // The official import method needs to be changed
		  var option;
		  // Specify the chart configuration items and data
		 option = {   // Copy and paste the official code directly
    tooltip: {
        trigger: 'item'
    },
    legend: {
        top: '5%'.left: 'center'
    },
    series: [{name: 'Access source'.type: 'pie'.radius: ['40%'.'70%'].avoidLabelOverlap: false.label: {
                show: false.position: 'center'
            },
            emphasis: {
                label: {
                    show: true.fontSize: '40'.fontWeight: 'bold'}},labelLine: {
                show: false
            },
            data: [{value: 1048.name: 'Search engines'},
                {value: 735.name: 'Direct access'},
                {value: 580.name: 'Email marketing'},
                {value: 484.name: 'Affiliate advertising'},
                {value: 300.name: 'Video advertising'}]}]};// Display the chart using the configuration items and data you just specified.
		  myChart.setOption(option);   // Do not use the official method}},mounted() {
  	this.myEcharts();  // Perform data rendering}}</script>
Copy the code

Can generate ring graph

Four, in the need to use the page for use

1. Use import to import pages that need to be used

import Echarts from ‘./.. /views/Echarts’ // Import the required components

2. Register in Components

Components: {‘v-learn’:learn,}, // Register

3. Use it where it is needed

– learn < v > < / v – learn > / / use

Then you can use the Echarts chart!