Vue3 引入Echarts

1.下载Echarts

npm install echarts vue-cha

2. 在main.js文件下引入Echarts

import ECharts from 'vue-echarts'
全局引入
import 'echarts';
若发现引入不成功可查看package.json文件内Echarts是否下载

3. 挂载

const app = createApp(App)
app.component("ECharts").mount('#app')

4.页面引入

<template>
  <e-charts class="chart" :option="option"/>
</template>

<script setup>
import {ref} from "vue";
const option = ref({
// Echarts例子
  xAxis: {
    type: 'category',
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      data: [150, 230, 224, 218, 135, 147, 260],
      type: 'line'
    }
  ]
})
</script>
<style scoped>
.chart{
  height: 200px;
  width: 200px;
  background-color: #42b983;
}
</style>