一.先看效果:

大家好呀,⭐⭐⭐⭐⭐,秉着分享快乐的原则,我又来啦~

echarts不就是去官网复制然后粘贴吗,为什么要封装?

1.减少代码量,每次只要传宽度,高度与option配置项便能快速生成图表。
2.原先的echarts并不能自适应屏幕大小变化。
3.原先的echarts并不能自适应父盒子大小变化。

原先自适应存在问题(重):

1.当屏幕改变,图表不会重新动态改变并渲染:
在这里插入图片描述
2.当图表标签的父盒子大小改变时,图表不会重新动态改变并渲染:
在这里插入图片描述
3.当屏幕改变,图表不会重新动态改变并渲染 (解决后)

在这里插入图片描述
4. 当图表标签的父盒子大小改变时,图表不会重新动态改变并渲染 (解决后)

在这里插入图片描述

二.详细实现:

1. 组件要传的值:

先分析需求,比如组件名字为my-echarts,一般传个width(宽)、height(高)、option(配置项)这三个就可以了,如:

  <my-echarts
        :width="'80%'"
        :height="'20vw'"
        :option="option1"
  ></my-echarts>
2. 实现组件代码:

在一个vue脚手架工程里,可以在components目录下新建一个 MyEcharts.vue 文件,具体功能代码看注释

<template>
  <!-- 定义标签 -->
  <div
    :id="id"
    :style="{
      width: width,
      height: height,
    }"
  ></div>
</template>

<script>
import * as echarts from "echarts";
// 2.生成一个 id 值给标签,目的是为了当多次使用组件防止id重复
const uid = function () {
  return new Date().getTime();
};
export default {
  //1.获取传过来的值
  props: {
    width: {
      typeof: String,
    },
    height: {
      typeof: String,
    },
    option: {
      typeof: Object,
      default() {
        return null;
      },
    },
  },
  data() {
    return {
      //3.在这定义 id 与 myChart图表实例 , 方便管理
      id: null,
      myChart: null,
    };
  },
  created() {
    // 4.id赋值
    this.id = uid();
  },
  mounted() {
    //   5. 创建echarts图表实例
    this.myChart = echarts.init(document.getElementById(this.id));
    // 指定图表的配置项和数据
    var option = this.option;
    // 使用刚指定的配置项和数据显示图表。
    this.myChart.setOption(option);
  },
};
</script>
3. 基本使用:

此时便可以在其它地方使用my-echarts组件,比如我在 App.vue使用该组件:

导入:

import MyEcharts from "./components/MyEcharts.vue";

注册:

 components: {
    MyEcharts,
  },

定义option数据,(可以随便去echarts官网复制一个):

data() {
    return {
      //三角形柱状图
      option1: {
        tooltip: {
          trigger: "axis",
          formatter: `{b}<br/>
                {a}: {c} 千人`,
        },
        //图表的内边距
        grid: {
          left: "3%",
          top: "20%",
          right: "3%",
          bottom: "1%",
          show: true,
          borderColor: "rgb(47,32,71)",
          containLabel: true,
        },
        xAxis: {
          data: ["衬衫", "羊毛衫", "雪纺衫", "裤子"],
          type: "category",
          axisLabel: {
            show: true,
            color: "rgb(142,175,220)",
          },
          axisTick: {
            //不显示刻度线
            show: false,
          },
          axisLine: {
            show: true,
            lineStyle: {
              width: 1,
              color: "rgba(47,32,71)",
            },
          },
          // 区域分割线
          splitLine: {
            show: false,
            lineStyle: {
              color: "rgba(204, 204, 204,0.3)",
            },
          },
        },
        yAxis: {
          name: "单位:千人",
          nameTextStyle: {
            color: "rgb(142,175,220)",
          },
          // 区域分割线
          splitLine: {
            lineStyle: {
              color: "rgba(47,32,71)",
            },
          },
          axisTick: {
            show: false,
          },
          axisLabel: {
            show: true,
            color: "rgb(142,175,220)",
          },
          axisLine: {
            lineStyle: {
              show: true, //是否显示坐标轴轴线,
              color: "white", //y轴轴线的颜色
              width: 0.5, //x轴粗细
            },
          },
        },
        series: [
          {
            name: "销量",
            //三角形柱状图
            type: "pictorialBar",
            barCategoryGap: "30",
            symbol:
              "path://M0,10 L10,10 C5.5,10 5.5,5 5,0 C4.5,5 4.5,10 0,10 z",
            //渐变色
            itemStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: "#188df0" },
                { offset: 0.5, color: "#188df0" },
                { offset: 1, color: "#83bff6" },
              ]),
            },
            data: [5, 20, 36, 10],
          },
        ],
      },
    };
  },

