Uso simples do projeto Echarts no Vue

Instalar dependências do Echarts

npm install echarts -S

Criar gráfico

Primeiro, ele precisa ser introduzido globalmente
no main.js

// 引入 Echarts 
importam echarts do 'echarts' 
Vue.prototype. $ Echarts = echarts

Em index.vue

<template> 
  <div id = "myChart": style = "{width: '500px', height: '500px'}"> </ div> 
</ template> 

<script> padrão de 
exportação padrão { 
  data () { 
    return { 
    } 
  }, 
  mounted () { 
    this .drawLine (); 
  }, 
  métodos: { 
    drawLine () { 
        // Initialize Echarts instance 
        deixe myChart = this . $ echarts.init (document.getElementById ('myChart' ))
         // Desenha o gráfico 
        myChart .setOption ({ 
            title: {text: 'Echarts simples no Vue' }, 
            dica:{}{}, 
            xAxis: {
                data: [ "Camisa", "Cardigan", "Camisa de chiffon", "Calças", "Salto alto", "Meias" ] 
            }, 
            Eixo: {}, 
            série: [{ 
                name: 'Sales' , 
                type: 'bar' , 
                dados: [ 5, 20, 36, 10, 10, 20 ] 
            }] 
        }); 
    } 
  } 
}
 </ script>

Acabamento: acima

 

 

Acho que você gosta

Origin www.cnblogs.com/xudaxian/p/12714513.html
Recomendado
Clasificación