Vue3 引入 ECharts

安装

npm install echarts vue-echarts

要在 Vue 2（<2.7.0）下使用 vue-echarts，需要确保 @vue/composition-api 已经安装：

npm i -D @vue/composition-api

main.js

import { createApp } from 'vue';
import ECharts from 'vue-echarts';
import App from './App.vue';
import 'echarts';// 引入全局echarts
createApp(App)
    .component('ECharts', ECharts)
    .mount('#app')

Vue3Demo

<template>
  <e-charts class="chart" :option="option" />
</template>
<script setup>
import { ref, computed } from "vue";
const data = ref([
  { value: 50, name: "A" },
  { value: 40, name: "B" },
  { value: 30, name: "C" },
  { value: 60, name: "D" },
  { value: 10, name: "E" },
]);
setInterval(() => {
  data.value = data.value.map((item) => ({
    ...item,
    value: Math.random() * 120,
  }));
}, 1000);
const option = computed(() => {
  return {
    xAxis: {
      type: "category",
      data: data.value.map((data) => data.name),
    },
    yAxis: {
      type: "value",
    },
    series: [
      {
        data: data.value.map((data) => data.value),
        type: "line",
      },
    ],
  };
});
</script>

<style scoped>
.chart {
  height: 400px;
  widows: 500px;
}
</style>