echarts水波图示例

该示例使用于vue3项目中

效果图

image.png

---

准备

下载包

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

在需要使用的组件中引用

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

html

css

配置项

{
      // 提示框组件
      tooltip: {
        show: false,
        trigger: "item", // 触发类型, 数据项图形触发，主要在散点图，饼图等无类目轴的图表中使用。
        textStyle: {
          color: "#000", // 文字颜色
        },
        formatter: function (value) {
          return value.seriesName + ": " + parseInt(value.value * 100) + "%";
        },
      },
      series: [
        {
          type: "liquidFill",
          name: "全国就业率",
          radius: "40%",
          center: ["50%", "50%"],
          shape: "circle",
          phase: 0,
          direction: "right",
          outline: {
            show: true,
            borderDistance: 0, // 边框线与图表的距离 数字
            itemStyle: {
              opacity: 1,
              borderWidth: 0,
              borderColor: state.color,
            },
          },
          // 图形样式
          itemStyle: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              { offset: 0, color: "#c5e87e" }, //柱图渐变色
              { offset: 0.5, color: state.color }, //柱图渐变色                 //柱图渐变色
            ]),
            opacity: 0.5,
            shadowBlur: 10,
          },
          backgroundStyle: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              { offset: 0, color: state.color }, //柱图渐变色
              { offset: 0.4, color: "#44C0C1" }, //柱图渐变色                 //柱图渐变色
            ]),
            opacity: 0.5,
          },
          // 图形的高亮样式
          emphasis: {
            itemStyle: {
              opacity: 1,
            },
          },
          // 图形上的文本标签
          label: {
            fontSize: 40,
            fontWeight: 600,
            color: "#fff",
          },
          data: state.list,
        },
        {
          name: "Access From",
          type: "pie",
          radius: ["43%", "50%"],
          center: ["50%", "50%"],
          startAngle: 340,
          avoidLabelOverlap: false,
          itemStyle: {
            borderRadius: 10,
          },
          label: {
            show: false,
            position: "center",
          },
          emphasis: {
            label: {
              show: true,
              fontSize: "40",
              fontWeight: "bold",
            },
          },
          labelLine: {
            show: false,
          },
          data: [
            {
              value: 0.4,
              name: "Direct",
              itemStyle: {
                color: state.color,
              },
            },
            {
              value: 0.6,
              name: "Direct",
              itemStyle: {
                color: "rgba(240, 248, 255, 0)",
              },
            },
          ],
          emphasis: {
            disabled: true,
          },
          tooltip: {
            show: false,
          },
        },
      ],
    };

---

完整代码