[Sin título] Introducción de echarts en vue2

Sitio web de echarts:: Comience rápidamente - Manual - Apache ECharts

Enlace de video de aprendizaje: [Visualización de datos] Uso de echarts en vue_bilibili_bilibili

Sitio web de aprendizaje gethup: GitHub: construyamos desde aquí · GitHub (kgithub.com)

Instalar:

• Importar: echarts

npm install echarts vue-echarts

• Para usarlo en Vue 2 (<2.7.0) vue-echarts, debe asegurarse @vue/composition-apide que esté instalado

  npm i -D @vue/composition-api

• Reinicie el proyecto:

• Regístrese globalmente en main.js

  import 'echarts'
  import ECharts from 'vue-echarts'
  ​
  // 全局注册组件（也可以使用局部注册）
  Vue.component('ECharts', ECharts)

• En la página que debe representarse, agregue la estructura DOM:

  <template>
     <div>
        <e-charts class="chsrt" :option="option"></e-charts>
     </div>
  </template>

• Agregar elementos de configuración de estilo de icono en los datos

  export default {
    data () {
      return {
        option: {
          xAxis: {
            data: ['A', 'B', 'C', 'D', 'E']
          },
          yAxis: {},
          series: [
            {
              data: [10, 22, 28, 23, 19],
              type: 'line',
              smooth: true
            }
          ]
        }
      }
    }
  }

• Establecer tamaño de icono

  <style>
  .chsrt{
     width:84vw;
     height:90vh;
  }
  </style>