Install Echarts
npm install echarts --save
npm install @types/echarts -D
Copy the code
Vue3 gets elements through the ref attribute
  1. How are lifecycle functions used in the Position API? Import the import of any lifecycle function you need and call it in setup
  2. How does VUe3 get elements on the interface through the ref attribute? In Template we write it the same way as in vue2, we add a ref=’ XXX ‘to the element. In setup, we create a response and we expose the response data. When the element is created properly, the corresponding response data is assigned. And when the response data is assigned, we use the lifecycle method, Get the corresponding reactive data, the DOM element, in the lifecycle method
<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, }; }})Copy the code
Vue3+Echarts for visualization
<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 = {}; Mychart.value = echarts.init(mychart.value); // Echarts options onMounted(() => {mychart.value = echarts.init(mychart.value); myCharts.value.setOption(options); }); return { myChart, }; }}); </script> <style lang="scss" scoped> .myChart { width: 1200px; height: 600px; } </style>Copy the code

Note: The div tag must have a fixed width and height in echarts.init, otherwise the canvas will have a problem drawing and will give the default width and height of 100px. If you don’t want to use percentage height, call echarts.init in nextTick

rendering
Install Echarts
npm install echarts --save
npm install @types/echarts -D
Copy the code
Vue3 gets elements through the ref attribute
  1. How are lifecycle functions used in the Position API? Import the import of any lifecycle function you need and call it in setup
  2. How does VUe3 get elements on the interface through the ref attribute? In Template we write it the same way as in vue2, we add a ref=’ XXX ‘to the element. In setup, we create a response and we expose the response data. When the element is created properly, the corresponding response data is assigned. And when the response data is assigned, we use the lifecycle method, Get the corresponding reactive data, the DOM element, in the lifecycle method
<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, }; }})Copy the code
Vue3+Echarts for visualization
<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 = {}; Mychart.value = echarts.init(mychart.value); // Echarts options onMounted(() => {mychart.value = echarts.init(mychart.value); myCharts.value.setOption(options); }); return { myChart, }; }}); </script> <style lang="scss" scoped> .myChart { width: 1200px; height: 600px; } </style>Copy the code

Note: The div tag must have a fixed width and height in echarts.init, otherwise the canvas will have a problem drawing and will give the default width and height of 100px. If you don’t want to use percentage height, call echarts.init in nextTick

rendering