vue echarts

1、使用npm安装Echarts：

npm install echarts --save

2、全局引入Echarts：(不推荐)

//main.js 
// import echarts from 'echarts'//引入echarts--v4
import * as echarts from 'echarts';// --v5
Vue.prototype.$echarts = echarts

3、按需引入Echarts：

let Echarts = require('echarts/lib/echarts');
require('echarts/lib/chart/bar'); //所需图表

使用:

首先应该明确Echarts图形必须满足四项刚性条件才可以绘制：
准备一个具有宽高的容器（container）；
每次绘制之前需要初始化（init）；
必须设置配置，否则无从绘制（option）；
改变数据时必须传入改变的数据，否则监听不到新数据（setOption）；

方式一

 <!-- 准备具有宽高的容器 -->
 <div style="width: 100%; height: 100%" ref="chart"></div>

<script>
let Echarts = require('echarts/lib/echarts'); //基础实例 注意不要使用import
require('echarts/lib/chart/bar'); //按需引入 bar = 柱状图
export default {
    data() { return { chart: null } }, //图表实例
    mounted() { this.init() },
    methods: {
        init() {
            //2.初始化
            this.chart = Echarts.init(this.$refs.chart);
            //3.配置数据
            let option = {
                xAxis: { type: 'category', data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] }, //X轴
                yAxis: { type: 'value' }, //Y轴
                series: [{ data: [120, 200, 150, 80, 70, 110, 130], type: 'bar' }] //配置项
            };
            // 4.传入数据
            this.chart.setOption(option);
        }
    }
};
</script>

方式二

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

drawLine() {
      // 基于准备好的dom，初始化echarts实例
      let myChart = this.$echarts.init(document.getElementById("myChart1"));
      // 绘制图表
      myChart.setOption({
        title: { text: "line" },
        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",
          },
        ],
      });
    },

mounted() {
    this.drawLine();
  },

自适应窗口大小：
为了兼容性，需要做到每个图表根据屏幕变化而自适应宽高
单个 / 多个图表均生效：

  mounted() {
        window.addEventListener('resize', () => {
            this.chart.resize();
        });
    }