vue3.2 +vite+echarts简单入门

npm install -g pnpm
pnpm create vite vue3-echarts --template vue-ts
pnpm add echarts reset.css
pnpm add sass -D

pnpm install echarts vue-echarts
pnpm install
pnpm run dev

main.ts

import { createApp } from 'vue'
import ECharts  from 'vue-echarts'
import 'echarts';
import App from './App.vue'

createApp(App)
    .component('ECharts', ECharts)
    .mount('#app')

App.vue

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

<script setup>
import { ref, computed } from 'vue';

const data = ref([
  {value: 50, name: 'A'},
  {value: 60, name: 'B'},
  {value: 40, name: 'C'},
  {value: 90, name: 'D'},
  {value: 80, name: 'E'},
]);

const option = computed(() => {
  return {
  xAxis: {
    type: 'category',
    data: data.value.map(d => d.name),
  },
  yAxis: {
    type: 'value',
  },
  series: [
    {
      data: data.value.map(d => d.value),
      type: 'line'
    },
  ],
}
});

// const option = ref({
//   xAxis: {
//     type: 'category',
//     data: data.value.map(d => d.name),
//   },
//   yAxis: {
//     type: 'value',
//   },
//   series: [
//     {
//       data: data.value.map(d => d.value),
//       type: 'line'
//     },
//   ],
// });

</script>

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

vite.config.ts //可以不改

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  server: {
    port: 886,
  },
})

参考：
https://github.com/ecomfe/vue-echarts
https://echarts.apache.org/examples/zh/index.html