Vue3+TS+ElementUI搭建管理系统之Echarts可视化

安装Echarts

npm install echarts --save
npm install @types/echarts -D

Vue3通过ref属性获取元素

1. 在compositionAPI中如何使用生命周期函数？ 需要用到哪个生命周期函数，就将对应函数的import进来，接着在setup中调用即可
2. vue3如何通过ref属性获取界面上的元素? 在template中的写法跟vue2一样，给元素添加个ref='xxx' 在setup中，先创建一个响应式数据，并且要把响应式数据暴露出去 当元素被创建出来的适合，就会给对应的响应数据赋值 当响应式数据被赋值之后，就可以利用生命周期方法，在生命周期方法中获取对应的响应式数据，即DOM元素

<template>
  <div class="myChart" ref="myChart"></div>
</template>
<script lang="ts">
import { defineComponent, ref, onMounted } from "vue";
export default defineComponent({
  setup() {
    const myChart = ref<any>();
    onMounted(()=>{
      console.log(myChart.value)
    });
    return {
      myChart,
    };
   }
 })

Vue3+Echarts实现可视化

<template>
  <div class="myChart" ref="myChart"></div>
</template>
<script lang="ts">
import { defineComponent, ref, onMounted } from "vue";
import * as echarts from "echarts";
export default defineComponent({
  setup() {
    const myChart = ref<any>();
    const myCharts = ref<any>();
    let options = {}; // echarts options 配置项
    onMounted(() => {
      // 绘制图表
      myCharts.value = echarts.init(myChart.value);
      myCharts.value.setOption(options);
    }); 
  return {
      myChart,
    };
  },
});
</script>
<style lang="scss" scoped>
.myChart {
  width: 1200px;
  height: 600px;
}
</style>

注：div标签一定要在echarts.init固定宽高，不然canvas画布绘制有问题，会给出默认的宽高100px。若非要使用百分比高度，可在nextTick中调用echarts.init

效果图

安装Echarts

npm install echarts --save
npm install @types/echarts -D

Vue3通过ref属性获取元素

1. 在compositionAPI中如何使用生命周期函数？ 需要用到哪个生命周期函数，就将对应函数的import进来，接着在setup中调用即可
2. vue3如何通过ref属性获取界面上的元素? 在template中的写法跟vue2一样，给元素添加个ref='xxx' 在setup中，先创建一个响应式数据，并且要把响应式数据暴露出去 当元素被创建出来的适合，就会给对应的响应数据赋值 当响应式数据被赋值之后，就可以利用生命周期方法，在生命周期方法中获取对应的响应式数据，即DOM元素

<template>
  <div class="myChart" ref="myChart"></div>
</template>
<script lang="ts">
import { defineComponent, ref, onMounted } from "vue";
export default defineComponent({
  setup() {
    const myChart = ref<any>();
    onMounted(()=>{
      console.log(myChart.value)
    });
    return {
      myChart,
    };
   }
 })

Vue3+Echarts实现可视化

<template>
  <div class="myChart" ref="myChart"></div>
</template>
<script lang="ts">
import { defineComponent, ref, onMounted } from "vue";
import * as echarts from "echarts";
export default defineComponent({
  setup() {
    const myChart = ref<any>();
    const myCharts = ref<any>();
    let options = {}; // echarts options 配置项
    onMounted(() => {
      // 绘制图表
      myCharts.value = echarts.init(myChart.value);
      myCharts.value.setOption(options);
    }); 
  return {
      myChart,
    };
  },
});
</script>
<style lang="scss" scoped>
.myChart {
  width: 1200px;
  height: 600px;
}
</style>

注：div标签一定要在echarts.init固定宽高，不然canvas画布绘制有问题，会给出默认的宽高100px。若非要使用百分比高度，可在nextTick中调用echarts.init

效果图