定义标签:

      <my-echarts
        :width="'80%'"
        :height="'20vw'"
        :option="option1"
      ></my-echarts>
4. 当屏幕改变,图表重新动态改变并渲染(重点):

echarts自带一个resize()方法能重新渲染绘制图表,但是要手动调用它,那么我们用window.onresize事件方法,当屏幕大小改变就调用echarts的resize()方法。

在 MyEcharts.vue 组件文件里添加:

。。。略
 mounted() {
    // 当屏幕改变,图表重新动态改变并渲染
    var that = this;
    window.onresize = function () {
      that.myChart.resize();
    };
  },
  。。。略

此时便可以:
在这里插入图片描述

5. 当图表标签的父盒子大小改变时,图表重新渲染(重):

这个方法我们新建一个mixin.js文件写,随意地方建,到时导入路径写对就行,然后在MyEcharts.vue里通过混入mixin.js文件,能更方便复用,代码实现详细看注释:

// echarts 自适应父盒子变化大小
const myMixin = {
  methods: {
    resize() {
      // 当宽高变化时就会执行
      //执行某些操作 重新改变图表, 同时传参,设置动画效果
      this.myChart.resize({animation: {duration:1000}});
    },
  },
    //自定义指令,图表的宽度采用百分比,父盒子宽度变化,那图表盒子大小也变化了,但是图表不会重新绘制
  //原理:判断盒子本身宽度改变了,再调用echarts的resize方法重新绘制
  directives: {
    // 使用局部注册指令的方式
    resize: {
      // 指令的名称
      bind(el, binding) {
        // el为绑定的元素,binding为绑定给指令的对象
        let width = "",
          height = "";
        function isReize() {
          //这个方法可以获取元素的css样式对象
          const style = document.defaultView.getComputedStyle(el);
          //对比跟上次宽度是否改变,如果改变了
          if (width !== style.width || height !== style.height) {
            //调用resize方法
            binding.value(); // 关键
          }
          //记录当前宽高
          width = style.width;
          height = style.height;
        }
        //设置监听器,每隔一段时间对比看看
        el.__vueSetInterval__ = setInterval(isReize, 300);
      },
      //只调用一次,指令与元素解绑时调用
      unbind(el) {
        //清除定时器
        clearInterval(el.__vueSetInterval__);
      },
    },
  },
}

export {myMixin};

在MyEcharts.vue 混入:

先定义自定义指令:

 <div
    v-resize="resize"
    :id="id"
    :style="{
      width: width,
      height: height,
    }"
  ></div>

然后在混入mixin.js:

import { myMixin } from "../assets/mixins/mixin.js";

export default {
  mixins: [myMixin],
//.....略
}

此时便实现如下:

在这里插入图片描述

6. 题外话:

第五步,说到底,是监听dom元素变化,我用的是定时器每隔一段时间监听一次,其实并不好,浪费性能。而 ResizeObserver API 这个新特性就可以帮助我们监听一个DOM节点的变化。但是这是一个实验中的功能,有兴趣可以自行查阅看看。我也可以专门出一篇文章,需要的话,哈哈~

三.总结:

上面就是全部功能实现啦,是比较简单的,有不明白的可以评论区留言呀~😆😆😆

下次见,拜拜~ ┏(^0^)┛

推荐一部电影给你们- - -小森林(超治愈~)

在这里插入图片描述

我的哔哩哔哩空间
Gitee仓库地址:全部特效源码
Q群聊(欢迎):629596039
其它文章:
~关注我看更多简单创意特效:
文字烟雾效果 html+css+js
环绕倒影加载特效 html+css
气泡浮动背景特效 html+css
简约时钟特效 html+css+js
赛博朋克风格按钮 html+css
仿网易云官网轮播图 html+css+js
水波加载动画 html+css
导航栏滚动渐变效果 html+css+js
书本翻页 html+css
3D立体相册 html+css
霓虹灯绘画板效果 html+css+js
记一些css属性总结(一)
Sass总结笔记
…等等
进我主页看更多~

Logo

前往低代码交流专区

更多推荐