如何在Vue中使用Echarts可视化库？按需引入个人不推荐使用Vue-Echarts版本，因为Echarts本身难度不

个人不推荐使用Vue-Echarts版本，因为Echarts本身难度不算大，虽然文档有点像是 “说明书”，但是还算全乎，花点时间还是可以理解的。

引入：

在Vue中使用Echarts时可以按照一般引入插件的方式引入

1、使用npm安装Echarts：

npm install echarts --save

2、使用yarn安装Echarts：

yarn install echarts

3、全局引入Echarts：

//main.js 不推荐
import echarts from "echarts";
Vue.prototype.$echarts = echarts;

个人不推荐在main.js全局引入的发方式，根据项目使用Echarts的程度可以选择按需引入：

4、按需引入Echarts：

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

5、官方文档的按需引入Echarts：

// 引入 echarts 核心模块，核心模块提供了 echarts 使用必须要的接口。
import * as echarts from 'echarts/core';
// 引入柱状图图表，图表后缀都为 Chart
import {
    BarChart
} from 'echarts/charts';
// 引入提示框，标题，直角坐标系组件，组件后缀都为 Component
import {
    TitleComponent,
    TooltipComponent,
    GridComponent
} from 'echarts/components';
// 引入 Canvas 渲染器，注意引入 CanvasRenderer 或者 SVGRenderer 是必须的一步
import {
    CanvasRenderer
} from 'echarts/renderers';

// 注册必须的组件
echarts.use(
    [TitleComponent, TooltipComponent, GridComponent, BarChart, CanvasRenderer]
);

简单使用：

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

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

四步缺一不可，可以简单理解为日常生活中娶媳妇：

找到适合结婚的女朋友（container）；
认识一段时间之后确定关系（init）；
确定关系之后需要买买买，她才会跟你继续交往（option）；
关系进一步升温之后就可以把他娶回家了（setOption）；

使用：

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

（1）步骤4，require的方式：

<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>

（2）步骤5，官方文档的方式

<script>
  import * as echarts from 'echarts/core';
  import {
    BarChart
  } from 'echarts/charts';
  import {
    TitleComponent,
    TooltipComponent,
    GridComponent
  } from 'echarts/components';
  import {
    CanvasRenderer
  } from 'echarts/renderers';

  echarts.use(
    [TitleComponent, TooltipComponent, GridComponent, BarChart, CanvasRenderer]
  );

  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>

结果示例：

【ps】其实步骤4 的方法本人使用后浏览器报错同时加载不出来，报错提示需要引入一些组件，就像官网文档那样需要import。如果你的项目支持的话可以使用步骤4，不然就需要像我使用官方的步骤了。

自适应窗口大小：

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

单个 / 多个图表均生效：

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

------ 全文完！ ------

————————————————

原文链接：blog.csdn.net/qq_43471802…