vue3中echarts图表的实现

import { createApp } from 'vue'
import App from './App.vue'
import * as echarts from "echarts";
createApp(App).mount('#app')
app.config.globalProperties.$echarts = echarts;

<div id="rose" :style="{ width: '400px', height: '400px' }"></div>

import { ref, onMounted } from 'vue'
import * as echarts from 'echarts'
const areaChart = ref(null)

const state = {
  option: {
    series: [
      {
        type: 'pie',
        data: [
          { value: 100, name: 'A' },
          { value: 200, name: 'B' },
          { value: 300, name: 'C' },
          { value: 400, name: 'D' },
          { value: 500, name: 'E' }
        ],
        roseType: 'area'
      }
    ]
  }
}

onMounted(() => {
  roseChart.value = echarts.init(document.getElementById('rose'))
  roseChart.value.setOption(state.option)
})

<div id="area" :style="{ width: '400px', height: '400px' }"></div>

import { ref, onMounted } from 'vue'
import * as echarts from 'echarts'
const roseChart = ref(null)

const area = {
  option: {
    xAxis: {
      data: ['A', 'B', 'C', 'D', 'E']
    },
    yAxis: {},
    series: [
      {
        data: [10, 22, 28, 23, 19],
        type: 'line',
        areaStyle: {}
      },
      {
        data: [25, 14, 23, 35, 10],
        type: 'line',
        areaStyle: {
          color: '#ff0',
          opacity: 0.5
        }
      }
    ]
  }
}

onMounted(() => {
  areaChart.value = echarts.init(document.getElementById('area'))
  areaChart.value.setOption(area.option)
})