前言

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'