echarts-liquidfill水晶球API

前置条件

使用echarts-liquidfill水晶球插件需要先安装 Echarts插件

npm install echarts --save
或
yarn add echarts --save

安装 echarts-liquidfill 水晶球插件

npm install echarts-liquidfill --save
或
yarn add echarts-liquidfill --save

使用

1. 在需要使用水晶球的组件里引入liquidFill.js

import 'echarts-liquidfill/src/liquidFill.js';

2. 在模板中加入挂载水晶球的DOM节点

<template>
  <div id="app" class="app">
    <div ref="echarts" id="echarts"></div>
  </div>
</template>

<style lang="less">
#echarts {
  width: 500px;
  height: 500px;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
}
</style>

3. 在 methods 中添加 liquidFill 调用方法

methods: {
    // 绘制指标图
    echartsMit() {
      let dom = this.$refs.echarts;
      let myChart = this.$echarts.init(dom);
      let option = {
        // backgroundColor: "white",
        series: [
          {
            type: "liquidFill",
            name: "数据",
            radius: "90%",
            shape:
              "path://M18.98 5.7c-.24-2.36-2.24-4.2-4.66-4.2-1.95 0-3.6 1.18-4.32 2.87-.7-1.7-2.37-2.87-4.32-2.87-2.42 0-4.42 1.84-4.66 4.2L1 6.18c0 5.7 6.98 8.38 9 12.17 2.02-3.8 9-6.48 9-12.17 0-.16 0-.32-.02-.48z",
            data: [{ name: "Frist", value: "0.7" }, 0.5, 0.3], //datat

            outline: {
              show: false,
            },
            backgroundStyle: {
              borderColor: "#156ACF",
              borderWidth: 1,
              shadowColor: "rgba(0, 0, 0, 0.4)",
              shadowBlur: 20,
            },
            label: {
              normal: {
                position: ["50%", "40%"],
                formatter: "{a} : {c}",
                textStyle: {
                  fontSize: 30,
                },
              },
            },
          },
        ],
      };
      myChart.setOption(option);
    },
  },

4. 在项目页面挂载的时候，调用生成水晶球的方法

 mounted() {
    this.echartsMit();
  },

生成效果图如下

echarts-liquidfill水晶球