vue项目使用echarts-liquidfill插件时报错Component series.liquidFill not exists. Load it first

94煮

于 2021-07-19 14:19:42 发布

阅读量2.1k

点赞数 1

CC 4.0 BY-SA版权

文章标签： vue echarts

本文链接：https://blog.youkuaiyun.com/weixin_44782346/article/details/118894816

博主分享了在Vue项目中尝试使用echarts库实现悬浮球图表但未显示的问题，通过改变引入方式成功解决。文章详细介绍了问题排查过程和解决方案，适合前端开发者遇到类似问题参考。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

vue项目引入悬浮球就是显示不出来

前端使用npm命令安装echarts和echarts-liquidfill的步骤可以参考下面这篇
参考这篇文章
但是我都安装了已经引入了还是没用，有些文章说的时版本有问题，我也试了下，也不行，不知道是不是我项目的问题。后面我改变了echarts的引入方式就可以了。
下面附上我的实例代码：

<template>
  <div class="container1_1">
    <div id="main" class="hygrometer" ref="hygrometer"></div>
  </div>
</template>
<script>
export default {
  data() {
    return {
    };
  },
  mounted() {
     let echarts = require("echarts/lib/echarts");//通过这种方式引入就可以了
    var hygrometer = echarts.init(document.getElementById("main"));
    let option = {
      series: [
        {
          type: "liquidFill",
          radius: "100px",
          data: [0.6],
        },
      ],
    };
    hygrometer.setOption(option);
  },
  methods: {},
};
</script>
<style scoped>
.hygrometer{
  width: 100px;
  height: 100px;
}
</style>```