echarts在vue3中的引入

这里用的是按需引入，一般也推荐用这种，可以优化项目的体积
1)先安装

npm install echarts --save

2）创建一个echarts文件夹，并创建配置文件

3）配置文件内容

//引入echarts
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';
// 引入 Canvas 渲染器，注意引入 CanvasRenderer 或者 SVGRenderer 是必须的一步
import { CanvasRenderer } from 'echarts/renderers';
// 注册必须的组件
echarts.use([
    TitleComponent,
    TooltipComponent,
    GridComponent,
    DatasetComponent,
    TransformComponent,
    BarChart,
    LabelLayout,
    UniversalTransition,
    CanvasRenderer
]);
export default echarts

4）main.js进行挂载（这里可以忽视别的，只看echarts部分）

import { createApp } from 'vue'
import router from './router/index'
import {createPinia} from 'pinia'
import App from './App.vue'
import echarts from './echarts/index'

const app = createApp(App)
app.config.globalProperties.$echarts = echarts;
app.use(router).use(createPinia()).mount('#app')

5）需要使用的页面，首先得定义一个容器，然后将图表放入这个容器就行

<template>
  <div
  ref="lineChart"
  id="lineChart"
  :style="{ width: '800px', height: '400px' }"
></div>
</template>

<script>
import { getCurrentInstance, onMounted } from "vue";
export default {
  setup() {
    // 通过 internalInstance.appContext.config.globalProperties 获取全局属性或方法
    let internalInstance = getCurrentInstance();
    let echarts = internalInstance.appContext.config.globalProperties.$echarts;

    onMounted(() => {

      const dom = document.getElementById("lineChart");
      console.log(dom)
      const myChart = echarts.init(dom); // 初始化echarts实例
      myChart.setOption({
        title: {
          text: 'ECharts 入门示例'
        },
        tooltip: {},
        xAxis: {
          data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
        },
        yAxis: {},
        series: [
          {
            name: '销量',
            type: 'bar',
            data: [5, 20, 36, 10, 10, 20]
          }
        ]
      });
      // 设置实例参数
      window.onresize = () => {
        myChart.resize();
      };
    });
    return {};
  },
};
</script>

<style>

</style>