vue3种使用echarts-liquidfill

1. 在Vue组件中使用ECharts-liquidfill插件

首先，我们需要在项目中安装ECharts和ECharts-liquidfill插件。可以通过npm命令来安装：

npm install echarts --save
npm install echarts-liquidfill --save

然后在Vue组件中引入ECharts和ECharts-liquidfill插件：

import echarts from 'echarts'
import 'echarts-liquidfill'

接下来，我们需要在Vue组件的mounted钩子中初始化ECharts图表并设置option：

mounted() {
  // 初始化ECharts实例
  const myChart = echarts.init(this.$refs.chart)

  // 设置option
  const option = {
    series: [{
      type: 'liquidFill',
      data: [0.6, 0.5, 0.4, 0.3],
      radius: '70%',
      color: ['#00baff', '#00e3ff', '#00ffff', '#8cfffb'],
      label: {
        normal: {
          position: ['50%', '50%'],
          formatter: '{a|{b}}\n{hr|}\n{c|{c}}',
          rich: {
            a: {
              fontSize: 20,
              color: '#fff'
            },
            hr: {
              borderColor: '#fff',
              width: '100%',
              borderWidth: 1,
              height: 0
            },
            c: {
              fontSize: 18,
              color: '#fff',
              padding: [3, 0]
            }
          }
        }
      }
    }]
  }
  myChart.setOption(option)
}

最后，在Vue组件的template中添加一个div元素来渲染ECharts图表：

<template>
  <div ref="chart" style="height: 300px;"></div>
</template>

2. 在Vue指令中使用ECharts-liquidfill插件

除了在Vue组件中使用，我们还可以将ECharts-liquidfill插件封装成一个Vue指令，方便在多个组件中重复使用。首先，我们需要在项目中创建一个新的文件，例如liquidfill.js，并在其中引入ECharts和ECharts-liquidfill插件：

import echarts from 'echarts'
import 'echarts-liquidfill'

export default {
  inserted(el, binding) {
    const myChart = echarts.init(el)
    const option = {
      series: [{
        type: 'liquidFill',
        data: [binding.value],
        radius: '70%',
        color: ['#00baff', '#00e3ff', '#00ffff', '#8cfffb'],
        label: {
          normal: {
            position: ['50%', '50%'],
            formatter: '{a|{b}}\n{hr|}\n{c|{c}}',
            rich: {
              a: {
                fontSize: 20,
                color: '#fff'
              },
              hr: {
                borderColor: '#fff',
                width: '100%',
                borderWidth: 1,
                height: 0
              },
              c: {
                fontSize: 18,
                color: '#fff',
                padding: [3, 0]
              }
            }
          }
        }
      }]
    }
    myChart.setOption(option)
  }
}

然后，在Vue组件中引入并使用该指令：

<template>
  <div v-liquidfill="0.6" style="height: 300px;"></div>
</template>

<script>
import liquidfill from './liquidfill.js'

export default {
  directives: {
    liquidfill
  }
}
</script>

这样就可以在多个Vue组件中重复使用该指令，而不需要重复编写ECharts-liquidfill插件的初始化和option设置。