vue3中如何使用echarts5，超詳細！！！

前言

vue3已經出來一年之久了，現今開發也經常用到，那麼vue3和echarts5如何結合呢？話不多說，上菜！

使用

安裝echarts

npm install echarts --save           

建立DOM元素，注意一定要有高度

<div id="main" style='height: 500px'></div>           

全部導入

<script>
import * as echarts from 'echarts'
import { onMounted } from 'vue'
export default {
    setup() {
        onMounted(() => {
            // 擷取DOM元素并且進行初始化
            var myChart = echarts.init(document.getElementById('main'));
            // 建立圖示
            myChart.setOption({
              title: {
                text: 'ECharts 入門示例'
              },
              tooltip: {},
              xAxis: {
                data: ['襯衫', '羊毛衫', '雪紡衫', '褲子', '高跟鞋', '襪子']
              },
              yAxis: {},
              series: [
                {
                  name: '銷量',
                  type: 'bar',
                  data: [5, 20, 36, 10, 10, 20]
                }
              ]
            })
        })
    }
}
</script>           

局部導入

部分多餘重複引入可以直接提到mian.js中

<script>
import { onMounted } from 'vue'
// 核心子產品 提供必要的一些方法 如init
import * as echarts from 'echarts/core'
// 引入柱狀圖
import { BarChart } from 'echarts/charts'
// 引入提示框，标題，直角坐标系，資料集，内置資料轉換器元件，元件字尾都為 Component
import {
  TitleComponent,
  TooltipComponent,
  GridComponent,
  DatasetComponent,
  TransformComponent
} from 'echarts/components'
// 标簽自動布局，全局過渡動畫等特性
import { LabelLayout, UniversalTransition } from 'echarts/features'
import { CanvasRenderer } from 'echarts/renderers'
// 注冊必要的元件
echarts.use([
  TitleComponent,
  TooltipComponent,
  GridComponent,
  DatasetComponent,
  TransformComponent,
  BarChart,
  LabelLayout,
  UniversalTransition,
  CanvasRenderer
])
const Block = getAsyncComponent('views/Login')
export default {
  name: 'Error',
  components: {
    [Empty.name]: Empty,
    Block
  },
  setup () {
    onMounted(() => {
      // 基于準備好的dom，初始化echarts執行個體
      var myChart = echarts.init(document.getElementById('main'))
      // 繪制圖表
      myChart.setOption({
        title: {
          text: 'ECharts 入門示例'
        },
        tooltip: {},
        xAxis: {
          data: ['襯衫', '羊毛衫', '雪紡衫', '褲子', '高跟鞋', '襪子']
        },
        yAxis: {},
        series: [
          {
            name: '銷量',
            type: 'bar',
            data: [5, 20, 36, 10, 10, 20]
          }
        ]
      })
    })
  }
}
</script>           

如何找到圖表對應的元件名

以柱形圖為例，

echarts官網

中點選柱狀圖後，旁邊有縮寫bar，那麼他的元件名則是 BarChart

引入該元件

import { BarChart } from 'echarts/charts'