vue3+echarts使用水球图

矫情吗；* 2024-03-23 13:17 208阅读 0赞

水球图不是echarts内置组件，需要安装
搭配vue-echarts组件，该组件可以省略很多开发echarts图表的重复操作，如果init，setOptions等

  1. npm install echarts
  2. npm install echarts-liquidfill
  3. npm install vue-echarts

官方文档地址
https://github.com/ecomfe/echarts-liquidfill

vue项目main.js中导入

  1. import "echarts";
  2. import "echarts-liquidfill";
  3. import Echarts from "vue-echarts";
  4. ...
  5. import {
  6.      createApp } from "vue";
  7. import App from "./App.vue";
  8. const app = createApp(App);
  9. app.component("VChart", Echarts);
  10. ...
  11. app.mount("#app");

vue页面中使用基础水球

  1. <template>
  2.   <article class="chart">
  3.     <v-chart class="chartDom" :option="option" ref="vchart" />
  4.   </article>
  5. </template>
  6. <script setup lang="ts">
  7. const option = ref({
  9.     series: [{
  11.         type: 'liquidFill',
  12.         data: [0.6],
  13.     }]
  14. });
  15. </script>
  16. <style lang="scss" scoped>
  17. .chart{
  19.   width: 500px;
  20.   height: 300px;
  21. }
  22. .chartDom {
  24.   width: 100%;
  25.   height: 100%;
  26. }
  27. </style>

在这里插入图片描述

多波纹

  1. option = {
  3.     series: [{
  5.         type: 'liquidFill',
  6.         data: [0.6, 0.5, 0.4, 0.3]
  7.     }]
  8. };

所有示例可以看官方文档
https://github.com/ecomfe/echarts-liquidfill

发表评论

表情：
评论列表 （有 0 条评论，208人围观）

还没有评论，来说两句吧...

相关阅读