vue3 引入echarts

我们打开示例 

第一步,当然是 cnpm install echarts 

第二步，当然是按需引入，在根目录的src/common/js下面新建一个echarts.js文件写入（上图红色圈的）

// 引入 echarts 核心模块，核心模块提供了 echarts 使用必须要的接口。
import * as echarts from 'echarts/core';

// 引入柱状图图表，图表后缀都为 Chart
import { BarChart } from 'echarts/charts';
// 引入提示框，标题，直角坐标系，数据集，内置数据转换器组件，组件后缀都为 Component
import { GridComponent } from 'echarts/components';
// 引入 Canvas 渲染器，注意引入 CanvasRenderer 或者 SVGRenderer 是必须的一步
import { CanvasRenderer } from 'echarts/renderers';

// 注册必须的组件  echarts.use??
echarts.use([GridComponent, BarChart, CanvasRenderer]);


export default echarts;

第三步，在main.js里面写入

import echarts from './common/js/echart.js'

const app = createApp(App)

app.config.globalProperties.$echarts = echarts;//vue3的挂载方式

第四步，在使用的页面写入

<template>
<div id="echarts1" ref="container" style="width: 100%;height: 300px;"></div>
</template>

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

// 在Vue3中，getCurrentInstance()可以用来获取当前组件实例
const { proxy } = getCurrentInstance();

// 获取echart挂载的DOM节点
const container = ref();

//配置参数因人而异
var option;

option = {
  xAxis: {
    type: 'category',
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      data: [120, 200, 150, 80, 70, 110, 130],
      type: 'bar',
      showBackground: true,
      backgroundStyle: {
        color: 'rgba(180, 180, 180, 0.2)'
      }
    }
  ]
};

// echartsf弹窗出现
function echartsf() {
//nextTick选然后再调用，不然会报错
  nextTick(() => {
    // echarts初始化
    let myChart = proxy.$echarts.init(container.value);

    option && myChart.setOption(option);

    // 根据页面大小自动响应图表大小
    window.addEventListener("resize", function () {
      myChart.resize();
    });
  })
}

</script>