Echarts在vue-cli的基本使用

1.基本使用

1.安装

在已经建好的脚手架的终端中输入

错误输入：npm install echarts --save
正确输入：npm install echarts@4.9.0 --save

输入错误报错的解决方案：

#第一步卸载之前安装的echars版本
npm uninstall echarts --Save

#第二步输入指定版本号安装
npm install echarts@4.9.0 --save

2.全局引用
main.js 中配置

import echarts from 'echarts'  //引入echarts

Vue.prototype.$echarts = echarts  //注册组件

在vue文件中局部引用

import echarts from 'echarts'  //引入echarts

3.使用

<template>
  <div>
    <h1>{{msg}}</h1>
   <!-- 为 ECharts 准备一个定义了宽高的 DOM -->
    <div id="chart" style="width:600px;height:400px"></div>
  </div>
</template>

<script>
// import echarts from 'echarts';
export default {
  name: 'HelloWorld',
  data () {
    return {
      msg: '应用管理 '
    }
  },
    mounted(){
    this.getEchartData() 
  },
  methods: {
     getEchartData() {
     // 基于准备好的dom，初始化echarts实例
      var myChart = this.$echarts.init(document.getElementById('chart'));

      // 指定图表的配置项和数据
      var option = {
        xAxis: {
    type: 'category',
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      data: [150, 230, 224, 218, 135, 147, 260],
      type: 'line'
    }
  ]
      };

      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
    },
  },

}

2. echarts图表跟随窗口自适应

情况一：只有一个图表

window.onresize = myChart.resize;

情况二：有多个图表，虽然官方说使用resize可以自适应，但是在有多个图表的情况下，只有最后一个可以自适应
解决方法：

 window.addEventListener("resize",function () {
 myChart.resize();
  })