echarts水球图liquidfill在vue中的使用

本文介绍了如何在Vue项目中使用ECharts-liquidfill插件创建液态填充水球图,包括npm安装、组件引入、配置示例和关键数据调整技巧。重点讲解了版本对应及数据排列对视觉效果的影响。

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

echarts-liquidfill虽然是echarts的插件,但是并不在echarts的内置组件中,而且官方文档里也没有,因此需要自己安装一下。
npm 或者cnpm都行,我用cnpm,淘宝镜像安装快一些。@后面的是版本号,-S和–save都是保存的意思。如果不写版本号,会默认安装最新版本。
如果你echarts也没安装过,就先安装echarts。

cnpm install echarts@4.9.0 -S

如果以前已经安装了echarts,就再安装一个echarts-liquidfill,这里要注意echarts和echarts-liquidfill的版本的对应关系,如果版本不适配,会报一些奇奇怪怪的错误,所以我这里安装的是4.9.0对应2.0.6,亲测是可以的。

npm install echarts-liquidfill@2.0.6 --save

在vue文件中
首先在template中创建一个div,作为你这个水球图的画布

<template>
  <div ref='liquidEchart' class="liquidData"></div>
</template>

对应可以在style里写一点css,定义画布的大小之类的

<style scoped>
.liquidData {
  width: 500px;
  height: 400px;
}
</style>

在script中定义一些数据

<script>
import 'echarts-liquidfill'; // 引入水球图的组件
export default {
  name: '',
  data () {
    return {
      chartsLiquid: '', // 初始化图表
    };
  },
  mounted () {
    this.initLiquidEchart();
  },
  methods: {
    initLiquidEchart () {
      setTimeout(() => {
        this.chartsLiquid = this.$echarts.init(this.$refs['liquidEchart'])
        // 把配置和数据放这里
        this.chartsLiquid.setOption({
          series: [{
            type: 'liquidFill',
            data: [0.52, 0.17], // 两条水波
          }]
        });
      }, 50)
    }
  },
};
</script>

这里因为我已经全局引入了echarts,所以直接使用this.$echarts就行了
全局引入可以在main.js中进行

// 这里是main.js文件
import echarts from "echarts";
Vue.prototype.$echarts = echarts;

这个就是比较基础的水球图,大概长这样:有两条水波,显示第一个水波的数字。也就是data数组里第一个数字。
在这里插入图片描述
注意:要想让水球好看,数字最好的从大到小排列,因为后面的数字画出来的水波会覆盖前一个水波的波纹,所以如果我上面的数据不是

data: [0.52, 0.17]

而是

data: [0.17, 0.52]

那图表就会变成这样
在这里插入图片描述
0.52的水波盖住了0.17的水波,导致了0.17的看不太清楚。

### 如何在 Vue3 中使用 `echarts-liquidfill` 实现水球 #### 安装依赖包 为了能够在 Vue3 项目中使用 ECharts 及其扩展库 `echarts-liquidfill` 来创建水球,需先通过 npm 或 yarn 安装必要的软件包。 ```bash npm install echarts echarts-liquidfill vue-echarts ``` 此命令会下载并安装三个主要模块:核心绘引擎 ECharts、用于绘制液态填充效果的附加组件 `echarts-liquidfill` 以及简化集成过程的封装组件 `vue-echarts`[^5]。 #### 配置全局变量 (可选) 为了让整个应用程序都能访问到 ECharts API 而无需每次都单独导入,在项目的入口文件(通常是 main.js 或者 setup 文件)里设置如下配置: ```javascript import { createApp } from 'vue'; import App from './App.vue'; // 导入ECharts实例对象 import * as echarts from 'echarts/core'; // 注册所需表类型和组件 import { GridComponent, TitleComponent, TooltipComponent, LiquidFillChart } from 'echarts/components'; // 将这些注册到ECharts核心上 echarts.use([GridComponent, TitleComponent, TooltipComponent, LiquidFillChart]); const app = createApp(App); app.config.globalProperties.$echarts = echarts; app.mount('#app'); ``` 这段代码不仅引入了基础的 ECharts 库还特别加入了支持液体填充样式的特定部分,并将其挂载到了 Vue 的全局属性 `$echarts` 下以便后续调用[^3]。 #### 组件内部定义与渲染逻辑 接下来是在具体页面或组件内完成实际的数据展示工作。这里给出一个简单的例子来说明如何利用上述准备工作快速构建起一个基本形态的水球。 ```html <template> <div class="chart-container"> <!-- 使用vue-echarts标签 --> <v-chart :option="option"/> </div> </template> <script lang="ts"> import VChart from "vue-echarts"; import { ref, defineComponent } from "vue"; export default defineComponent({ name: "LiquidFillExample", components: { VChart }, setup() { const option = ref({ series: [ { type: 'liquidFill', data: [0.6], radius: '80%', shape: 'circle' } ] }); return { option }; } }); </script> <style scoped> .chart-container { width: 100%; height: 400px; } </style> ``` 在这个模板片段中,首先声明了一个名为 `<v-chart>` 的自定义元素用来承载最终呈现出来的形;接着借助 TypeScript 编写的脚本段落设置了初始选项集——即告诉 ECharts 我们想要画什么样的东西;最后附带了一些样式规则确保容器有足够的空间显示完整的像。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值