Uso simple de Echarts en el proyecto Vue

Instalar dependencias de Echarts

npm install echarts -S

Crear gráfico

Primero necesita ser introducido globalmente
en main.js

// 引入Echarts
import echarts from 'echarts'
Vue.prototype.$echarts = echarts

En index.vue

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

<script> 
export default { 
  data () { 
    return { 
    } 
  }, 
  montado () { 
    this .drawLine (); 
  }, 
  métodos: { 
    drawLine () { 
        // Inicializar instancia de 
        Echarts let myChart = this . $ echarts.init (document.getElementById ('myChart' ))
         // Dibujar gráfico 
        myChart .setOption ({ 
            title: {text: 'Simple Echarts in Vue' }, 
            descripción emergente :{},{}, 
            xAxis: {
                datos: [ "Camisa", "Cárdigan", "Camisa de gasa", "Pantalones", "Tacones altos", "Calcetines" ] 
            }, 
            yAxis: {}, 
            serie: [{ 
                nombre: 'Ventas' , 
                tipo: 'barra' , 
                datos: [ 5, 20, 36, 10, 10, 20 ] 
            }] 
        }); 
    } 
  } 
}
 </ script>

Acabado: arriba

 

 

Supongo que te gusta

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