vue3使用echarts本地运行不报错,线上报错

vue3+ts+vite 项目
echarts版本^5.4.1 vue版本3.2.47
本地运行不报错 线上报错

img

img


代码如下

不知道你这个问题是否已经解决, 如果还没有解决的话:
  • 这个问题的回答你可以参考下: https://ask.csdn.net/questions/7515837
  • 这篇博客你也可以参考下:vue3+ts中使用echarts
  • 除此之外, 这篇博客: Vue和React引入echarts方式汇总中的          2.Vue3中使用echarts(ts版本) 部分也许能够解决你的问题, 你可以仔细阅读以下内容或者直接跳转源博客中阅读:

             如上所述,在vue3中使用ref进行挂载的最佳示例如下:

             使用ref进行节点挂载,同样的配置项存储在config.tsx之中。

    <template>
      <div ref="myChart" class="myChart" />
    </template>
    
    <script lang="ts" setup>
    import { onBeforeUnmount, onMounted, ref } from "vue";
    import * as echarts from "echarts";
    import options from "./config";
    
    // 节点ref存放
    const chartRef = ref<HTMLElement | null>(null);
    // echarts实例存放
    let chart: echarts.ECharts | null = null;
    
    const chartInit = () => {
      if (chartRef.value) {
        chart = echarts.init(chartRef.value);
        // 使用刚指定的配置项和数据显示图表。
        chart.setOption(options, true);
      }
    };
    
    onMounted(() => {
      chartInit();
      // 添加监听方法,当页面放大缩小时触发echarts重绘,以适配改变后的页面
      window.addEventListener("resize", () => {
        chart && chart.resize();
      });
    });
    
    // 组件销毁前卸载监听方法
    onBeforeUnmount(() => {
      window.removeEventListener("resize", () => {
        chart && chart.resize();
      });
    });
    </script>
    
    <style lang="less" scoped>
    .myChart {
      width: 100%;
      height: 500px;
    }
    </style>

            config.tsx:

    export default {
      title: {
        text: "ECharts 入门示例",
      },
      tooltip: {},
      xAxis: {
        data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"],
      },
      yAxis: {},
      series: [
        {
          name: "销量",
          type: "bar",
          data: [5, 20, 36, 10, 10, 20],
        },
      ],
    };

            项目结构:

             展示效果:


如果你已经解决了该问题, 非常希望你能够分享一下解决方案, 写成博客, 将相关链接放在评论区, 以帮助更多的人 ^-^

按照1 2 尝试了 我本地运行是没有任何报错的 打包到线上就会报错

看着像是代码里的 问题 se 不是个函数,你代码里有用到这个函数吗?