如何在Vue中使用Echarts可视化库

介绍

Echarts：百度开发的数据可视化库，国内图表库的 “领军人物”
官网：https://echarts.apache.org/zh/index.html

安装

1、使用npm安装Echarts：

npm install echarts --save

2、使用yarn安装Echarts：

yarn add  echarts --save

引入

//main.js

import * as Echarts from 'echarts';
Vue.prototype.$Echarts = Echarts;

也可以按需引入Echarts：

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

简单使用：

首先应该明确Echarts图形必须满足四项刚性条件才可以绘制：

准备一个具有宽高的容器（container）；
每次绘制之前需要初始化（init）；
必须设置配置，否则无从绘制（option）；
改变数据时必须传入改变的数据，否则监听不到新数据（setOption）；

组将中使用

        <div id="chart" style="width: 100%; height: 100%" ref="chart">div>

// import * as Echarts from 'echarts';

  export default {
     
    name: 'echarts01',
    data () {
     
      return {
     
        chart: null
      }
      }, //图表实例
    mounted () {
     
      this.init()
    },
    methods: {
     
      init () {
     
        console.log(this.$Echarts)
        //2.初始化
        this.chart = this.$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)
      },

    },
  }

自适应窗口大小：

为了兼容性，需要做到每个图表根据屏幕变化而自适应宽高

单个 / 多个图表均生效：

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