学院动态


vue3与eCharts5的配合使用示例

发布 : 杨欣      来源:前端开发

发布日期 2021-09-03 09:35 点击量 36

vue3与eCharts5的配合使用示例

安装

npm i echarts element-resize-detector

构建公共组件

因为太麻烦,所以抽出来写一个公共组件好了,在components里面建一个组件

1. vue

这里传几个参数,id用来确认echarts的,width,height就是宽高

<template>
  <div class="echarts-box">
    <div :id="echartsId" :style="{ width: eWidth, height: eHeight }"></div>
  </div>
</template>
<script src="./control.js"></script>
<style scoped lang="stylus" src="./style.styl"/>

2. css

一定要使用100%, 100%,不然铺不满整个div

.echarts-box{
  width 100%;
  height 100%;
}

3. js

divListen这个函数是用来监听div变换后自适应刷新echarts,echarts自带主题变色theme,黑和白,默认是white,黑是dark

import * as echarts from "echarts";
import { watch, ref, nextTick } from 'vue'
import { onMounted, onUnmounted } from "@vue/runtime-core";
import {divListen} from "../../utils/common";
export default {
  name: "echartsBox",
  data () {
    return {
      echart: {},
      chartDocument: {}
    };
  },
  watch: {},
  computed: {},
  props: [
    'echartsId',
    'eWidth',
    'eHeight',
    'theme',
    'options',
  ],
  components: {},
  setup(props) {
    /// 声明定义一下echart
    const echart = echarts;
    // 定义变量存储echarts对象
    let docEcharts = ref();
    onMounted(() => {
      initChart();
    });
    onUnmounted(() => {
      echart.dispose;
    });
    // 基础配置一下Echarts
    // nextTick是为了让dom渲染后再执行echats
    const initChart = () => {
      nextTick(() => {
        const chart = echart.init(document.getElementById(props.echartsId), props.theme);
        docEcharts.value = chart
        divListen(props.echartsId, chart, this)
        // 把配置和数据放这里
        chart && chart.clear();
        props.options && chart.setOption(props.options, true);
        // 监听数据变化后重置数据
        watch(props.options,
          () => {
            chart && chart.clear();
            props.options && chart.setOption(props.options, true)
          }
        )
      })
    }
    return {
      docEcharts
    }
  },
  methods: {},
};

4. 配置监听函数

因为listenTo监听后,1px变化都会执行一个resize,这个防抖函数是为了限制echarts刷新的,当div结束变动后再执行resize

到这里就结束了

 相关推荐

预约免费试听课
请填写您的姓名
请填写您的手机号
返回顶部