【无标题】echarts在vue2中的引入

echarts网站：：快速上手 - Handbook - Apache ECharts

学习视频链接：【数据可视化】在vue中使用echarts_哔哩哔哩_bilibili

gethup学习网站：GitHub: Let’s build from here · GitHub (kgithub.com)

安装：

• 导入：echarts

npm install echarts vue-echarts

• 要在 Vue 2（<2.7.0）下使用 vue-echarts，需要确保 @vue/composition-api 已经安装

  npm i -D @vue/composition-api

• 重启项目：

• 在main.js中全局注册

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

• 在需要渲染的页面，添加DOM结构：

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

• 在data中添加图标样式配置项

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

• 设置图标的大小

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