水球图不是echarts内置组件,需要安装
搭配vue-echarts组件,该组件可以省略很多开发echarts图表的重复操作,如果init,setOptions等
npm install echarts
npm install echarts-liquidfill
npm install vue-echarts
官方文档地址
https://github.com/ecomfe/echarts-liquidfill
vue项目main.js中导入
import "echarts";
import "echarts-liquidfill";
import Echarts from "vue-echarts";
...
import { createApp } from "vue";
import App from "./App.vue";
const app = createApp(App);
app.component("VChart", Echarts);
...
app.mount("#app");
vue页面中使用基础水球
<template>
<article class="chart">
<v-chart class="chartDom" :option="option" ref="vchart" />
</article>
</template>
<script setup lang="ts">
const option = ref({
series: [{
type: 'liquidFill',
data: [0.6],
}]
});
</script>
<style lang="scss" scoped>
.chart{
width: 500px;
height: 300px;
}
.chartDom {
width: 100%;
height: 100%;
}
</style>
多波纹
option = {
series: [{
type: 'liquidFill',
data: [0.6, 0.5, 0.4, 0.3]
}]
};
所有示例可以看官方文档
https://github.com/ecomfe/echarts-liquidfill