在Vue中使用echarts

一、在Vue中使用echarts

1、安装 echarts 依赖：echarts

npm install echarts -S
// 或者使用淘宝的镜像
npm install -g cnpm --registry=https:// registry.npm.taobao.org
cnpm install echarts -S

2、创建图表

// 首先需要全局引入
// 在main.js中
// 引入echarts
import echarts from 'echarts';
Vue.prototype.$echarts = echarts;

// 在Echarts.vue中
<div id="myChart" :style="{width: '300px', height: '300px'}"></div>

export default {
    name: 'hello',
    data() {
        return {
            msg: 'Welcome to Your Vue.js App'
        }
    },
    mounted() {
        this.drawLine();
    },
    methods: {
        drawLine() {
            // 基于准备好的dom，初始化echarts实例
            let myChart = this.$echarts.init(document.getElementById('myChart'));
            // 绘制图表
            myChart.setOption({
                title: { text: '在Vue中使用echarts' },
                tooltip: {},
                xAxis: {
                    data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
                },
                yAxis: {},
                series: [{
                    name: '销量',
                    type: 'bar',
                    data: [5, 20, 36, 10, 10, 20]
                }]
            });
        }
    }
}
// 注意：我们要在mounted生命周期函数中实例化echarts对象。因为我们要确保dom元素已经挂载到页面中。

实现自适应

<template>
  <div id="echart"></div>
</template>

<script>
// 第一步，引入echarts插件以供使用
import Echarts from "echarts";
export default {
  data() {
    return {
      myChart: null, // 定义变量用来存放echarts实例
      option: { // 配置项写在data里面方便管理
        title: {
          text: "ECharts 示例",
        },
        tooltip: {},
        xAxis: {
          data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"],
        },
        yAxis: {},
        series: [
          {
            name: "销量",
            type: "bar",
            data: [5, 20, 36, 10, 10, 20],
          },
        ],
      },
    };
  },
  mounted() {
    // 第二步，在页面加载渲染的时候执行echarts画图方法
    this.drawEcharts();
  },
  methods: {
    drawEcharts() {
      // 第三步，通过echarts的init方法实例化一个echarts对象myChart，并，保存在data变量中
      this.myChart = Echarts.init(document.getElementById("echart"));
      // 第四步，执行myChart的setOption方法去画图，当然至于配置项，我们要提前配置好，这里的配置项
      //         写在data中，方便我们在一些事件中去修改对应配置项，比如点击按钮更改配置项数据
      this.myChart.setOption(this.option);
      // 第五步，在页面初始化加载的时候绑定页面resize事件监听。补充resize事件：resize事件是在浏览器窗口大小改变时，会触发。
      //        如当用户调整窗口大小，或者最大化、最小化、恢复窗口大小显示时触发 resize 事件。
      //        我们一般使用这个事件去做窗口大小与对应元素的大小适配
      window.addEventListener("resize", () => {
        // 第六步，执行echarts自带的resize方法，即可做到让echarts图表自适应
        this.myChart.resize();
        // 如果有多个echarts，就在这里执行多个echarts实例的resize方法,不过一般要做组件化开发，即一个.vue文件只会放置一个echarts实例
        /*
        this.myChart2.resize();
        this.myChart3.resize();
        ......
        */
      });
    },
    beforeDestroy() {
      /* 页面组件销毁的时候，别忘了移除绑定的监听resize事件，否则的话，多渲染几次
      容易导致内存泄漏和额外CPU或GPU占用哦*/
      window.removeEventListener("resize", () => {
        this.myChart.resize();
      });
    },
  },
};
</script>

<style lang="less" scoped>
#echart {
  width: 100%;
  height: 600px;
}
</style>

3、按需引入

// 由于全局引入会将所有的echarts图表打包，导致体积过大
// 在Echarts.vue文件中
// 使用 require 而不是 import

// 引入基本模板
let echarts = require('echarts/lib/echarts');
// 引入柱状图组件
require('echarts/lib/chart/bar');
// 引入提示框和title组件
require('echarts/lib/component/tooltip');
require('echarts/lib/component/title');

注意
如果是通过ajax获取回来的数据,要给到echarts得话.在created里面获取数据.mounted里面初始化图表
2022-07-22T07:38:53.png
因为created里面发请求,请求是异步得!所以,会出现数据拿到了图表没有出来得情况
所以要在created里面调用nextTick.然后在请求成功得地方,初始化图表.
如图:
2022-07-22T07:40:55.png