vue绘制水球图

https://blog.csdn.net/qq_42597536/article/details/90056775

大佬连接可以直接用 我把它封装成组件了

  <div :class="className" :style="{height:height,width:width}" style="margin-top: 35px"/>
</template>

<script>
import echarts from 'echarts'
require('echarts/theme/macarons') // echarts theme
import resize from './mixins/resize'

const animationDuration = 6000

export default {
  mixins: [resize],
  props: {
    className: {
      type: String,
      default: 'chart'
    },
    width: {
      type: String,
      default: '100%'
    },
    height: {
      type: String,
      default: '200px'
    }
  },
  data() {
    return {
      chart: null
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.initChart()
    })
  },
  beforeDestroy() {
    if (!this.chart) {
      return
    }
    this.chart.dispose()
    this.chart = null
  },
  methods: {

    initChart() {
      this.chart = echarts.init(this.$el, 'macarons')

      this.chart.setOption({
          title: {
            // 标题
            text: '补贴资金剩余',
            textStyle: {
              // 标题的样式
              color: '#888', // 字体颜色
              fontFamily: 'Microsoft YaHei', // 字体
              fontSize: 14,
              fontWeight: '400',
              align: 'center', // 文字的水平方式
              baseline: 'middle',
              position: 'inside',
              verticalAlign: 'middle', // 文字的垂直方式
            },
            left: 'center', // 定位
            top: '20%',
          },
          series: [
            {
              type: 'liquidFill',
              radius: '95%',
              waveAnimation: true,
              data: [
                {
                  value: 0.3,
                  direction: 'left',
                  itemStyle: {
                    normal: {
                      color: '#1890ff',
                    },
                  },
                },
              ],
              outline: {
                // show: true , //是否显示轮廓 布尔值
                borderDistance: 1, // 外部轮廓与图表的距离 数字
                itemStyle: {
                  borderColor: '#1890ff', // 边框的颜色
                  borderWidth: 3, // 边框的宽度
                  // shadowBlur: 5 , //外部轮廓的阴影范围 一旦设置了内外都有阴影
                  // shadowColor: '#000' //外部轮廓的阴影颜色
                },
              },
              itemStyle: {
                opacity: 0.9, // 波浪的透明度
                shadowBlur: 0, // 波浪的阴影范围
              },
              backgroundStyle: {
                color: '#fff', // 图表的背景颜色
              },
              label: {
                // 数据展示样式
                show: true,
                color: '#000',
                insideColor: '#fff',
                fontSize: 20,
                fontWeight: 400,
                align: 'center',
                baseline: 'middle',
                position: 'inside',
              },
            },
          ],
        })
    }
  }
}
</script>

子要保证项目里引入了echarts 直接贴代码即可~~~~~~~~~