echarts 水球图--Vue

我这里只有干货，直接拿来用。

1.下载

"echarts": "^4.9.0",
"echarts-liquidfill": "^2.0.6",

这个版本对应可以用

npm i echarts echarts-liquidfill

2.引入 echart.vue

import * as echarts from "echarts";
import "echarts-liquidfill";

<div ref="chart" class="chart-view" :options="options" />

mounted() {
    this.initChart();
    window.addEventListener("resize", this.resizeChart);
  },
  destroyed() {
    window.removeEventListener("resize", this.resizeChart);
  },

methods: {
    initChart() {
      if (this.$refs.chart) {
        this.chartView = echarts.init(this.$refs.chart);
        if (this.options) {
          this.chartView.clear();
          this.chartView.setOption(this.options);
          this.resizeChart();
        }
      }
    },
    resizeChart() {
      if (this.chartView) {
        setTimeout(() => {
          this.chartView.resize();
        }, 200);
      }
    },
  },

3. 直接用组件或者单个引入使用也可以！！

4.配置option、参数

series: [{
          type: 'liquidFill',
          name: '全国就业率', // 系列名称，用于tooltip的显示，legend 的图例筛选
          radius: '62%', // 水球图的半径
          center: ['50%', '60%'], // 水球图的中心（圆心）坐标，数组的第一项是横坐标，第二项是纵坐标
          // 水填充图的形状 circle 默认圆形  rect 圆角矩形  triangle 三角形  
          // diamond 菱形  pin 水滴状 arrow 箭头状  还可以是svg的path
          shape: 'circle',
          phase: 0, // 波的相位弧度 不设置  默认自动
          direction: 'right', // 波浪移动的速度  两个参数  left 从右往左 right 从左往右
          outline: {
            show: true,
            borderDistance: 0, // 边框线与图表的距离 数字
            itemStyle: {
              opacity: 1, // 边框的透明度   默认为 1
              borderWidth: 1, // 边框的宽度
              shadowBlur: 1, // 边框的阴影范围 一旦设置了内外都有阴影
              shadowColor: '#fff', // 边框的阴影颜色,
              borderColor: '#41dcd8' // 边框颜色
            }
          },
          // 图形样式
          itemStyle: {
            color: '#4077eb', // 水球显示的背景颜色
            opacity: 0.5, // 波浪的透明度
            shadowBlur: 10 // 波浪的阴影范围
          },
          backgroundStyle: {
            color: '#407bf3', // 水球未到的背景颜色
            opacity: 0.5
          },
          // 图形的高亮样式
          emphasis: {
            itemStyle: {
              opacity: 0.8 // 鼠标经过波浪颜色的透明度
            }
          },
          // 图形上的文本标签
          label: {
            fontSize: 55,
            fontWeight: 400,
            color: '#fff'
          },
          data: [0.62] // 系列中的数据内容数组
        }]

————————————————
版权声明：本文为CSDN博主「半度℃温热」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/fu983531588/article/details/97274041

记录进步！